> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# ProductsInAction-Modul

> Käufer laden eigene Fotos zu Ihren Produkten hoch, andere bewerten sie, und aus den Bildern entsteht eine Galerie, aus der heraus bestellt werden kann.

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

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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 |

> [!WARNING]
>
> 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](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md#productsinaction)

### Die Meldungen

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md#productsinaction-txt)

### Bilder je Seite

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ProductsInAction-MaxProducts>
   +Option = 12
   +Option = 24
   +Option = 48
   Default = 24
</ProductsInAction-MaxProducts>
```

> [!WARNING]
>
> 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](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md#productsinaction-maxproducts)

### Die Freigabemail an den Käufer

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md#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 |

> [!WARNING]
>
> 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{!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 |

> [!WARNING]
>
> 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)](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md#die-beiden-einstiege) · [PIA-RandomData](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md#die-beiden-einstiege) · [PIA-Thumbnail](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md#die-bilder) · [PIA-Image](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md#die-bilder) · [PIA-UploaderName](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md#die-tags-im-uberblick) · [PIA-Date](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md#die-tags-im-uberblick) · [PIA-Time](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md#die-tags-im-uberblick) · [PIA-ProdIndex](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md#die-tags-im-uberblick) · [PIA-RatingScore](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md#bewertungen) · [PIA-RatingVotes](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md#bewertungen) · [PIA-TechName](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md#die-tags-im-uberblick) · [PIA-PRLink](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md#die-tags-im-uberblick)

## 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`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-Data}~WS-ExternInclude($PR-ActionImagesUploadLink$)~{/PR-Data}
```

### Galerie

`ws_actionimage_gallery.htm`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~WS-ExternInclude($WS-ActionImagesShowLink$)~
```

### Großansicht und Produktgalerie

`ws_actionimage_picture.htm`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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](https://dokumentation.websale.de/v8s/referenz/tags/pr/bilder-und-links.md#die-tags-im-uberblick) · [WS-ActionImagesShowLink](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md#die-tags-im-uberblick) · [WS-ActionImagesShowSpecificLink](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md#productsinaction)

## Schritt 5: Die JavaScript-Dateien einbinden

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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>
```

> [!WARNING]
>
> 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](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)

## Schritt 6: Das Upload-Template

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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}
```

> [!WARNING]
>
> 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](https://dokumentation.websale.de/v8s/referenz/tags/ws/includes-templates-css-und-js.md) · [E-PIA\_UploadLink](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/upload.md#die-tags-im-uberblick) · [E-PIA\_HiddenTags(X)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/galerie.md) · [E-PIA\_UPLOAD-ALLOWED](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/upload.md#die-tags-im-uberblick) · [E-PIA\_AJAX](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/upload.md#die-tags-im-uberblick) · [E-PIA\_ErrorMsg](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/upload.md#die-tags-im-uberblick) · [E-PIA\_UserNameList](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/upload.md#die-tags-im-uberblick) · [E-PIA\_FileInput](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/upload.md#die-tags-im-uberblick) · [E-PIA\_CommentTextarea](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/upload.md#die-tags-im-uberblick) · [E-PIA\_FileFormatList](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/upload.md#die-tags-im-uberblick)

## Schritt 7: Das Galerie-Template

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/galerie.md#die-tags-im-uberblick) · E-PIA\_SortList · E-PIA\_MaxProductsList · [E-PIA\_DATA](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/galerie.md#die-tags-im-uberblick) · [E-PIA\_AdvData](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/galerie.md#die-tags-im-uberblick) · [E-PIA\_TechName](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/bilddaten.md#die-tags-im-uberblick) · E-PIA\_Action-Thumbnail · [E-PIA\_UserName](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/bilddaten.md#die-tags-im-uberblick) · [E-PIA\_CreateDate](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/bilddaten.md#die-tags-im-uberblick) · E-PIA\_RatingVotes · [E-PIA\_RatingScoreImg](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/einzelansicht-und-bewertung.md#die-tags-im-uberblick) · E-PIA\_Comment · E-PIA\_PR-ProdIndex · E-PIA\_Page · E-PIA\_ListPagingBack · E-PIA\_ListPagingNext · E-PIA\_ListPagingBefore(X) · [E-PIA\_ListPagingAfter(X)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/galerie.md#die-blatterfunktion) · 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/einzelansicht-und-bewertung.md#die-tags-im-uberblick) · [E-PIA\_Action-Image](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/bilddaten.md#die-tags-im-uberblick) · [E-PIA\_RATING-ALLOWED](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/einzelansicht-und-bewertung.md#die-tags-im-uberblick) · [E-PIA\_RATING-OK](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/einzelansicht-und-bewertung.md#die-tags-im-uberblick) · [E-PIA\_UserRatingScore](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/einzelansicht-und-bewertung.md#die-tags-im-uberblick) · [E-PIA\_InfoMsg](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/upload.md#die-tags-im-uberblick)

## Schritt 9: Die drei Mail-Templates

### Freigabe an den Käufer

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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>
```

> [!WARNING]
>
> 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<p><b>Wichtige Speicherplatz-Meldung</b></p>
<p>Der für diese Funktion verfügbare Speicherplatz auf dem Server ist fast aufgebraucht.</p>
```

> [!WARNING]
>
> 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](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/bilddaten.md#die-tags-im-uberblick) · E-PIA\_UserName · [E-PIA\_FileName](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/bilddaten.md#die-tags-im-uberblick) · E-PIA\_TechName · [E-PIA\_UserIndex](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/bilddaten.md#die-tags-im-uberblick) · [E-PIA\_UserIp](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/bilddaten.md#die-tags-im-uberblick)

## Verwandte Themen

* Wegweiser: [Produktbewertungen](https://dokumentation.websale.de/v8s/marketing-funktionen/trusted-shops.md#produktbewertungen)
* Wegweiser: [Kundenkonto](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/kundenkonto.md)
* Wegweiser: [Externe Includes](https://dokumentation.websale.de/v8s/externe-dienste/externe-inhalte-einbinden.md)


## Related topics

- [Spezielle Online-Dienste](https://dokumentation.websale.de/v8s/online-servicebereich/spezielle-online-dienste.md)
- [Beschreibung des Produktbewertungs-Moduls](https://dokumentation.websale.de/v8s/websale-produktbewertung/beschreibung-des-produktbewertungs-moduls.md)
- [PIA- (ProductsInAction)](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md)
- [Produkte, Katalog und Suche](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md)
- [Merkzettel, Vergleich, Upload und externe Dienste](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.