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

# E-PIA_ (Single view and rating)

> Display a single customer photo in large format and let it be rated: single view, rating form, average rating as a number and as a graphic.

If a visitor clicks a preview image in the gallery, they reach the single view. It shows the image in normal size, along with the details about the submitter and the form other customers use to rate the image.

The same template also shows all images of a product. Which of the two views appears is determined by the call: with `techname` the single view, with `pi` the product gallery. The template is entered in the shop configuration `shop.config` in the `<ProductsInAction>` section for the `Product` parameter.

Guide: Offering ProductsInAction

## Separating the two views

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{E-PIA_SHOW-SINGLE}
   <!-- ein einzelnes Bild groß, mit Bewertungsformular -->
{/E-PIA_SHOW-SINGLE}

{!E-PIA_SHOW-SINGLE}
   {E-PIA_DATA}
      {@E-PIA_DATA}
         <!-- alle Bilder dieses Produktes als Vorschaubilder -->
      {/@E-PIA_DATA}
   {/E-PIA_DATA}
{/!E-PIA_SHOW-SINGLE}
```

> [!NOTE]
>
> Both branches belong in the same template. This saves a separate page for the product gallery and keeps design and navigation in one place.

> [!WARNING]
>
> `E-PIA_SHOW-SINGLE` only applies if the call includes a valid technical identifier. With an unknown identifier, ProductsInAction silently falls back to the product gallery, provided a product index is present. If that is missing too, the page remains empty.

## The image and its details

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{E-PIA_SHOW-SINGLE}
   <img src="~E-PIA_Action-Image~" alt="">

   <p>Foto von ~E-PIA_Username~, eingesendet am ~E-PIA_CreateDate~</p>
   {E-PIA_Comment}<p class="bildkommentar">~E-PIA_Comment~</p>{/E-PIA_Comment}

   <p>
      (~E-PIA_RatingVotes~ Bewertungen)
      <img src="~E-PIA_RatingScoreImg~" alt="Durchschnitt ~E-PIA_RatingScore~ von 5">
   </p>
{/E-PIA_SHOW-SINGLE}
```

The tags for submitter, date, comment and product are on a separate page: Reference: E-PIA\_ (Image data)

### Displaying the rating

| Tag | Returns |
| - | - |
| `E-PIA_RatingVotes` | the number of ratings submitted |
| `E-PIA_RatingScore` | the average rating as a number |
| `E-PIA_RatingScoreImg` | the address of the matching rating graphic |
| `E-PIA_UserRatingScore` | the address of the graphic for the rating just submitted |

You specify the graphics themselves in the shop configuration `shop.config` in the `<ProductsInAction>` section with the parameters `RatingImg-00` to `RatingImg-05`. They must be located in the `benutzer/templates` directory.

> [!NOTE]
>
> `E-PIA_RatingScoreImg` rounds for you. Up to 1.5, the tag chooses `RatingImg-01`, up to 2.5 the two, and so on; an image that has not yet been rated gets `RatingImg-00`. So you do not need a case distinction based on the rating in the template.

> [!NOTE]
>
> With a parameter, `E-PIA_RatingScoreImg()` outputs one specific graphic of the six, regardless of the image's rating. `~E-PIA_RatingScoreImg(5)~` always returns the graphic for five points, for example for labeling the selection buttons in the rating form.

`E-PIA_RatingScore` can also be used as a range tag to react to a specific rating. The range applies if the average rating lies within half a point of the value.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{E-PIA_RatingScore(5)}
   <p class="auszeichnung">Ein Spitzenfoto unserer Kunden.</p>
{/E-PIA_RatingScore(5)}
```

> [!WARNING]
>
> `E-PIA_RatingScore` has no negative range. `{!E-PIA_RatingScore(5)}` has no effect and then remains unresolved on the page. Instead, check positively for the ratings you want to highlight.

> [!WARNING]
>
> `E-PIA_RatingVotes` is purely a single tag. There is no `{E-PIA_RatingVotes}` range for the "already rated" case. Use `{E-PIA_RatingScore}` without a parameter instead; it applies as soon as a rating exists.

## The rating form

`E-PIA_RATING-ALLOWED` only applies if all three conditions are met.

* The visitor is logged in to the shop.
* They did not upload the image themselves.
* They have not yet rated this image.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{E-PIA_SHOW-SINGLE}

   {!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}
            <p>~E-PIA_InfoMsg~</p>
            <p>Ihre Bewertung: <img src="~E-PIA_UserRatingScore~" alt=""></p>
         {/E-PIA_RATING-OK}

         {E-PIA_RATING-ALLOWED}
            <fieldset>
               <legend>Bewerten Sie dieses Bild</legend>
               <label><input type="radio" name="ws_actimg_rating" value="5"> 5 Sterne</label>
               <label><input type="radio" name="ws_actimg_rating" value="4"> 4 Sterne</label>
               <label><input type="radio" name="ws_actimg_rating" value="3"> 3 Sterne</label>
               <label><input type="radio" name="ws_actimg_rating" value="2"> 2 Sterne</label>
               <label><input type="radio" name="ws_actimg_rating" value="1"> 1 Stern</label>
               <button type="submit">Jetzt bewerten</button>
            </fieldset>
         {/E-PIA_RATING-ALLOWED}

         {!E-PIA_RATING-ALLOWED}
            {!E-PIA_RATING-OK}
               {E-PIA_IS-OWNER}
                  <p>Das ist Ihr eigenes Foto. Vielen Dank, dass Sie es eingesendet haben.</p>
               {/E-PIA_IS-OWNER}
               {!E-PIA_IS-OWNER}
                  <p>Sie haben dieses Bild bereits bewertet.</p>
               {/!E-PIA_IS-OWNER}
            {/!E-PIA_RATING-OK}
         {/!E-PIA_RATING-ALLOWED}
      </form>
   {/ST-LoggedIn}

{/E-PIA_SHOW-SINGLE}
```

