ProductsInAction-Modul - WEBSALE Dokumentation

Ein Produktfoto aus dem Katalog zeigt, wie ein Artikel aussieht. Ein Foto eines Käufers zeigt, wie er benutzt wird, und das überzeugt andere Käufer anders. Das ProductsInAction-Modul lässt angemeldete Käufer eigene Bilder zu einem Produkt hochladen, wahlweise mit einem Kommentar. Nach Ihrer Freigabe erscheinen die Bilder beim Produkt, in einer Galerie und auf Wunsch auch auf Kategorieebene. Andere Käufer können sie bewerten, und neben jedem Anwenderbild steht das Produkt, das darauf zu sehen ist, samt Bestellmöglichkeit. Das Modul muss für Ihren Shop freigeschaltet werden. Wenden Sie sich dafür an Ihren Ansprechpartner bei der WEBSALE AG.

Funktionsweise

Wer hochladen darf

Hochladen kann nur ein angemeldeter Käufer, in dessen Kundenkonto mindestens eine Rechnungsadresse sowie Vor- und Nachname hinterlegt sind. Die Zahl der Bilder je Käufer ist nicht begrenzt.

Freigabe und Benachrichtigung

Ein hochgeladenes Bild erscheint erst nach Ihrer Freigabe im Shop. Zwei Benachrichtigungen begleiten diesen Weg:

Mail	An wen	Eingerichtet in
Bild wurde hochgeladen	an Sie	Online-Servicebereich
Bild wurde freigegeben	an den Käufer	`shop.config`

Die Benachrichtigung an Sie stellen Sie im Online-Servicebereich ein, nicht in der Shopkonfiguration. Dort legen Sie auch fest, an welche Adresse sie geht und welchen Betreff sie trägt.

Anzeige und Bewertung

Beim Produkt erscheinen die freigegebenen Bilder als Vorschaubilder mit Namen des Urhebers und Upload-Datum. Ein Klick führt zur Großansicht in der konfigurierten Größe. Ist ein Bild beim Upload größer, wird es beim Hochladen heruntergerechnet. Kleinere Bilder werden nicht vergrößert. Jeder angemeldete Käufer kann ein Bild bewerten, aber:

ein Bild nur einmal
und niemals das eigene

Galerie und Kategorieebene

Alle freigegebenen Bilder aller Produkte lassen sich in einer Galerie auflisten. Der Besucher sortiert dort nach Datum, Bewertung oder Produktname und stellt ein, wie viele Bilder je Seite erscheinen. Auch eine Galerie für ein einzelnes Produkt ist möglich. Auf Kategorieebene lässt sich ein einzelnes Anwenderbild einblenden. Bei jedem Seitenwechsel wird dafür zufällig ein anderes Bild gewählt.

Schritt 1: Die technische Einrichtung beauftragen

Für die Einrichtung durch die WEBSALE AG brauchen Sie vier Angaben:

die maximale Größe einer Bilddatei in MB
die erlaubten Dateiformate, beispielsweise JPG und PNG
die Maße der Normalgröße in Pixeln, Höhe und Breite
die E-Mail-Adresse für die Benachrichtigung an Sie

Diese Angaben landen in der plattformseitigen Konfiguration, zusammen mit dem Ablageort der Bilder und zwei Schaltern: einem für das Modul insgesamt und einem eigenen für den Upload. Der Upload lässt sich also abschalten, ohne die vorhandenen Bilder aus dem Shop zu nehmen.

Schritt 2: Die Konfigurationsabschnitte anlegen

Das Modul bringt drei Abschnitte mit.

Abschnitt	Inhalt
`<ProductsInAction>`	die Templates und die Grafiken für die Bewertung
`<ProductsInAction-Txt>`	alle Hinweis- und Fehlermeldungen
`<ProductsInAction-MaxProducts>`	die Auswahl für die Bilder je Seite
`<ProductsInAction-Mail>`	die Benachrichtigung an den Käufer

Templates und Bewertungsgrafiken

<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>

Parameter	Bedeutung
`Upload`	das Include-Template des Uploadformulars
`Product`	das Include-Template der Groß- und Detailansicht
`Gallery`	das Include-Template der Galerie
`EmailForUser`	das Template der Freigabemail an den Käufer
`EmailForMerchant`	das Template der Uploadmail an Sie
`EmailWarningDiscUsage`	das Template der Warnung bei knappem Speicherplatz
`RatingImg-00` bis `RatingImg-05`	die sechs Grafiken für null bis fünf Punkte

