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

# Bewertungen beim Produkt anzeigen

> Bewertungszahl, Durchschnittsnote und Sternegrafik auf der Produktseite ausgeben, mit einfacher oder feiner abgestufter Grafikzuordnung.

Eine Durchschnittsnote von 4,6 aus 87 Bewertungen wirkt anders als dieselbe Note aus drei Bewertungen. Beides gehört deshalb auf die Produktseite: die Note und die Zahl der Stimmen.

Dazu kommt die Sternegrafik, die auf einen Blick erfasst wird, und die beiden Links zum Lesen und Schreiben von Bewertungen.

| Angabe | Tag |
| - | - |
| Zahl der abgegebenen Bewertungen | `PR-RatingVotes` |
| durchschnittliche Note | `PR-RatingScore` |
| Grafik zur Note | `PR-RatingScoreImg` |
| Link zum Lesen der Bewertungen | `PR-ReadRatingsLink` |
| Link zum Schreiben einer Bewertung | `PR-WriteRatingLink` |

## Die Anzeige einbauen

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-RatingVotes}
   Abgegebene Stimmen: ~PR-RatingVotes~<br>
   Durchschnittliche Note: ~PR-RatingScore~<br>
   <img src="~PR-RatingScoreImg~" alt=""><br>
   <a href="~PR-ReadRatingsLink~">Bewertungen lesen</a><br>
   <a href="~PR-WriteRatingLink~">Bewertung schreiben</a>
{/PR-RatingVotes}
```

Die Klammerung `{PR-RatingVotes}` greift nur, wenn mindestens eine Bewertung vorliegt. Bei einem noch unbewerteten Produkt bleibt der ganze Block leer, und es erscheinen weder Nullnote noch leere Sterne.

> [!WARNING]
>
> Das bedeutet auch, dass der Link zum Schreiben einer Bewertung in diesem Block verschwindet, solange es keine Bewertung gibt. Genau dann brauchen Sie ihn am dringendsten. Setzen Sie ihn deshalb zusätzlich in den Gegenzweig `{!PR-RatingVotes}` und werben Sie dort um die erste Bewertung.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{!PR-RatingVotes}
   Zu diesem Produkt gibt es noch keine Bewertung.<br>
   <a href="~PR-WriteRatingLink~">Schreiben Sie die erste</a>
{/!PR-RatingVotes}
```

Referenz: [PR-RatingVotes](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md) · [PR-RatingScore](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md) · [PR-RatingScoreImg](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md) · [PR-ReadRatingsLink](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md) · [PR-WriteRatingLink](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md)

## Die Grafiken zur Note

Für die Sternegrafik gibt es zwei Wege. Sie unterscheiden sich in der Feinheit der Abstufung.

| | einfach | fein abgestuft |
| - | - | - |
| Abschnitt | `<ProductRatingImages>` | `<AdvancedProductRatingImages>` |
| Tag | `PR-RatingScoreImg` | `PR-AdvRatingScoreImg` |
| Grafiken | zehn, eine je ganze Note | bis zu 50 Bereiche, frei gewählt |
| Geeignet für | ganze Sterne | halbe Sterne und Zwischenstufen |

### Eine Grafik je ganze Note

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ProductRatingImages>
   Point1  = rating_1.png
   Point2  = rating_2.png
   ...
   Point10 = rating_10.png
   back    = pfeil_zurueck.png
   next    = pfeil_weiter.png
</ProductRatingImages>
```

Die Skala des Moduls reicht von 1 bis 10 Punkten. Empfohlen ist trotzdem ein Fünf-Punkte-System, weil Käufer das von überall kennen. Sie bieten dann im Eingabeformular nur fünf Stufen an und hinterlegen entsprechend nur fünf Grafiken.

Referenz: [Abschnitt ProductRatingImages](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md#productratingimages)

### Grafiken für Wertebereiche

Eine Durchschnittsnote ist selten eine ganze Zahl. Mit `<AdvancedProductRatingImages>` ordnen Sie jedem Wertebereich eine eigene Grafik zu und können damit auch halbe Sterne darstellen.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<AdvancedProductRatingImages>

   # keine Sterne
   <+Entry>
      From-Value = 0.0
      To-Value   = 0.3
      Image      = ratingpoints_0_0.jpg
   </+Entry>

   # ein halber Stern
   <+Entry>
      From-Value = 0.3
      To-Value   = 0.7
      Image      = ratingpoints_0_5.jpg
   </+Entry>

   # ein ganzer Stern
   <+Entry>
      From-Value = 0.7
      To-Value   = 1.3
      Image      = ratingpoints_1_0.jpg
   </+Entry>

   ...

   # Auffangeintrag, muss ganz am Ende stehen
   <+Entry>
      From-Value = 0
      To-Value   = 99
      Image      = ratingpoints_fallback.jpg
   </+Entry>

</AdvancedProductRatingImages>
```

> [!WARNING]
>
> Es gilt der **erste** Eintrag, dessen Bereich die Note enthält, nicht der am besten passende. Der Auffangeintrag mit dem weiten Bereich gehört deshalb zwingend ans Ende der Liste. Steht er vorn, gewinnt er immer, und alle anderen Grafiken bleiben ungenutzt.