| Tag | Applies if |
| - | - |
| `E-PIA_RATING-ALLOWED` | the visitor is allowed to rate this image |
| `E-PIA_RATING-OK` | they have just submitted a rating |
| `E-PIA_IS-OWNER` | the image was submitted by them |

> [!WARNING]
>
> Without `E-PIA_HiddenTags(rating)` in the form, the rating fails. The tag sets the session key without which ProductsInAction rejects the submission with the message `LimitExceeded`.

> [!NOTE]
>
> `E-PIA_IS-OWNER` separates the two reasons why `E-PIA_RATING-ALLOWED` does not apply. Without this distinction, the submitter of their own photo would be told they had already rated it, which would understandably confuse them.

> [!WARNING]
>
> Ratings from 1 to 5 are permitted. A missing value or a value outside this range leads to the messages `NoRating` or `RatingOutOfRange` from the `<ProductsInAction-Txt>` section, and the rating is not saved.

> [!NOTE]
>
> The login check is handled by `ST-LoggedIn`, not by ProductsInAction. `E-PIA_RATING-ALLOWED` does not apply for a visitor who is not logged in either, but it cannot tell why. Only the `ST-LoggedIn` range allows you to show the login notice.

Reference: ST-LoggedIn

## Errors and notices

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{E-PIA_ErrorMsg}
   <p class="fehler">~E-PIA_ErrorMsg~</p>
{/E-PIA_ErrorMsg}
```

> [!NOTE]
>
> `E-PIA_ErrorMsg` and `E-PIA_InfoMsg` apply in all three ProductsInAction templates and are range tags and single tags at the same time. The range ensures that the frame only appears if there really is something to report.

## The tags at a glance

| Tag | Single tag | Range tag | Negative range tag | Loop tag |
| - | - | - | - | - |
| `E-PIA_SHOW-SINGLE` | – | yes | yes | – |
| `E-PIA_RATING-ALLOWED` | – | yes | yes | – |
| `E-PIA_RATING-OK` | – | yes | yes | – |
| `E-PIA_IS-OWNER` | – | yes | yes | – |
| `E-PIA_RatingScore()` | yes | yes | – | – |
| `E-PIA_RatingScoreImg()` | yes | – | – | – |
| `E-PIA_RatingVotes` | yes | – | – | – |
| `E-PIA_UserRatingScore` | yes | – | – | – |

All tags on this page are permitted in the ProductsInAction detail view template. `E-PIA_RatingScore()`, `E-PIA_RatingScoreImg()` and `E-PIA_RatingVotes` also apply in the gallery template.

## Related topics

* Guide: Offering ProductsInAction
* Reference: ProductsInAction section
* Reference: E-PIA\_ (Image data)
* Reference: E-PIA\_ (Gallery)
* Reference: E-PIA\_ (Upload)


## Related topics

- [E-PIA_ (Gallery)](https://dokumentation.websale.de/en/v8s/referenz/tags/e-pia/galerie.md)
- [E-PIA_ (Upload)](https://dokumentation.websale.de/en/v8s/referenz/tags/e-pia/upload.md)
- [E-PIA_ (Image data)](https://dokumentation.websale.de/en/v8s/referenz/tags/e-pia/bilddaten.md)
- [PIA- (ProductsInAction)](https://dokumentation.websale.de/en/v8s/referenz/tags/pia-productsinaction.md)
- [$wsProductRating - Product ratings](https://dokumentation.websale.de/en/frontend/referenz/module/wsproductrating.md)


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