Die drei Templates Upload, Product und Gallery sind Pflicht. Fehlt auch nur eines, startet das Modul gar nicht und protokolliert stattdessen, dass die Konfiguration unvollständig ist. Legen Sie alle drei an, bevor Sie den ersten Aufruf testen.

Die Grafiken liegen im Verzeichnis benutzer/templates. Es sind sechs, nicht fünf: RatingImg-00 ist die Darstellung für ein noch unbewertetes Bild. Referenz: Abschnitt ProductsInAction

Die Meldungen

<ProductsInAction-Txt>
   NoUserName        = Es wurde kein Benutzername eingegeben. Bitte überprüfen Sie Ihre Eingaben.
   UserNameTooBig    = Der Benutzername ist zu lang. Erlaubt sind höchstens 80 Zeichen.
   CommentTooBig     = Ihr Text ist zu lang. Erlaubt sind höchstens 80 Zeichen.
   NoFile            = Sie haben keine Datei zum Hochladen ausgewählt.
   FileTooBig        = Die Datei ist zu groß.
   FileWrongFormat   = Die Datei hat ein Format, das wir nicht verarbeiten können. Bitte laden Sie ein JPG oder PNG hoch.
   UploadedSuccess   = Vielen Dank. Wir haben Ihr Bild erhalten und schalten es in Kürze frei. Sie bekommen dazu eine E-Mail.
   LimitExceeded     = Ihre Aktion hat zu lange gedauert. Bitte warten Sie einen Moment und versuchen Sie es erneut.
   ErrorUpload       = Beim Hochladen 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.
   NoDoubleRating    = Dieses Bild haben Sie bereits bewertet. Je Bild ist eine Bewertung möglich.
   NoActionImage     = Bitte wählen Sie ein Bild aus.
   NoSenderRating    = Das eigene Bild lässt sich nicht bewerten. Bitte wählen Sie ein anderes aus.
   NoRating          = Bitte geben Sie eine Bewertung ab.
   RatingOutOfRange  = Die angegebene Bewertung ist nicht zulässig.
   NotLoggedIn       = Zum Hochladen und Bewerten müssen Sie angemeldet sein. Bitte melden Sie sich an.
   UploadNotActive   = Der Upload ist derzeit nicht möglich. Bitte versuchen Sie es später noch einmal.
   RatedSuccess      = Vielen Dank für Ihre Bewertung.
   DiscUsageExceeded = Der Upload ist derzeit nicht möglich. Bitte versuchen Sie es später noch einmal.
   ArticleName       = Artikelname
   DateNew           = Datum, neueste zuerst
   DateOld           = Datum, älteste zuerst
   Rating            = Bewertung
</ProductsInAction-Txt>

Die letzten vier Einträge sind keine Meldungen, sondern die Beschriftungen der Sortierauswahl in der Galerie. Benutzername und Kommentar sind beide auf 80 Zeichen begrenzt. Das ist für einen Kommentar knapp. Formulieren Sie das Feld im Template entsprechend als kurze Bildunterschrift und nicht als Erfahrungsbericht, sonst stoßen Käufer regelmäßig an die Grenze. Referenz: Abschnitt ProductsInAction-Txt

Bilder je Seite

<ProductsInAction-MaxProducts>
   +Option = 12
   +Option = 24
   +Option = 48
   Default = 24
</ProductsInAction-MaxProducts>

Mehr als 50 Bilder je Seite sind nicht möglich. Ein höherer Wert in +Option wird beim Aufruf auf diese Grenze zurückgesetzt.

Referenz: Abschnitt ProductsInAction-MaxProducts

Die Freigabemail an den Käufer

<ProductsInAction-Mail>
   Allow         = yes
   Subject-Txt   = Ihr Bild ist jetzt im Shop zu sehen
   SenderAddress = info@ihr-shop.de
   SenderName    = Ihr Shop
</ProductsInAction-Mail>

Referenz: Abschnitt ProductsInAction-Mail

Die beiden Tag-Familien