Aus demselben Grund sind überlappende Grenzen unproblematisch. Eine Note von genau `0.3` fällt in den ersten und in den zweiten Bereich, angezeigt wird die Grafik des ersten. Sie müssen die Grenzen also nicht lückenlos aneinanderlegen.

Legen Sie den Auffangeintrag immer an, auch wenn Sie die Skala scheinbar vollständig abgedeckt haben. Ohne ihn erscheint bei einer Note außerhalb aller Bereiche gar keine Grafik, und im Template steht dann ein Bild ohne Quelle.

Im Template tauschen Sie nur das Tag aus:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-RatingVotes}
   Durchschnittliche Note: ~PR-RatingScore~<br>
   <img src="~PR-AdvRatingScoreImg~" alt="">
{/PR-RatingVotes}
```

Innerhalb des Bewertungsmoduls selbst, also auf den Seiten zum Lesen und Schreiben, heißt das entsprechende Tag `PRODRATING-AdvScoreImage`.

Referenz: [Abschnitt AdvancedProductRatingImages](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md#advancedproductratingimages) · [PR-AdvRatingScoreImg](https://dokumentation.websale.de/v8s/referenz/tags/e-prodrating-ekomi.md#die-bewertungsgrafiken) · PRODRATING-AdvScoreImage

## Fehlerhafte Eingaben hervorheben

In den Formularen des Moduls können Sie Felder mit fehlerhaftem Inhalt kenntlich machen. Die folgenden Tags liefern `ok` oder `err`, je nachdem, ob die Eingabe in Ordnung war.

| Tag | Template |
| - | - |
| `PRODRATING-Nickname_error_flag` | Bewertung schreiben |
| `PRODRATING-Email_error_flag` | Bewertung schreiben |
| `PRODRATING-Rating_error_flag` | Bewertung schreiben |
| `PRODRATING-ChangeNick_Email_error_flag` | Spitzname ändern |
| `PRODRATING-ChangeNick_Oldnick_error_flag` | Spitzname ändern |
| `PRODRATING-ChangeNick_newnick_error_flag` | Spitzname ändern |
| `PRODRATING-ChangeNick_newnick2_error_flag` | Spitzname ändern |

Setzen Sie das Tag in einen Klassennamen ein, dann entsteht daraus `input_ok` oder `input_err`.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<tr class="input_~PRODRATING-Nickname_error_flag~">
   <td><label for="nickname">Nickname</label></td>
   <td>
      <input type="text" id="nickname"
             name="~A-NickName_input~"
             value="~A-NickName_value~">
   </td>
</tr>
```

```css theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
.input_ok  { background-color: #ffffff; }
.input_err { background-color: #ffffff; border: 1px solid #cc0000; }
```

Die Farbe allein sollte den Fehler nicht tragen. Wer Farben schlecht unterscheidet, sieht sonst nur ein Formular, das sich nicht abschicken lässt. Geben Sie zusätzlich die Fehlermeldung als Text aus, dafür sind `PRODRATING-InputError` und `PRODRATING-InputErrorList` da.

Referenz: Styles für Produktbewertung · [Tags für das Produktbewertungs-Modul](https://dokumentation.websale.de/v8s/websale-produktbewertung/beschreibung-des-produktbewertungs-moduls.md)

## Verwandte Themen

* Wegweiser: [Beschreibung des Produktbewertungs-Moduls](https://dokumentation.websale.de/v8s/websale-produktbewertung/beschreibung-des-produktbewertungs-moduls.md)
* Wegweiser: [Produktbewertungs-Modul konfigurieren](https://dokumentation.websale.de/v8s/websale-produktbewertung/produktbewertungs-modul-konfigurieren.md)
* Wegweiser: [Bewertungserinnerungen per E-Mail versenden](https://dokumentation.websale.de/v8s/websale-produktbewertung/bewertungserinnerungen-per-e-mail-versenden.md)
* Wegweiser: [Produkte nach Bewertung sortieren und filtern](https://dokumentation.websale.de/v8s/websale-produktbewertung/produkte-nach-bewertung-sortieren-und-filtern.md)


## Related topics

- [Bewertungen subshopübergreifend verwenden](https://dokumentation.websale.de/v8s/websale-produktbewertung/bewertungen-subshopuebergreifend-verwenden.md)
- [Beschreibung des Produktbewertungs-Moduls](https://dokumentation.websale.de/v8s/websale-produktbewertung/beschreibung-des-produktbewertungs-moduls.md)
- [Produkte aus dem Produktbewertungs-Modul ausschließen](https://dokumentation.websale.de/v8s/websale-produktbewertung/produkte-aus-dem-produktbewertungs-modul-ausschliessen.md)
- [Materialien Produktbewertung](https://dokumentation.websale.de/v8s/materialien/materialien-produktbewertung.md)
- [Produkte nach Bewertung sortieren und filtern](https://dokumentation.websale.de/v8s/websale-produktbewertung/produkte-nach-bewertung-sortieren-und-filtern.md)


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