ProductsInAction-Modul
Das "Products In Action"-Modul bietet Ihren Kunden die Möglichkeit, ein oder mehrere Bilder, die ihn mit dem Produkt zeigen, direkt im Shop bei dem jeweiligen Produkt hochzuladen. Dabei kann der Kunde auch eine Bemerkung zu seinem Bild hinzufügen.
Durch die Bewertungsoption können andere Kunden die hochgeladenen Bilder bewerten. Der direkte Austausch von Anwendungserfahrungen und dem Erlebnis mit dem Produkt erhöht so die Kundenbindung in Ihrem Shop.
Mit dem ProductsInAction-Modul fördern Sie aktiv den Verkauf Ihrer Produkte, indem neben dem Anwenderbild das jeweilige Produkt angezeigt und direkt bestellt werden kann.
Hinweis: |
|
|
Diese Funktion muss für Ihren Shop freigeschaltet werden. Weitere Informationen hierzu erhalten Sie von der WEBSALE AG. |
Funktionsweise
Kunden, die im Shop angemeldet sind, können in der Produkt-Detailansicht eigene Bilder zu dem abgebildeten Produkt hochladen. Um Bilder hochzuladen, muss im Kundenkonto des Benutzers mindestens eine Rechnungsadresse sowie Vor- und Nachname angegeben sein. Die hochgeladenen Bilder können, nach Freigabe durch den Shopbetreiber, als Vorschaubilder (Thumbnail) mit dem Namen des Urhebers und dem Upload-Datum beim Produkt angezeigt werden. Die Anzahl der Bilder, die hochgeladen werden können, ist unbegrenzt.
Über die Benachrichtigungs-Funktion können Sie den Kunden vollautomatisch per E-Mail informieren, sobald sein hochgeladenes Bild freigegeben wurde. In der Konfiguration wird festgelegt, welchen Betreff und welchen Absender die automatische Benachrichtigungs-E-Mail enthält. Im Online-Servicebereich können Sie selbst einstellen, ob Sie bei neu hochgeladenen Bildern ebenfalls per E-Mail benachrichtigt werden möchten. Auch hierbei können Sie festlegen, an welche Adresse und mit welchem Betreff Ihnen die E-Mail gesendet werden soll.
Klickt der Kunde auf ein Vorschaubild, gelangt er auf eine Seite, auf der das Bild in Normalgröße (Größe konfigurierbar) angezeigt wird. Ist das Bild beim Upload größer als die standardmäßig konfigurierte Größe, wird es direkt auf die entsprechende Größe herunterskaliert. Neben dem Bild können weitere Informationen angezeigt werden. Jeder im Shop angemeldete Kunde kann die eingestellten Bilder bewerten und dadurch seine Begeisterung über das dargestellte Produkt teilen. Eine Mehrfach-Bewertung eines Bildes vom gleichen Benutzer ist dabei nicht möglich, ebensowenig kann der Einsender seine eigenen Bilder bewerten.
Zusätzlich zur Darstellung der Anwenderbilder in der Produkt-Detailansicht und in der Galerie kann auch auf Kategorie-Ebene ein Anwenderbild eingeblendet werden. Beim Neuladen oder Wechsel der Seite wird jeweils per Zufallsprinzip ein neues Anwenderbild geladen.
Alle hochgeladenen und freigeschalteten Bilder aller Produkte können innerhalb der ProductsInAction-Galerie aufgelistet werden. Der Shopbesucher kann dabei die Bilder-Galerie nach Datum, nach Bewertung sowie nach Name des Produktes, welches auf dem Bild dargestellt ist, sortieren. Außerdem kann er festlegen, wie viele Bilder pro Seite angezeigt werden sollen. Die Anzeige einer Galerie aller Bilder für nur ein Produkt ist auch möglich. Die Anzahl der standardmäßig angezeigten Bilder wird in der Konfiguration definiert.
Integration
Schritt 1: Technische Einrichtung
Für die Einrichtung und Bereitstellung dieses Features werden folgende Informationen benötigt:
▪Maximale Größe des Bildes (MB)
▪Erlaubte Bild-Dateiformate, z. B. jpg, png etc.
▪Proportionen des Bildes in Normalgröße (Höhe/Breite in Pixel)
▪E-Mail-Adresse für die Zusendung der Benachrichtigungs-E-Mail an den Shopbetreiber
Schritt 2: Einbinden der benötigten Abschnitte in die Konfiguration
Benötigte Templates
Hinterlegen Sie innerhalb der Shopkonfiguration shop.config im Abschnitt <ProductsInAction> die Templates, die später die Tags für das Feature enthalten. Die Benennung der Templates ist frei definierbar. Zusätzlich werden in diesem Abschnitt die Grafiken für die Bewertung hinterlegt. Die Grafiken müssen im Verzeichnis "benutzer/templates" liegen.
Legen Sie den Abschnitt neu an, wenn dieser nicht vorhanden ist:
<ProductsInAction>
Upload = incl_pia_upload.htm
Product = incl_pia_picture.htm
Gallery = incl_pia_gallery.htm
EmailForMerchant = mail_pia_merchant.htm
EmailForUser = mail_pia_user.htm
EmailWarningDiscUsage = mail_pia_warning.htm
RatingImg-00 = ratingpoints_0.png
RatingImg-01 = ratingpoints_1.png
RatingImg-02 = ratingpoints_2.png
RatingImg-03 = ratingpoints_3.png
RatingImg-04 = ratingpoints_4.png
RatingImg-05 = ratingpoints_5.png
</ProductsInAction>
Referenz: Abschnitt ProductsInAction
Hinweis- und Fehlermeldungen
Definieren Sie die Hinweis- und Fehlermeldungen in der Shopkonfiguration shop.config im Abschnitt <ProductsInActions-Txt>. Legen Sie den Abschnitt neu an, wenn dieser nicht vorhanden ist:
<ProductsInAction-Txt> NoUserName = Es wurde kein Benutzername eingegeben. Bitte überpürfen Sie Ihre Eingaben und versuchen Sie es erneut. UserNameTooBig = Leider ist Ihr eingegebener Benutzername zu lang. Es dürfen maximal 80 Zeichen hinterlegt werden. Bitte überprüfen Sie Ihre Eingaben und versuchen Sie es erneut. CommentTooBig = Leider ist Ihr eingebener Text zu lang. Es dürfen maximal 80 Zeichen eingegeben werden. Bitte überprüfen Sie Ihre Eingaben und versuchen Sie es erneut. NoFile = Sie haben vergessen, eine Datei zum Hochladen anzugeben. Bitte überprüfen Sie Ihre Eingaben und versuchen Sie es erneut. FileTooBig = Die Datei, die Sie hochladen möchten, ist leider zu groß. Bitte überprüfen Sie Ihre Datei und versuchen Sie es erneut. FileWrongFormat = Die Datei, die Sie hochladen möchten, hat leider ein ungültiges Format. Wir verarbeiten ausschließlich folgende Datenformate: JPG, TIFF, PDF. Bitte überprüfen Sie Ihr Dateiformat und versuchen Sie es erneut. InfoUploaded = Vielen Dank, dass Sie ein Bild hochgeladen haben. Wir haben Ihr Bild erhalten und werden dieses in Kürze freischalten. Darüber werden wir Sie per E-Mail informieren. LimitExceeded = Ihre Aktion hat die maximale Zeitdauer ueberschritten. Bitte warten Sie eine Weile und versuchen es dann erneut. ErrorUpload = Während des Hochladens Ihres Bildes ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut. SessionExpired = Ihre Sitzung ist abgelaufen. Bitte klicken Sie an eine beliebige Stelle im Shop und versuchen Sie es erneut. ErrorSave = Beim Speichern Ihres Bildes ist ein Fehler aufgetreten. Bitte überprüfen Sie Ihr Bild und versuchen Sie es erneut. NoDoubleRating = Dieses Bild wurde bereits von Ihnen bewertet. Pro Bild ist nur eine Bewertung möglich. Bitte wählen Sie ein anderes Bild, um eine Bewertung abzugeben. NoActionImage = Sie haben vergessen, ein Bild anzugeben. Bitte wählen Sie ein Bild aus und versuchen Sie es erneut. NoSenderRating = Leider ist es nicht möglich, Ihr eigenes Bild zu bewerten. Bitte wählen Sie ein anderes Bild aus, um eine Bewertung abzugeben. NoRating = Leider haben Sie vergessen, eine Bewertung anzugeben. Bitte überprüfen Sie Ihre Eingaben und versuchen Sie es erneut. RatingOutOfRange = Ihre angegebene Bewertung ist leider nicht erlaubt. Bitte überprüfen Sie Ihre Eingaben und versuchen Sie es erneut. NotLoggedIn = Um ein Bild hochzuladen oder eine Bewertung abzugeben, müssen Sie angemeldet sein. Bitte melden Sie sich an und versuchen Sie es erneut. UploadNotActive = Leider ist ein Fehler beim Upload aufgetreten. Bitte versuchen Sie es zu einem späteren Zeitpunkt noch einmal. RatedSuccess = Vielen Dank für Ihre Bewertung. DiscUsageExceeded = Leider ist beim Upload ein Fehler aufgetreten; Upload ist derzeit nicht möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt noch einmal. ArticleName = Artikelname DateNew = Datum (Neuestes zuerst) DateOld = Datum (Ältestes zuerst) Rating = Bewertung </ProductsInAction-Txt>
Referenz: Abschnitt ProcductsInAction-Txt
Einstellungen für die Dropdown-Liste, mit der der Käufer die maximale Anzahl von Bildern pro Seite festlegen kann
Definieren Sie die Einstellungen für die Dropdown-Liste in der Shopkonfiguration shop.config im Abschnitt <ProductsInAction-MaxProducts>. Legen Sie den Abschnitt neu an, wenn dieser nicht vorhanden ist:
<ProductsInAction-MaxProducts>
+Option = 12
+Option = 24
+Option = 48
Default = 24
</ProductsInAction-MaxProducts>
Referenz: Abschnitt ProductsInAction-MaxProducts
Einstellungen für die E-Mail-Benachrichtigung an den Kunden (User)
Definieren Sie die Einstellungen für die E-Mail-Benachrichtigung in der Shopkonfiguration shop.config im Abschnitt <ProductsInAction-Mail>: Legen Sie den Abschnitt neu an, wenn dieser nicht vorhanden ist:
<ProductsInAction-Mail>
Allow = yes
Subject-Txt = Ihr Bild wurde freigeschaltet !
SenderAddress = info@ihre-E-Mail-adresse.de
SenderName = Ihr Absendername
</ProductsInAction-Mail>
Referenz: Abschnitt ProductsInAction-Mail
Schritt 3: Integration auf der Produktdetailansicht (ws_product.htm)
Sie können auf der Produkt-Detailansicht die bereits hochgeladenen Bilder sowie Verlinkungen zum Upload und den möglichen Bilder-Galerien integrieren.
...
{!PIA-DATA(Anzahl der gewünschten Bilder)}
<!-- Bereich, wenn noch keine ProductsInAction-Bilder vorhanden sind -->
Zum Artikel "~PR-Name~" ist noch kein Foto hochgeladen worden!
Sie können der Erste sein und Ihr eigenes ProductInAction-Bild präsentieren.
<a href="~WS-LoadTpl(ws_actionimage_upload.htm)~&pi=~PR-ProdIndex~">Eigenes Foto hochladen</a>
{/!PIA-DATA(Anzahl der gewünschten Bilder)}
{PIA-DATA(Anzahl der gewünschten Bilder)}
<!-- Bereich, wenn bereits ProductsInAction-Bilder vorhanden sind -->
{@PIA-DATA(Anzahl der gewünschten Bilder)}
<li>
<img src="~PIA-Thumbnail~" alt="">
Dieses Bild wurde von ~PIA-UploaderName~ am ~PIA-Date~ hochgeladen
Bewertung des Bildes: ~PIA-Ratings~
<img border="0" src="ratingpoints_~PIA-RatingScore~.png">
<a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&techname=~PIA-TechName~">Bild vergrößern</a>
</li>
{/@PIA-DATA(Anzahl der gewünschten Bilder)}
{/PIA-DATA(Anzahl der gewünschten Bilder)}
<a href="~WS-LoadTpl(ws_actionimage_upload.htm)~&pi=~PR-ProdIndex~">Eigenes Foto hochladen</a>
{!PIA-DATA(Anzahl der gewünschten Bilder)}<a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&pi=~PR-ProdIndex~">Alle Fotos zu diesem Artikel</a></li>{!PIA-DATA(Anzahl der gewünschten Bilder)}
<a href="~WS-LoadTpl(ws_actionimage_gallery.htm)~">Alle Fotos im Shop ansehen</a></li>
...
{PIA-DATA(X)}: Zeigt an, ob es bereits ProductsInAction-Bilder für das Produkt gibt
Referenz: PIA-DATA(X)
{PIA-RandomData}: Anzeige einer beliebigen Anzahl von zufälligen ProductsInAction-Bildern.
Referenz: PIA-RandomData
PIA-Thumbnail: Kleines Vorschaubild
Referenz: PIA-Thumbnail
PIA-Image: Normalbild
Referenz: PIA-Image
PIA-UploaderName: Name der Person, die das Bild hochgeladen hat
Referenz: PIA-UploaderName
PIA-Date: Datum, an dem das Bild hochgeladen wurde
Referenz: PIA-Date
PIA-Time: Uhrzeit, an der das Bild hochgeladen wurde
Referenz: PIA-Time
PIA-ProdIndex: Produktindex des PIA-Produktes
Referenz: PIA-ProdIndex
PIA-RatingScore: Durchschnittliche Bewertungsnote
Referenz: PIA-RatingScore
PIA-RatingVotes: Anzahl aller abgegebener Bewertungen
Referenz: PIA-RatingVotes
PIA-TechName: Technischer Name PIA-Produktname
Referenz: PIA-TechnName
PIA-PRLink: Link zum PIA-Produkt
Referenz: PIA-PRLink
Schritt 4: Anlegen frei definierbarer Shop-Templates für die Integration der ProductsInAction-Templates
Zum Einbinden der ProductInAction-Templates in ein Shop-Template wird das ExternInclude-Tag benutzt. Dabei handelt es sich um die Templates mit den folgenden Funktionen:
▪Upload-Funktion
▪Galerieansicht
▪Groß-/Detailansicht mit Bewertungsfunktion und der Option, sich alle Bilder eines Produktes anzeigen zu lassen
(Steuerung über den Link)
Einbetten der Upload-Seite
Erstellen Sie ein beliebiges Template, z. B. ws_actionimage_upload.htm, in das Sie die folgenden Tags integrieren:
...
<!-- Durch das ExternInclude wird die Datei incl_pia_upload.htm eingebettet -->
{PR-Data}~WS-ExternInclude($PR-ActionImagesUploadLink$)~{/PR-Data}
...
Referenz: PR-ActionImagesUploadLink
Einbetten der Galerie-Seite
Erstellen Sie ein beliebiges Template, z. B. ws_actionimage_gallery.htm, in das Sie die folgenden Tags integrieren:
...
<!-- Durch das ExternInclude wird die Datei incl_pia_gallery.htm eingebettet -->
~WS-ExternInclude($WS-ActionImagesShowLink$)~
...
Referenz: WS-ActionImagesShowLink
Einbetten der Detailansicht inklusive Bewertungsfunktion und der Galerie-Option für alle Bilder eines Produktes
Erstellen Sie ein beliebiges Template, z. B. ws_actionimage_picture.htm, in das Sie die folgenden Tags integrieren:
...
{PR-Data}
<!-- Durch das ExternInclude wird die Datei incl_pia_picture.htm eingebettet -->
~WS-ExternInclude($WS-ActionImagesShowSpecificLink$)~
{/PR-Data}
...
Aufruf des Templates mit der Großansicht des Bildes:
...
<a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&techname=~AI-TechName~">Bild vergrößern</a>
...
Aufruf des Templates mit der Option, alle Bilder eines Produktes zu sehen:
...
<a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&pi=~PR-ProdIndex~">Alle Fotos zu diesem Produkt</a></li>
...
Referenz: WS-ActionImagesShowSpecificLink
Schritt 5: Einbinden der benötigten JavaScripts im Headbereich der Templates (aus Schritt 4)
Integrieren Sie bitte die folgenden JavaScripts in die Templates, die Sie im Schritt 4 erstellt haben:
...
<script type="text/javascript" src="/$WS/ws_sysdata/js/ws-system-1.8.1.js"></script>
<script type="text/javascript" src="../js/ws-design-1.8.1.js"></script>
<script type="text/javascript" src="/$WS/ws_sysdata/js/jquery.form.js"></script>
<script type="text/javascript" src="/$WS/ws_sysdata/js/ws-actionimages-1.0.0.js"></script>
...
Referenz: WEBSALE JavaScript-Bibliothek
Schritt 6: Erstellen des Include-Templates für den Upload
Erstellen Sie ein beliebiges Template, z. B. incl_pia_upload.htm, und fügen Sie folgende Tags innerhalb der Klammerung WS-Include ein:
Hinweis: |
|
|
Beachten Sie, dass die CSS-Klassennamen "box_info_hinweis" und "text_gross" im JavaScript-Code fest hinterlegt sind und daher nicht verändert werden dürfen. |
...
{WS-Include}
<!-- Javascript für die Anzeige von Hinweis- und Fehlermeldungen des Uploads -->
<script type="text/javascript">
var actimgVar = {
// String mit allen erlaubten Dateiformaten
formatlist: '~E-PIA_FileFormatList~',
// Fehlerliste (FMSG wird hier von ActionImageModul Ersetzt)
error: {
// Fehlermeldung bei Problem wärend Upload
ErrorUpload: '~FMSG-ErrorUpload~',
// Fehlermeldung bei Falschen Format
FileWrongFormat: '~FMSG-FileWrongFormat~',
// Fehlermeldung, wenn keine Datei ausgewählt wurde
NoFile: '~FMSG-NoFile~',
// Fehlermeldung: kein Username
NoUserName: '~FMSG-NoUserName~',
// Fehlermeldung: Username zu lang
UserNameTooBig: '~FMSG-UserNameTooBig~',
// Fehlermeldung: Kommentar zu groß
CommentTooBig: '~FMSG-CommentTooBig~'
},
size: {
UserName: 80,
Comment: 80
}
};
</script>
<!-- Für die Adresse des Upload-Links kein Protokoll (http/https) angeben! -->
<form action="//~E-PIA_UploadLink~" id="ws_actimg_uploadForm" encoding="multipart/form-data" enctype="multipart/form-data">
~E-PIA_HiddenTags(upload)~
<!-- Bereich, wenn ein User einen Upload starten darf -->
{E-PIA_UPLOAD-ALLOWED}
<!-- Div-Container zur Anzeige der Erfolgsmeldung für einen erfolgreichen Upload -->
<div id="ws_actimg_info_div" style="display:none">
{E-PIA_AJAX}<ws-ajax-ws_actimg_info_div>{/E-PIA_AJAX}
Die Datei wurde erfolgreich hochgeladen.
{E-PIA_AJAX}</ws-ajax-ws_actimg_info_div>{/E-PIA_AJAX}
</div>
<!-- Div-Container zur Anzeige der Meldung für einen fehlerhaften Upload -->
<div id="ws_actimg_error_div" style="display:none">
{E-PIA_AJAX}<ws-ajax-ws_actimg_error_div>{/E-PIA_AJAX}
<div class="box_info_hinweis">
<div class="text_gross">
~E-PIA_ErrorMsg~
</div>
</div>
{E-PIA_AJAX}</ws-ajax-ws_actimg_error_div>{/E-PIA_AJAX}
</div>
<!-- Eingabefelder und Button für den Upload -->
Benutzername: ~E-PIA_UserNameList(class="")~<br>
Bild auswählen: ~E-PIA_FileInput(class="")~<br>
Kommentar: ~E-PIA_CommentTextarea(class="")~<br>
<button type="submit">Jetzt hochladen</button>
{/E-PIA_UPLOAD-ALLOWED}
<!-- Bereich, wenn ein User einen Upload nicht starten darf -->
{!E-PIA_UPLOAD-ALLOWED}
Leider ist ein Upload derzeit nicht möglich:<br>
~E-PIA_ErrorMsg~
{/!E-PIA_UPLOAD-ALLOWED}
<a href="~PR-Link~">zurück zum Produkt</a>
</form>
{/WS-Include}
...
{WS-Include}: Nur der Quellcode und die Tags innerhalb dieser Klammerung werden inkludiert.
Referenz: WS-Include
E-PIA_UploadLink: Link zum Upload eines ActionImages
Referenz: E-PIA_UploadLink
E-PIA-HiddenTags(X): "hidden"-Felder, die beim Versand einer <form> benötigt werden
Referenz: E-PIA_HiddenTags(X)
{E-PIA_UPLOAD-ALLOWED}: Bereich, wenn das Hochladen eines PIA-Bildes erlaubt ist
Referenz: E-PIA_UPLOAD-ALLOWED
{E-PIA_AJAX}: Aktiv, wenn Template im AJAX-Modus aufgerufen wird
Referenz: E-PIA_AJAX
E-PIA_ErrorMsg: Fehlermeldung bei Aktionen
Referenz: E-PIA_ErrorMsg
E-PIA_UserNameList: Auswahl des Usernamens
Referenz: E-PIA_UserNameList
E-PIA_FileInput(): Eingabefeld
Referenz: E-PIA_FileInput
E-PIA_CommentTextarea(): Kommentarfeld
Referenz: E-PIA_CommentTextarea
E-PIA_CommentTextarea(): Kommentarfeld
Referenz: E-PIA-TechnName
Schritt 7: Erstellen des Include-Templates für die Galerie-Ansicht
Erstellen Sie ein beliebiges Template, z. B. incl_action_gallery.htm, und fügen Sie folgende Tags innerhalb der Klammerung WS-Include ein.
...
{WS-Include}
<script type="text/JavaScript">
$(document).ready(function(){
$("select").change(function(){
$("#ws_actimg_prodgal").submit();
});
});
</script>
<form id="ws_actimg_prodgal" action="~FORM-Template(ws_actionimage_gallery.htm)~">
~E-PIA_HiddenTags~
<!-- Bereich für Hinweis- und Fehlermeldungen -->
{E-PIA_ErrorMsg}
~E-PIA_ErrorMsg~
{/E-PIA_ErrorMsg}
<!-- Bereich, der angezeigt wird, wenn noch keine Bilder vorhanden sind -->
{!E-PIA_ENTRIES-EXIST}
Derzeit sind noch keine Bilder hochgeladen worden.
<a href="~WS-Link~&pia=~E-PIA_PR-ProdIndex~">zurück zum Produkt</a>
{/!E-PIA_ENTRIES-EXIST}
<!-- Bereich, der angezeigt wird, wenn Bilder vorhanden sind -->
{E-PIA_ENTRIES-EXIST}
<!-- Sortierungsfunktion -->
Sortierung: ~E-PIA_SortList~<br>
<!-- Auswahl für die Anzahl der Bilder pro Seite -->
Anzahl: ~E-PIA_MaxProductsList~<br>
<!-- frei positionierte Anzeige der Blätterfunktion -->
Seite:
{E-PIA_ListPagingBack}<a href="~WS-LoadTpl(ws_actionimage_gallery.htm)~&~E-PIA_PagingParamBack~">zurück</a>{/E-PIA_ListPagingBack}
{E-PIA_ListPagingMoreBefore(2)}...{/E-PIA_ListPagingMoreBefore(2)}
{@E-PIA_ListPagingBefore(2)}<a href="~WS-LoadTpl(ws_actionimage_gallery.htm)~&~E-PIA-PagingParam~">~E-PIA_Page~</a>{/@E-PIA_ListPagingBefore}
~E-PIA_Page~
{@E-PIA_ListPagingAfter(2)}<a href="~WS-LoadTpl(ws_actionimage_gallery.htm)~&~E-PIA-PagingParam~">~E-PIA_Page~</a>{/@E-PIA_ListPagingAfter(2)}
{E-PIA_ListPagingMoreAfter(2)} ...{/E-PIA_ListPagingMoreAfter(2)}
{E-PIA_ListPagingNext}<a href="~WS-LoadTpl(ws_actionimage_gallery.htm)~&~E-PIA_PagingParamNext~">weiter</a>{/E-PIA_ListPagingNext}
<br>
<!-- Loop für die Anzeige der vorhandenen Bilder -->
{E-PIA_DATA}
{@E-PIA_DATA}
<a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&techname=~E-PIA_TechName~"><img src="~E-PIA_Action-Thumbnail~"></a><br>
Dieses Bild wurde von ~E-PIA_UserName~ am ~E-PIA_CreateDate~ hochgeladen<br>
Bewertung des Bildes: (~E-PIA_RatingVotes~) <img border="0" src="~E-PIA_RatingScoreImg~"><br>
{E-PIA_Comment}Kommentar: ~E-PIA_Comment~<br>{/E-PIA_Comment}
<a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&techname=~E-PIA_TechName~">Bild vergrößern</a><br>
{/@E-PIA_DATA}
{/E-PIA_DATA}
<a href="{NO_PARSING}~PR-Link({/NO_PARSING}~E-PIA_PR-ProdIndex~{NO_PARSING})~{/NO_PARSING}">zurück zum Produkt</a>
{/E-PIA_ENTRIES-EXIST}
</form>
{/WS-Include}
...
Auf der Galerie gibt es die Möglichkeit, zusätzlich noch die beliebtesten Bilder anzeigen zu lassen:
...
{WS-Include}
{E-PIA_AdvData($BestImages,3)}
<h1>Unsere beliebtesten Fotos</h1>
{@E-PIA_DATA}
<a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&techname=~E-PIA_TechName~"><img src="~E-PIA_Action-Thumbnail~"></a><br>
Dieses Bild wurde von ~E-PIA_UserName~ am ~E-PIA_CreateDate~ hochgeladen<br>
Bewertung des Bildes: (~E-PIA_RatingVotes~) <img border="0" src="~ACTIMG-RatingScoreImg~"><br>
{E-PIA_Comment}Kommentar: ~E-PIA_Comment~<br>{/E-PIA_Comment}
<a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&techname=~E-PIA_TechName~">Bild vergrößern</a><br>
{/@E-PIA_DATA}
{/E-PIA_AdvData($BestImages,3)}
{/WS-Include}
...
{WS-Include}: Nur der Quellcode und die Tags innerhalb dieser Klammerung werden inkludiert.
Referenz: WS-Include
{E-PIA_ENTRIES-EXIST}: Mindestens eine PIA-Bild ist vorhanden
Referenz: E-PIA_ENTRIES-EXIST
E-PIA-HiddenTags(X): "hidden"-Felder, die beim Versand einer <form> benötigt werden
Referenz: E-PIA_HiddenTags(X)
E-PIA_SortList: Auswahlbox für die Sortierreihenfolge
Referenz: E-PIA_SortList
E-PIA_MaxProductsList: Auswahl zur Anzahl der PIA-Bilder pro Seite
Referenz: E-PIA_MaxProductsList
E-PIA_ErrorMsg: Fehlermeldung bei Aktionen
Referenz: E-PIA_ErrorMsg
E-PIA_ProdIndex: Produktindex
Referenz: E-PIA_ProdIndex
E-PIA_MaxProductsList: Anzahl der Bilder pro Seite
Referenz: E-PIA_MaxProductsList
E-PIA_ListPagingBack: Bereich für die Blätterfunktion
Referenz: E-PIA_ListPagingBack
E-PIA_ListPagingMoreBefore(X): Bereich für die Anzeige der Blätterfunktion
Referenz: E-PIA_ListPagingMoreBefore(X)
E-PIA_ListPagingBefore(X): Bereich für die Anzeige der Blätterfunktion
Referenz: E-PIA_ListPagingBefore(X)
E-PIA_ListPagingMoreAfter(X): Bereich für die Anzeige der Blätterfunktion
Referenz: E-PIA_ListPagingMoreAfter(X)
E-PIA_ListPagingAfter(X): Bereich für die Anzeige der Blätterfunktion
Referenz: E-PIA_ListPagingAfter(X)
E-PIA_ListPagingNext: Weiter-Link für die Blätterfunktion
Referenz: E-PIA_ListPagingNext
E-PIA_PagingParamBack: Zurück-Link für die Blätterfunktion
Referenz: E-PIA_PagingParamBack
E-PIA_PagingParam: Parameter für Verlinkungen in der Blätterfunktion
Referenz: E-PIA_PagingParam
E-PIA_Page: Aktuelle Seite/Seitennummer
Referenz: E-PIA_Page
E-PIA_DATA: Anzeige von ProductsInAction-Daten
Referenz: E-PIA_DATA
E-PIA_TechName: ID
Referenz: E-PIA_TechName
E-PIA_UserName: Benutzername
Referenz: E-PIA_UserName
E-PIA_CreateDate: Datum, an dem Bild hochgeladen wurde
Referenz: E-PIA_CreateDate
E-PIA_RatingVotes: Anzahl aller Bewertungen
Referenz: E-PIA_RatingVotes
E-PIA_RatingScoreImg: Bild der Bewertung
Referenz: E-PIA_RatingScoreImg
E-PIA_Comment: Bild der Bewertung
Referenz: E-PIA_Comment
E-PIA_AdvData: Bereich für ProductsInAction-Daten
Referenz: E-PIA_AdvData
Schritt 8: Erstellen des Include-Templates für die Groß- und Detailansicht eines Bildes mit Bewertungsfunktion
Erstellen Sie ein beliebiges Template, z. B. incl_pia_picture.htm, und fügen Sie folgende Tags innerhalb der Klammerung WS-Include ein.
...
{WS-Include}
<!-- Bereich für Hinweis- und Fehlermeldungen -->
{E-PIA_ErrorMsg}
~E-PIA_ErrorMsg~
{/E-PIA_ErrorMsg}
<!-- Anzeige des Bildes in der Großansicht -->
{E-PIA_SHOW-SINGLE}
<img src="~E-PIA_Action-Image~" border="0"><br>
(~E-PIA_RatingVotes~) <img src="~E-PIA_RatingScoreImg~" alt=""> ~E-PIA_HiddenTags(rating)~<br>
Foto von ~E-PIA_UserName~ am ~E-PIA_CreateDate~<br>
{E-PIA_Comment}Kommentar: ~E-PIA_Comment~<br>{/E-PIA_Comment}
<!-- Hinweis, dass eine Bewertung nur im eingeloggten Zustand möglich ist -->
{!ST-LoggedIn}
Möchten Sie dieses Bild ebenfalls bewerten? Dann melden Sie sich bitte an.
{/!ST-LoggedIn}
<!-- Bereich zum Bewerten eines Bildes - eine Bewertung kann nur im eingeloggten Zustand abgegeben werden -->
{ST-LoggedIn}
<form action="~FORM-Template(ws_actionimage_picture.htm)~" method="get">
<input type="hidden" name="pi" value="~E-PIA_PR-ProdIndex~">
~E-PIA_HiddenTags(rating)~
<h1>Bewerten Sie dieses Bild</h1>
<!-- Bereich, der angezeigt wird, wenn die Bewertung erfolgreich abgegeben wurde -->
{E-PIA_RATING-OK}
{E-PIA_InfoMsg}~E-PIA_InfoMsg~{/E-PIA_InfoMsg}
Sie haben folgende Bewertung abgegeben: <img src="~E-PIA_UserRatingScore~" border="0"><br>
{/E-PIA_RATING-OK}
<!-- Bereich, der angezeigt wird, wenn die Bewertung nicht erfolgreich abgegeben werden kann -->
{!E-PIA_RATING-OK}
<!-- Bereich, der angezeigt wird, wenn keine Bewertung abgegeben werden darf -->
{!E-PIA_RATING-ALLOWED}
Sie haben dieses Foto hochgeladen oder bereits bewertet.<br>
Eine Bewertung dieses Bildes ist somit nicht mehr möglich!
{/!E-PIA_RATING-ALLOWED}
{/!E-PIA_RATING-OK}
<!-- Bereich, der angezeigt wird, wenn eine Bewertung abgegeben werden kann -->
{E-PIA_RATING-ALLOWED}
Bitte geben Sie eine Bewertung ab:<br><br>
5 Sterne
<input type="radio" value="5" name="ws_actimg_rating">
<img src="../../navigation/grafiken/rating/ratingpoints_5.png" alt="5 Sterne"><br>
4 Sterne
<input type="radio" value="4" name="ws_actimg_rating">
<img src="../../navigation/grafiken/rating/ratingpoints_4.png" alt="4 Sterne"><br>
3 Sterne
<input type="radio" value="3" name="ws_actimg_rating">
<img src="../../navigation/grafiken/rating/ratingpoints_3.png" alt="3 Sterne"><br>
2 Sterne
<input type="radio" value="2" name="ws_actimg_rating">
<img src="../../navigation/grafiken/rating/ratingpoints_2.png" alt="2 Sterne"><br>
1 Stern
<input type="radio" value="1" name="ws_actimg_rating">
<img src="../../navigation/grafiken/rating/ratingpoints_1.png" alt="1 Stern"><br>
<button type="submit">Jetzt bewerten</button>
{/E-PIA_RATING-ALLOWED}
</form>
{/ST-LoggedIn}
<a href="~WS-LoadTpl(ws_actionimage_upload.htm)~&pi=~E-PIA_PR-ProdIndex~">Eigenes Foto hochladen</a><br>
<a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&pi=~E-PIA_PR-ProdIndex~">Alle Fotos zu diesem Artikel</a><br>
<a href="~WS-LoadTpl(ws_actionimage_gallery.htm)~">Alle Fotos im Shop ansehen</a><br>
{/E-PIA_SHOW-SINGLE}
<!-- Alle Bilder eines Produktes anzeigen lassen -->
{!E-PIA_SHOW-SINGLE}
{E-PIA_DATA}
{@E-PIA_DATA}
<a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&techname=~E-PIA_TechName~"><img src="~E-PIA_Action-Thumbnail~" alt=""></a><br>
Dieses Bild wurde von ~E-PIA_UserName~ am ~E-PIA_CreateDate~ hochgeladen<br>
Bewertung des Bildes: (~E-PIA_RatingVotes~) <img src="~E-PIA_RatingScoreImg~" alt=""> ~E-PIA_HiddenTags(rating)~<br>
{E-PIA_Comment}Kommentar: ~E-PIA_Comment~<br>{/E-PIA_Comment}
<a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&techname=~E-PIA_TechName~">Bild vergrößern</a><br>
{/@E-PIA_DATA}
{E-PIA_DATA}
{/!E-PIA_SHOW-SINGLE}
<a href="{NO_PARSING}~PR-Link({/NO_PARSING}~E-PIA_PR-ProdIndex~{NO_PARSING})~{/NO_PARSING}">zurück zum Produkt</a>
{/WS-Include}
...
{WS-Include}: Nur der Quellcode und die Tags innerhalb dieser Klammerung werden inkludiert.
Referenz: WS-Include
E-PIA_ErrorMsg: Fehlermeldungen
Referenz: E-PIA_ErrorMsg
E-PIA_SHOW-SINGLE: Daten für die Einzelansicht
Referenz: E-PIA_SHOW-SINGLE
E-PIA_Action-Image: ProductsInAction-Bild
Referenz: E-PIA_Action-Image
E-PIA_RatingScoreImg: Bild der Bewertung
Referenz: E-PIA_RatingScoreImg
E-PIA-HiddenTags(X): Hidden-Felder, die beim Versand einer <form> benötigt werden
Referenz: E-PIA_HiddenTags(X)
E-PIA_RatingVotes: Anzahl aller Bewertungen
Referenz: E-PIA_RatingVotes
E-PIA_UserName: Benutzername
Referenz: E-PIA_UserName
E-PIA_CreateDate: Datum, an dem Bild hochgeladen wurde
Referenz: E-PIA_CreateDate
E-PIA_Comment: Bild der Bewertung
Referenz: E-PIA_Comment
E-PIA_PR-ProdIndex: Index des ProductsInAction-Produktes
Referenz: E-PIA_PR-ProdIndex
E-PIA_RATING-OK: Bereich, wenn eine Bewertung erfolgreich abgegeben wurde
Referenz: E-PIA_RATING-OK
E-PIA_InfoMsg: Informationsmeldungen
Referenz: E-PIA_InfoMsg
E-PIA_RATING-ALLOWED: Bereich, wenn eine Bewertung abgegeben werden darf
Referenz: E-PIA_RATING-ALLOWED
E-PIA_DATA: Anzeige von ProductsInAction-Daten
Referenz: E-PIA_DATA
E-PIA_TechName: ID
Referenz: E-PIA_TechName
Schritt 9: Informations-E-Mail an den Kunden, dass sein PIA-Bild hochgeladen wurde und im Onlineshop sichtbar ist
Definieren Sie die Einstellungen einer E-Mail-Benachrichtigung in der Shopkonfiguration shop.config im Abschnitt <ProductsInAction-Mail>. Wenn Sie sich für den Versand einer E-Mail entschieden haben, erstellen Sie ein beliebiges Template, z. B. mail_pia_user.htm, und fügen folgende Tags ein:
...
Sehr geehrter Kunde,
es freut uns Ihnen mitzuteilen, dass Ihr Bild zum Produkt <b>~PR-Name~</b> von uns freigeschaltet wurde.
Folgende Informationen wurden uns von Ihnen angegeben:<br><br>
Datum der Einsendung: ~E-PIA_CreateDate~<br>
Uhrzeit der Einsendung: ~E-PIA_CreateTime~<br>
Name des Einsenders: ~E-PIA_UserName~<br>
Dateiname: ~E-PIA_FileName~<br>
{E-PIA_Comment}Kommentar: ~E-PIA_Comment~<br>{/E-PIA_Comment}
...
E-PIA_UserName: Benutzername
Referenz: E-PIA_UserName
E-PIA_CreateDate: Datum, an dem das Bild hochgeladen wurde
Referenz: E-PIA_CreateDate
E-PIA_CreateTime: Uhrzeit, an dem das Bild hochgeladen wurde
Referenz: E-PIA_CreateTime
E-PIA_Comment: Kommentar des User
Referenz: E-PIA_Comment
E-PIA_FileName: Dateiname
Referenz: E-PIA_FileName
Schritt 10: Informations-E-Mail an den Shopbetreiber, dass ein PIA-Bild hochgeladen wurde
Definieren Sie die Einstellungen einer E-Mail-Benachrichtigung an den Shopbetreiber im Online-Servicebereich. Wenn Sie sich für den Versand einer E-Mail entschieden haben, erstellen Sie ein beliebiges Template, z. B. mail_pia_merchant.htm, und fügen folgende Tags ein:
...
<p>Es wurde ein neues Bild hochgeladen.</p>
<p>Folgende Informationen haben wir erhalten:</p>
Produkt: ~PR-Name~<br>
Datum: ~E-PIA_CreateDate~<br>
Uhrzeit: ~E-PIA_CreateTime~<br>
Dateiname: ~E-PIA_FileName~<br>
Technischer Name: ~E-PIA_TechName~<br>
User Name: ~E-PIA_UserName~<br>
User Index: ~E-PIA_UserIndex~<br>
User IP: ~E-PIA_UserIp~<br>
{E-PIA_Comment}Kommentar: ~E-PIA_Comment~{/E-PIA_Comment}
...
PR-Name: Produktname
Referenz: PR-Name
E-PIA_UserName: Benutzername
Referenz: E-PIA_UserName
E-PIA_CreateDate: Datum, an dem das Bild hochgeladen wurde
Referenz: E-PIA_CreateDate
E-PIA_CreateTime: Uhrzeit, an dem das Bild hochgeladen wurde
Referenz: E-PIA_CreateTime
E-PIA_Comment: Kommentar des User
Referenz: E-PIA_Comment
E-PIA_FileName: Dateiname
Referenz: E-PIA_FileName
E-PIA_TechName: ID
Referenz: E-PIA_TechName
E-PIA_UserIndex: UserIndex
Referenz: E-PIA_UserIndex
E-PIA_UserIp: UserIP
Referenz: E-PIA_UserIp
Schritt 11: Hinweis-E-Mail, wenn der bereitgestellte Speicherplatz erreicht wurde
Definieren Sie die Einstellungen einer E-Mail-Benachrichtigung in der Shopkonfiguration shop.config im Abschnitt <ProductsInAction>. Erstellen Sie ein beliebiges Template, z. B. mail_pia_warning.htm, und fügen Sie folgende Hinweismeldung ein:
...
<p><b>Wichtige Speicherplatz-Meldung!</b></p>
<p>Der für diese Funktion verfügbare Speicherplatz auf dem Server ist fast aufgebraucht!</p>
<p>Mit freundlichen Grüßen<br><br>Ihre WEBSALE AG</p>
...
Wegweiser: Funktionsbeschreibung "Products In Action"