Das Modul bringt zwei verschiedene Tag-Familien mit, und sie sind an verschiedenen Orten zu Hause. Wer das verwechselt, sucht lange nach dem Grund, warum ein Tag leer bleibt.

Familie	Wo sie funktioniert	Wofür
`PIA-…`	in den gewöhnlichen Shop-Templates, beispielsweise `ws_product.htm`	Vorschau der vorhandenen Bilder, Links zu Upload und Galerie
`E-PIA_…`	ausschließlich in den drei Include-Templates des Moduls	alles, was das Modul selbst ausgibt

Die Include-Templates des Moduls werden nicht vom Shop geparst, sondern vom Modul. Deshalb stehen dort die E-PIA_-Tags zur Verfügung und die PIA-Tags nicht. Umgekehrt gilt dasselbe.

Schritt 3: Die Produktdetailansicht

Auf ws_product.htm zeigen Sie die vorhandenen Bilder und verlinken auf Upload und Galerie. Dafür ist die Familie PIA- zuständig.

{!PIA-DATA(4)}
   <!-- noch keine Bilder vorhanden -->
   <p>
      Zum Artikel "~PR-Name~" gibt es noch kein Foto. Sie können der Erste sein.
   </p>
   <a href="~WS-LoadTpl(ws_actionimage_upload.htm)~&pi=~PR-ProdIndex~">
      Eigenes Foto hochladen
   </a>
{/!PIA-DATA(4)}

{PIA-DATA(4)}
   <ul>
      {@PIA-DATA(4)}
         <li>
            <img src="~PIA-Thumbnail~" alt="">
            Hochgeladen von ~PIA-UploaderName~ am ~PIA-Date~<br>
            Bewertung: ~PIA-RatingScore~ bei ~PIA-RatingVotes~ Stimmen<br>
            <a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&techname=~PIA-TechName~">
               Bild vergrößern
            </a>
         </li>
      {/@PIA-DATA(4)}
   </ul>

   <a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&pi=~PR-ProdIndex~">
      Alle Fotos zu diesem Artikel
   </a>
{/PIA-DATA(4)}

<a href="~WS-LoadTpl(ws_actionimage_upload.htm)~&pi=~PR-ProdIndex~">
   Eigenes Foto hochladen
</a>
<a href="~WS-LoadTpl(ws_actionimage_gallery.htm)~">
   Alle Fotos im Shop ansehen
</a>

Tag	Liefert
`PIA-DATA(X)`	Klammerung und Schleife über bis zu X vorhandene Bilder des Produkts
`PIA-RandomData`	eine beliebige Anzahl zufälliger Bilder, geeignet für die Kategorieebene
`PIA-Thumbnail`	das Vorschaubild
`PIA-Image`	das Bild in Normalgröße
`PIA-UploaderName`	den Namen des Urhebers
`PIA-Date`	das Datum des Uploads
`PIA-Time`	die Uhrzeit des Uploads
`PIA-ProdIndex`	den Produktindex
`PIA-RatingScore`	die durchschnittliche Bewertung
`PIA-RatingVotes`	die Zahl der abgegebenen Bewertungen
`PIA-TechName`	die technische Kennung des Bildes
`PIA-PRLink`	den Link zum Produkt

Der Parameter von PIA-DATA ist eine Zahl, und er muss in der öffnenden und der schließenden Klammer identisch sein. Im Beispiel oben sind es überall 4.

Der Link auf alle Fotos eines Artikels gehört in den Zweig, der greift, wenn Bilder vorhanden sind. Sonst führt er auf eine leere Seite. Referenz: PIA-DATA(X) · PIA-RandomData · PIA-Thumbnail · PIA-Image · PIA-UploaderName · PIA-Date · PIA-Time · PIA-ProdIndex · PIA-RatingScore · PIA-RatingVotes · PIA-TechName · PIA-PRLink

Schritt 4: Die drei Rahmen-Templates

Die Include-Templates des Moduls brauchen jeweils eine gewöhnliche Shop-Seite, die sie einbettet. Diese drei Rahmen legen Sie frei benannt in Ihrem Templateverzeichnis an.

Upload

ws_actionimage_upload.htm:

{PR-Data}~WS-ExternInclude($PR-ActionImagesUploadLink$)~{/PR-Data}

Galerie

ws_actionimage_gallery.htm:

~WS-ExternInclude($WS-ActionImagesShowLink$)~

Großansicht und Produktgalerie

ws_actionimage_picture.htm:

{PR-Data}
   ~WS-ExternInclude($WS-ActionImagesShowSpecificLink$)~
{/PR-Data}

Dieselbe Seite bedient zwei Fälle, gesteuert über den Aufrufparameter. Mit &techname=… zeigt sie ein einzelnes Bild groß, mit &pi=… alle Bilder eines Produkts.

<a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&techname=~PIA-TechName~">Bild vergrößern</a>
<a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&pi=~PR-ProdIndex~">Alle Fotos zu diesem Produkt</a>

Referenz: PR-ActionImagesUploadLink · WS-ActionImagesShowLink · WS-ActionImagesShowSpecificLink

Schritt 5: Die JavaScript-Dateien einbinden

In den Kopfbereich der drei Rahmen-Templates aus Schritt 4:

<script type="text/javascript" src="/$WS/ws_sysdata/js/ws-system-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>

Prüfen Sie die Versionsnummern gegen die in Ihrem Shop eingebundene WEBSALE JavaScript-Bibliothek. Zwei verschiedene Versionen derselben Bibliothek auf einer Seite führen zu Fehlern, die schwer zu finden sind.

Wegweiser: WEBSALE JavaScript-Bibliothek

Schritt 6: Das Upload-Template

Die Datei heißt so, wie Sie sie bei Upload eingetragen haben. Alles Wirksame steht innerhalb von {WS-Include}.

{WS-Include}

<script type="text/javascript">
   var actimgVar = {
      formatlist: '~E-PIA_FileFormatList~',
      error: {
         ErrorUpload:     '~FMSG-ErrorUpload~',
         FileWrongFormat: '~FMSG-FileWrongFormat~',
         NoFile:          '~FMSG-NoFile~',
         NoUserName:      '~FMSG-NoUserName~',
         UserNameTooBig:  '~FMSG-UserNameTooBig~',
         CommentTooBig:   '~FMSG-CommentTooBig~'
      },
      size: {
         UserName: 80,
         Comment:  80
      }
   };
</script>

<form action="//~E-PIA_UploadLink~"
      id="ws_actimg_uploadForm"
      method="post"
      enctype="multipart/form-data">

   ~E-PIA_HiddenTags(upload)~

   {E-PIA_UPLOAD-ALLOWED}

      <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 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>

      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}

   {!E-PIA_UPLOAD-ALLOWED}
      <p>Ein Upload ist derzeit nicht möglich:</p>
      ~E-PIA_ErrorMsg~
   {/!E-PIA_UPLOAD-ALLOWED}

   <a href="~PR-Link~">zurück zum Produkt</a>

</form>

{/WS-Include}

Die CSS-Klassen box_info_hinweis und text_gross stehen fest im JavaScript des Moduls. Benennen Sie sie nicht um, sonst erscheinen die Meldungen nicht.Die Adresse in action beginnt mit zwei Schrägstrichen und ohne Protokoll. Das ist Absicht: Der Aufruf übernimmt das Protokoll der aufrufenden Seite. Ein fest eingetragenes http:// bricht den Upload auf einer verschlüsselten Seite.

Das Formular braucht method="post" und enctype="multipart/form-data". Ohne beides kommt keine Datei beim Modul an.

Tag	Liefert
`WS-Include`	die Klammer um alles, was eingebunden wird
`E-PIA_UploadLink`	die Zieladresse des Uploads
`E-PIA_HiddenTags(X)`	die versteckten Felder, die das Formular braucht
`E-PIA_UPLOAD-ALLOWED`	Klammerung, wenn der Upload gerade erlaubt ist
`E-PIA_AJAX`	Klammerung, wenn das Template im AJAX-Modus läuft
`E-PIA_ErrorMsg`	die aktuelle Fehlermeldung
`E-PIA_UserNameList`	die Auswahl des anzuzeigenden Namens
`E-PIA_FileInput`	das Dateifeld
`E-PIA_CommentTextarea`	das Kommentarfeld
`E-PIA_FileFormatList`	die erlaubten Dateiformate als Zeichenkette

Referenz: WS-Include · E-PIA_UploadLink · E-PIA_HiddenTags(X) · E-PIA_UPLOAD-ALLOWED · E-PIA_AJAX · E-PIA_ErrorMsg · E-PIA_UserNameList · E-PIA_FileInput · E-PIA_CommentTextarea · E-PIA_FileFormatList

Schritt 7: Das Galerie-Template

Die Datei heißt so, wie Sie sie bei Gallery eingetragen haben.

{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~

   {E-PIA_ErrorMsg}~E-PIA_ErrorMsg~{/E-PIA_ErrorMsg}

   {!E-PIA_ENTRIES-EXIST}
      <p>Derzeit sind noch keine Bilder hochgeladen worden.</p>
      <a href="~WS-Link~&pia=~E-PIA_PR-ProdIndex~">zurück zum Produkt</a>
   {/!E-PIA_ENTRIES-EXIST}

   {E-PIA_ENTRIES-EXIST}

      Sortierung: ~E-PIA_SortList~<br>
      Anzahl: ~E-PIA_MaxProductsList~<br>

      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(2)}
      ~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>

      {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>
            Hochgeladen von ~E-PIA_UserName~ am ~E-PIA_CreateDate~<br>
            Bewertung: (~E-PIA_RatingVotes~) <img src="~E-PIA_RatingScoreImg~" alt=""><br>
            {E-PIA_Comment}Kommentar: ~E-PIA_Comment~<br>{/E-PIA_Comment}
         {/@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}

Das kleine Skript oben schickt das Formular ab, sobald der Besucher eine der beiden Auswahllisten ändert. Ohne es bräuchte die Galerie eine zusätzliche Schaltfläche zum Übernehmen. Die NO_PARSING-Konstruktion am Ende baut PR-Link zur Laufzeit aus dem Produktindex zusammen. Die geschweiften Klammern und der Tagname werden vor dem Parser geschützt, nur der Index in der Mitte wird aufgelöst.

Die beliebtesten Bilder

Zusätzlich lassen sich die bestbewerteten Bilder hervorheben.

{WS-Include}

{E-PIA_AdvData($BestImages,3)}
   <h2>Unsere beliebtesten Fotos</h2>

   {@E-PIA_DATA}
      <a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&techname=~E-PIA_TechName~">
         <img src="~E-PIA_Action-Thumbnail~" alt="">
      </a><br>
      Hochgeladen von ~E-PIA_UserName~ am ~E-PIA_CreateDate~<br>
      Bewertung: (~E-PIA_RatingVotes~) <img src="~E-PIA_RatingScoreImg~" alt=""><br>
      {E-PIA_Comment}Kommentar: ~E-PIA_Comment~<br>{/E-PIA_Comment}
   {/@E-PIA_DATA}

{/E-PIA_AdvData($BestImages,3)}

{/WS-Include}

Tag	Liefert
`E-PIA_ENTRIES-EXIST`	Klammerung, wenn mindestens ein Bild vorhanden ist
`E-PIA_SortList`	die Auswahlliste für die Sortierung
`E-PIA_MaxProductsList`	die Auswahlliste für die Bilder je Seite
`E-PIA_DATA`	Klammerung und Schleife über die Bilder der aktuellen Seite
`E-PIA_AdvData(X,Y)`	Klammerung für eine gesonderte Auswahl, beispielsweise die bestbewerteten
`E-PIA_TechName`	die technische Kennung des Bildes
`E-PIA_Action-Thumbnail`	das Vorschaubild
`E-PIA_UserName`	den Namen des Urhebers
`E-PIA_CreateDate`	das Datum des Uploads
`E-PIA_RatingVotes`	die Zahl der Bewertungen
`E-PIA_RatingScoreImg`	die Grafik zur durchschnittlichen Bewertung
`E-PIA_Comment`	den Kommentar, als Klammerung und als Wert
`E-PIA_PR-ProdIndex`	den Produktindex
`E-PIA_Page`	die aktuelle Seitenzahl
`E-PIA_ListPagingBack` / `…Next`	Klammerungen für Zurück und Weiter
`E-PIA_ListPagingBefore(X)` / `…After(X)`	Schleifen über X Seitenzahlen davor und danach
`E-PIA_ListPagingMoreBefore(X)` / `…MoreAfter(X)`	Klammerungen für die Auslassungspunkte
`E-PIA_PagingParamBack` / `…Next` / `E-PIA_PagingParam`	die Linkparameter der Blätterfunktion

Referenz: E-PIA_ENTRIES-EXIST · E-PIA_SortList · E-PIA_MaxProductsList · E-PIA_DATA · E-PIA_AdvData · E-PIA_TechName · E-PIA_Action-Thumbnail · E-PIA_UserName · E-PIA_CreateDate · E-PIA_RatingVotes · E-PIA_RatingScoreImg · E-PIA_Comment · E-PIA_PR-ProdIndex · E-PIA_Page · E-PIA_ListPagingBack · E-PIA_ListPagingNext · E-PIA_ListPagingBefore(X) · E-PIA_ListPagingAfter(X) · E-PIA_ListPagingMoreBefore(X) · E-PIA_ListPagingMoreAfter(X) · E-PIA_PagingParamBack · E-PIA_PagingParamNext · E-PIA_PagingParam

Schritt 8: Das Template der Großansicht

Die Datei heißt so, wie Sie sie bei Product eingetragen haben. Sie bedient beide Fälle: ein einzelnes Bild groß, oder alle Bilder eines Produkts.

{WS-Include}

{E-PIA_ErrorMsg}~E-PIA_ErrorMsg~{/E-PIA_ErrorMsg}

{E-PIA_SHOW-SINGLE}

   <img src="~E-PIA_Action-Image~" alt=""><br>
   (~E-PIA_RatingVotes~) <img src="~E-PIA_RatingScoreImg~" alt=""><br>
   Foto von ~E-PIA_UserName~ am ~E-PIA_CreateDate~<br>
   {E-PIA_Comment}Kommentar: ~E-PIA_Comment~<br>{/E-PIA_Comment}

   {!ST-LoggedIn}
      <p>Möchten Sie dieses Bild ebenfalls bewerten? Dann melden Sie sich bitte an.</p>
   {/!ST-LoggedIn}

   {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)~

         {E-PIA_RATING-OK}
            {E-PIA_InfoMsg}~E-PIA_InfoMsg~{/E-PIA_InfoMsg}
            Sie haben bewertet: <img src="~E-PIA_UserRatingScore~" alt=""><br>
         {/E-PIA_RATING-OK}

         {!E-PIA_RATING-OK}
            {!E-PIA_RATING-ALLOWED}
               <p>
                  Sie haben dieses Foto hochgeladen oder bereits bewertet.
                  Eine weitere Bewertung ist nicht möglich.
               </p>
            {/!E-PIA_RATING-ALLOWED}
         {/!E-PIA_RATING-OK}

         {E-PIA_RATING-ALLOWED}
            <p>Bitte geben Sie eine Bewertung ab:</p>

            <label><input type="radio" value="5" name="ws_actimg_rating"> 5 Sterne</label><br>
            <label><input type="radio" value="4" name="ws_actimg_rating"> 4 Sterne</label><br>
            <label><input type="radio" value="3" name="ws_actimg_rating"> 3 Sterne</label><br>
            <label><input type="radio" value="2" name="ws_actimg_rating"> 2 Sterne</label><br>
            <label><input type="radio" value="1" name="ws_actimg_rating"> 1 Stern</label><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}

{!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>
         Hochgeladen von ~E-PIA_UserName~ am ~E-PIA_CreateDate~<br>
         Bewertung: (~E-PIA_RatingVotes~) <img src="~E-PIA_RatingScoreImg~" alt=""><br>
         {E-PIA_Comment}Kommentar: ~E-PIA_Comment~<br>{/E-PIA_Comment}
      {/@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}

Verwenden Sie für die Bewertungssterne die Grafiken aus RatingImg-01 bis RatingImg-05. Fest eingetragene Pfade laufen auseinander, sobald jemand die Grafiken austauscht.

Tag	Liefert
`E-PIA_SHOW-SINGLE`	Klammerung für die Einzelansicht
`E-PIA_Action-Image`	das Bild in Normalgröße
`E-PIA_RATING-ALLOWED`	Klammerung, wenn dieser Käufer bewerten darf
`E-PIA_RATING-OK`	Klammerung, wenn gerade erfolgreich bewertet wurde
`E-PIA_UserRatingScore`	die Grafik zur eigenen Bewertung
`E-PIA_InfoMsg`	die Bestätigungsmeldung

Referenz: E-PIA_SHOW-SINGLE · E-PIA_Action-Image · E-PIA_RATING-ALLOWED · E-PIA_RATING-OK · E-PIA_UserRatingScore · E-PIA_InfoMsg

Schritt 9: Die drei Mail-Templates

Freigabe an den Käufer

Die Datei heißt so, wie Sie sie bei EmailForUser eingetragen haben.

<p>Guten Tag,</p>
<p>Ihr Bild zum Produkt <b>~PR-Name~</b> ist jetzt im Shop zu sehen.</p>

<p>
   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~{/E-PIA_Comment}
</p>

Upload-Benachrichtigung an Sie

Die Datei heißt so, wie Sie sie bei EmailForMerchant eingetragen haben. Ob und wohin sie geht, stellen Sie im Online-Servicebereich ein.

<p>Es wurde ein neues Bild hochgeladen.</p>

<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>
   Benutzername: ~E-PIA_UserName~<br>
   Benutzerindex: ~E-PIA_UserIndex~<br>
   IP-Adresse: ~E-PIA_UserIp~<br>
   {E-PIA_Comment}Kommentar: ~E-PIA_Comment~{/E-PIA_Comment}
</p>

Diese Mail enthält die IP-Adresse des Käufers und geht unverschlüsselt hinaus. Lassen Sie das Tag weg, wenn Sie die Adresse nicht für die Moderation brauchen, und stimmen Sie den Einsatz mit Ihrem Datenschutzbeauftragten ab.

Warnung bei knappem Speicherplatz

Die Datei heißt so, wie Sie sie bei EmailWarningDiscUsage eingetragen haben.

<p><b>Wichtige Speicherplatz-Meldung</b></p>
<p>Der für diese Funktion verfügbare Speicherplatz auf dem Server ist fast aufgebraucht.</p>

Nehmen Sie diese Mail ernst. Ist der Speicherplatz aufgebraucht, schlagen weitere Uploads fehl, und der Käufer sieht nur die allgemeine Meldung aus DiscUsageExceeded. Von außen sieht das aus wie ein defekter Shop.

Referenz: E-PIA_CreateDate · E-PIA_CreateTime · E-PIA_UserName · E-PIA_FileName · E-PIA_TechName · E-PIA_UserIndex · E-PIA_UserIp

​Funktionsweise

​Wer hochladen darf

​Freigabe und Benachrichtigung

​Anzeige und Bewertung

​Galerie und Kategorieebene

​Schritt 1: Die technische Einrichtung beauftragen

​Schritt 2: Die Konfigurationsabschnitte anlegen

​Templates und Bewertungsgrafiken

​Die Meldungen

​Bilder je Seite

​Die Freigabemail an den Käufer

​Die beiden Tag-Familien

​Schritt 3: Die Produktdetailansicht

​Schritt 4: Die drei Rahmen-Templates

​Upload

​Galerie

​Großansicht und Produktgalerie

​Schritt 5: Die JavaScript-Dateien einbinden

​Schritt 6: Das Upload-Template

​Schritt 7: Das Galerie-Template

​Die beliebtesten Bilder

​Schritt 8: Das Template der Großansicht

​Schritt 9: Die drei Mail-Templates

​Freigabe an den Käufer

​Upload-Benachrichtigung an Sie

​Warnung bei knappem Speicherplatz

​Verwandte Themen

Funktionsweise

Wer hochladen darf

Freigabe und Benachrichtigung

Anzeige und Bewertung

Galerie und Kategorieebene

Schritt 1: Die technische Einrichtung beauftragen

Schritt 2: Die Konfigurationsabschnitte anlegen

Templates und Bewertungsgrafiken

Die Meldungen

Bilder je Seite

Die Freigabemail an den Käufer

Die beiden Tag-Familien

Schritt 3: Die Produktdetailansicht

Schritt 4: Die drei Rahmen-Templates

Upload

Galerie

Großansicht und Produktgalerie

Schritt 5: Die JavaScript-Dateien einbinden

Schritt 6: Das Upload-Template

Schritt 7: Das Galerie-Template

Die beliebtesten Bilder

Schritt 8: Das Template der Großansicht

Schritt 9: Die drei Mail-Templates

Freigabe an den Käufer

Upload-Benachrichtigung an Sie

Warnung bei knappem Speicherplatz

Verwandte Themen