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

# Materialien eKomi Produktbewertung

> Vollständige Beispiele für die eKomi-Produktbewertung: Bewertungstemplate mit und ohne AJAX, AJAX-Template, JavaScript-Rückmeldefunktionen und CSS für die Bewertungsbalken.

Die eKomi-Produktbewertung zeigt auf der Produktseite die Sternebewertungen und die Kundenkommentare zu einem Artikel. Diese Seite enthält die vollständigen Beispieldateien dafür: das Bewertungstemplate in zwei Varianten, das AJAX-Template, die JavaScript-Rückmeldefunktionen und das CSS für die Bewertungsbalken.

Alle Beschriftungen in den Beispielen sind Beispieltexte. Ersetzen Sie sie durch Ihre eigenen oder durch Textplatzhalter aus der `shop.config`.

Wegweiser: [eKomi Produktbewertung](https://dokumentation.websale.de/v8s/interaktive-funktionen/ekomi-produktbewertung.md) · Referenz: [E-PRODRATING-EKOMI-Tags](https://dokumentation.websale.de/v8s/referenz/tags/e-prodrating-ekomi.md)

## Die Dateien im Überblick

| Datei | Aufgabe | Nur bei AJAX |
| - | - | - |
| `incl_prodrating_ekomi.htm` | das eigentliche Bewertungstemplate, in zwei Varianten | nein |
| `ws_ajax_eKomi.htm` | liefert den Bewertungsblock als AJAX-Fragment | ja |
| `ws_design.js` | die vier Rückmeldefunktionen für den AJAX-Aufruf | ja |
| `styles.css` | die Gestaltung der Bewertungsbalken | nein |

## Mit oder ohne AJAX

Beide Varianten zeigen dasselbe an. Der Unterschied liegt allein darin, was beim Blättern und beim Filtern nach "X Sterne" passiert.

| | ohne AJAX | mit AJAX |
| - | - | - |
| Blättern und Filtern | normale Links mit `href` | `onclick` mit `ws_AJAXloadTemplate` und `return false` |
| Seite wird neu geladen | ja | nein, nur der Bewertungsblock |
| zusätzliche Dateien | keine | `ws_ajax_eKomi.htm` und `ws_design.js` |

Wählen Sie eine Variante und bleiben Sie dabei. Eine Mischung aus beidem führt dazu, dass ein Teil der Links die Seite neu lädt und der andere nicht.

## Das Bewertungstemplate

Beide Fassungen gehören in dieselbe Datei `incl_prodrating_ekomi.htm`. Übernehmen Sie nur eine davon.

> [accordion] incl\_prodrating\_ekomi.htm, ohne AJAX
>
> ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
> {E-WS-TplComment}<!-- Einstellung, wie viele Bewertungen auf einer Seite angezeigt werden sollen -->{/E-WS-TplComment}
> ~E-PRODRATING-EKOMI_Count(15)~
>
> <h1>Artikelbewertung zum Artikel ~PR-Name~</h1>
>
> {E-WS-TplComment}<!-- Anzeige der Gesamtbewertungen und der Grafik-Balken -->{/E-WS-TplComment}
> {@E-PRODRATING-EKOMI_Ratings}
>    <div class="rating_ekomi_graphic_line rating_ekomi_graphic_line_~E-PRODRATING-EKOMI_RatingVotes~">
>       <a {E-PRODRATING-EKOMI_RatingVotes}href="~PR-Link~&~E-PRODRATING-EKOMI_RatingFilterParam~"{/E-PRODRATING-EKOMI_RatingVotes}>
>          ~E-PRODRATING-EKOMI_Rating~ Sterne
>       </a>
>       <div class="rating_ekomi_graphic_line_complete">
>          <div class="rating_ekomi_graphic_line_filler" style="width: ~E-PRODRATING-EKOMI_RatingPercentage~%"></div>
>       </div>
>       <a {E-PRODRATING-EKOMI_RatingVotes}href="~PR-Link~&~E-PRODRATING-EKOMI_RatingFilterParam~"{/E-PRODRATING-EKOMI_RatingVotes}>
>          (~E-PRODRATING-EKOMI_RatingVotes~)
>       </a>
>    </div>
> {/@E-PRODRATING-EKOMI_Ratings}
>
> <hr>
>
> Gesamtbewertung: <img src="~E-PRODRATING-EKOMI_ScoreImg~"> ~E-PRODRATING-EKOMI_Score~<br>
> Anzahl der Bewertungen: ~E-PRODRATING-EKOMI_Votes~ Bewertungen<br>
> ~E-PRODRATING-EKOMI_PositivePercentage~% der ~E-PRODRATING-EKOMI_Votes~ abgegebenen Bewertungen waren positiv.<br>
>
> <hr>
>
> {E-WS-TplComment}<!-- Blätterfunktion -->{/E-WS-TplComment}
> {E-PRODRATING-EKOMI_Paging}
>    {E-PRODRATING-EKOMI_PagingBack}
>       <a href="~PR-Link~&~E-PRODRATING-EKOMI_PagingParam~"> &lt;&lt; </a>
>    {/E-PRODRATING-EKOMI_PagingBack}
>
>    {E-PRODRATING-EKOMI_PagingMoreBefore(2)}
>       {E-PRODRATING-EKOMI_PagingFirst}
>          <a href="~PR-Link~&~E-PRODRATING-EKOMI_PagingParam~">~E-PRODRATING-EKOMI_Page~</a>
>       {/E-PRODRATING-EKOMI_PagingFirst}
>    {/E-PRODRATING-EKOMI_PagingMoreBefore(2)}
>
>    {E-PRODRATING-EKOMI_PagingMoreBefore(3)}
>       ...
>    {/E-PRODRATING-EKOMI_PagingMoreBefore(3)}
>
>    {@E-PRODRATING-EKOMI_PagingBefore(2)}
>       <a href="~PR-Link~&~E-PRODRATING-EKOMI_PagingParam~">~E-PRODRATING-EKOMI_Page~</a>
>    {/@E-PRODRATING-EKOMI_PagingBefore(2)}
>
>    ~E-PRODRATING-EKOMI_Page~
>
>    {@E-PRODRATING-EKOMI_PagingAfter(2)}
>       <a href="~PR-Link~&~E-PRODRATING-EKOMI_PagingParam~">~E-PRODRATING-EKOMI_Page~</a>
>    {/@E-PRODRATING-EKOMI_PagingAfter(2)}
>
>    {E-PRODRATING-EKOMI_PagingMoreAfter(3)}
>       ...
>    {/E-PRODRATING-EKOMI_PagingMoreAfter(3)}
>
>    {E-PRODRATING-EKOMI_PagingMoreAfter(2)}
>       {E-PRODRATING-EKOMI_PagingLast}
>          <a href="~PR-Link~&~E-PRODRATING-EKOMI_PagingParam~">~E-PRODRATING-EKOMI_Page~</a>
>       {/E-PRODRATING-EKOMI_PagingLast}
>    {/E-PRODRATING-EKOMI_PagingMoreAfter(2)}
>
>    {E-PRODRATING-EKOMI_PagingNext}
>       <a href="~PR-Link~&~E-PRODRATING-EKOMI_PagingParam~"> &gt;&gt; </a>
>    {/E-PRODRATING-EKOMI_PagingNext}
>
>    <hr>
> {/E-PRODRATING-EKOMI_Paging}
>
> {E-WS-TplComment}<!-- Anzeige der Bewertungen -->{/E-WS-TplComment}
> {E-PRODRATING-EKOMI_FeedbackData}
>
>    {E-PRODRATING-EKOMI_ActiveFilter}
>       <p>~E-PRODRATING-EKOMI_RatingVotes(~E-PRODRATING-EKOMI_ActiveFilter~)~ Bewertungen mit ~E-PRODRATING-EKOMI_ActiveFilter~ Sternen</p>
>       <a href="~PR-Link~">Alle Bewertungen anzeigen</a>
>       <hr>
>    {/E-PRODRATING-EKOMI_ActiveFilter}
>
>    {@E-PRODRATING-EKOMI_FeedbackData}
>       <img src="~E-PRODRATING-EKOMI_FeedbackData_RatingImage~">
>       <h3>~E-PRODRATING-EKOMI_FeedbackData_Timestamp_day~.~E-PRODRATING-EKOMI_FeedbackData_Timestamp_month~.~E-PRODRATING-EKOMI_FeedbackData_Timestamp_year~
>          (bestätigter Kauf)</h3>
>       <p>~E-PRODRATING-EKOMI_FeedbackData_Feedback~</p>
>
>       {E-PRODRATING-EKOMI_FeedbackData_Merchant_Answer}
>          <div class="infobox">~E-PRODRATING-EKOMI_FeedbackData_Merchant_Answer~</div>
>       {/E-PRODRATING-EKOMI_FeedbackData_Merchant_Answer}
>    {/@E-PRODRATING-EKOMI_FeedbackData}
>
> {/E-PRODRATING-EKOMI_FeedbackData}
> ```

> [accordion] incl\_prodrating\_ekomi.htm, mit AJAX
>
> ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
> {E-WS-TplComment}<!-- Einstellung, wie viele Bewertungen auf einer Seite angezeigt werden sollen -->{/E-WS-TplComment}
> ~E-PRODRATING-EKOMI_Count(10)~
>
> <h1>Artikelbewertung zum Artikel ~PR-Name~</h1>
> <h2>~E-PRODRATING-EKOMI_Votes~ Bewertungen</h2>
> <p><img src="~E-PRODRATING-EKOMI_ScoreImg~"> ~E-PRODRATING-EKOMI_Score~</p>
> <p>~E-PRODRATING-EKOMI_PositiveVotes~ von ~E-PRODRATING-EKOMI_Votes~ Kunden würden diesen Artikel empfehlen</p>
>
> {@E-PRODRATING-EKOMI_Ratings}
>    <div class="rating_ekomi_graphic_line rating_ekomi_graphic_line_~E-PRODRATING-EKOMI_RatingVotes~">
>       <a {E-PRODRATING-EKOMI_RatingVotes}
>             onclick="ws_AJAXloadTemplate('~PR-Link~&tpl=ws_ajax_eKomi.htm&~E-PRODRATING-EKOMI_RatingFilterParam~',
>             '~WS-CharSet~', ws_AJAXloadRatingEkomiStart, wsAJAXloadRatingEkomiError, 'ws_AJAXloadRatingEkomiResponseSuccess()',
>             'wsAJAXloadRatingEkomiResponseError()'); return false;"
>          {/E-PRODRATING-EKOMI_RatingVotes}>
>          ~E-PRODRATING-EKOMI_Rating~ Sterne
>       </a>
>       <div class="rating_ekomi_graphic_line_complete">
>          <div class="rating_ekomi_graphic_line_filler" style="width: ~E-PRODRATING-EKOMI_RatingPercentage~%"></div>
>          {E-PRODRATING-EKOMI_RatingVotes}
>             <p class="rating_ekomi_graphic_score">
>                ~E-PRODRATING-EKOMI_RatingVotes~ Stimmen
>             </p>
>          {/E-PRODRATING-EKOMI_RatingVotes}
>       </div>
>       <div class="clear"></div>
>    </div>
> {/@E-PRODRATING-EKOMI_Ratings}
>
> <hr>
>
> {E-PRODRATING-EKOMI_FeedbackData}
>
>    {E-PRODRATING-EKOMI_ActiveFilter}
>       <p>~E-PRODRATING-EKOMI_RatingVotes(~E-PRODRATING-EKOMI_ActiveFilter~)~ Bewertungen mit ~E-PRODRATING-EKOMI_ActiveFilter~ Sternen</p>
>       <a onclick="ws_AJAXloadTemplate('~PR-Link~&tpl=ws_ajax_eKomi.htm', '~WS-CharSet~', ws_AJAXloadRatingEkomiStart, wsAJAXloadRatingEkomiError,
>          'ws_AJAXloadRatingEkomiResponseSuccess()', 'wsAJAXloadRatingEkomiResponseError()'); return false;">
>          Alle Bewertungen anzeigen
>       </a>
>    {/E-PRODRATING-EKOMI_ActiveFilter}
>
>    {@E-PRODRATING-EKOMI_FeedbackData}
>       <img src="~E-PRODRATING-EKOMI_FeedbackData_RatingImage~">
>       <h3>~E-PRODRATING-EKOMI_FeedbackData_Timestamp_day~.~E-PRODRATING-EKOMI_FeedbackData_Timestamp_month~.~E-PRODRATING-EKOMI_FeedbackData_Timestamp_year~
>       (bestätigter Kauf)</h3>
>       <p>~E-PRODRATING-EKOMI_FeedbackData_Feedback~</p>
>
>       {E-PRODRATING-EKOMI_FeedbackData_Merchant_Answer}
>          <div class="infobox">~E-PRODRATING-EKOMI_FeedbackData_Merchant_Answer~</div>
>       {/E-PRODRATING-EKOMI_FeedbackData_Merchant_Answer}
>    {/@E-PRODRATING-EKOMI_FeedbackData}
>
>    {E-WS-TplComment}<!-- Blättern mit AJAX-Aufruf -->{/E-WS-TplComment}
>    {E-PRODRATING-EKOMI_Paging}
>       {E-PRODRATING-EKOMI_PagingMoreBefore(2)}
>          {E-PRODRATING-EKOMI_PagingFirst}
>             <a onclick="ws_AJAXloadTemplate('~PR-Link~&tpl=ws_ajax_eKomi.htm&~E-PRODRATING-EKOMI_PagingParam~', '~WS-CharSet~', ws_AJAXloadRatingEkomiStart,
>                wsAJAXloadRatingEkomiError, 'ws_AJAXloadRatingEkomiResponseSuccess()', 'wsAJAXloadRatingEkomiResponseError()'); return false;">
>                ~E-PRODRATING-EKOMI_Page~
>             </a>
>          {/E-PRODRATING-EKOMI_PagingFirst}
>       {/E-PRODRATING-EKOMI_PagingMoreBefore(2)}
>
>       {E-PRODRATING-EKOMI_PagingMoreBefore(3)}
>          <div class="rating_paging_placeholder">...</div>
>       {/E-PRODRATING-EKOMI_PagingMoreBefore(3)}
>
>       {@E-PRODRATING-EKOMI_PagingBefore(2)}
>          <a onclick="ws_AJAXloadTemplate('~PR-Link~&tpl=ws_ajax_eKomi.htm&~E-PRODRATING-EKOMI_PagingParam~', '~WS-CharSet~', ws_AJAXloadRatingEkomiStart,
>             wsAJAXloadRatingEkomiError, 'ws_AJAXloadRatingEkomiResponseSuccess()', 'wsAJAXloadRatingEkomiResponseError()'); return false;">
>             ~E-PRODRATING-EKOMI_Page~
>          </a>
>       {/@E-PRODRATING-EKOMI_PagingBefore(2)}
>
>       <div class="rating_paging_actualpage">~E-PRODRATING-EKOMI_Page~</div>
>
>       {@E-PRODRATING-EKOMI_PagingAfter(2)}
>          <a onclick="ws_AJAXloadTemplate('~PR-Link~&tpl=ws_ajax_eKomi.htm&~E-PRODRATING-EKOMI_PagingParam~', '~WS-CharSet~', ws_AJAXloadRatingEkomiStart,
>             wsAJAXloadRatingEkomiError, 'ws_AJAXloadRatingEkomiResponseSuccess()', 'wsAJAXloadRatingEkomiResponseError()'); return false;">
>             ~E-PRODRATING-EKOMI_Page~
>          </a>
>       {/@E-PRODRATING-EKOMI_PagingAfter(2)}
>
>       {E-PRODRATING-EKOMI_PagingMoreAfter(3)}
>          <div class="rating_paging_placeholder">...</div>
>       {/E-PRODRATING-EKOMI_PagingMoreAfter(3)}
>
>       {E-PRODRATING-EKOMI_PagingMoreAfter(2)}
>          {E-PRODRATING-EKOMI_PagingLast}
>             <a onclick="ws_AJAXloadTemplate('~PR-Link~&tpl=ws_ajax_eKomi.htm&~E-PRODRATING-EKOMI_PagingParam~', '~WS-CharSet~', ws_AJAXloadRatingEkomiStart,
>                wsAJAXloadRatingEkomiError, 'ws_AJAXloadRatingEkomiResponseSuccess()', 'wsAJAXloadRatingEkomiResponseError()'); return false;">
>                ~E-PRODRATING-EKOMI_Page~
>             </a>
>          {/E-PRODRATING-EKOMI_PagingLast}
>       {/E-PRODRATING-EKOMI_PagingMoreAfter(2)}
>    {/E-PRODRATING-EKOMI_Paging}
>
> {/E-PRODRATING-EKOMI_FeedbackData}
> ```

> [!WARNING]
>
> `~E-PRODRATING-EKOMI_Count(n)~` ist nicht nur eine Anzeigeeinstellung. Dieses Tag lädt die Bewertungen und richtet das Blättern ein. Steht es nicht oder steht es zu weit unten, bleiben alle Blöcke darunter leer.
>
> Setzen Sie es deshalb als erstes Tag ganz an den Anfang des Templates.

Da der zweite Aufruf den ersten überschreibt, stünden effektiv 10 Bewertungen je Seite. Hier auf einen Aufruf gekürzt.

### Was die beiden Fassungen sonst noch unterscheidet

Über die Links hinaus zeigt die AJAX-Fassung einige Dinge anders. Das ist keine Vorgabe, sondern Geschmackssache, und Sie können beides beliebig mischen.

* Die AJAX-Fassung nennt die Gesamtzahl schon in der Überschrift und schreibt die Stimmenzahl in den Balken statt daneben.
* Die Fassung ohne AJAX zeigt `~E-PRODRATING-EKOMI_PositivePercentage~` als Prozentwert, die AJAX-Fassung `~E-PRODRATING-EKOMI_PositiveVotes~` als absolute Zahl.
* Die Blätterleiste steht ohne AJAX **über** den Bewertungen und außerhalb von `{E-PRODRATING-EKOMI_FeedbackData}`, mit AJAX **unter** den Bewertungen und innerhalb dieser Klammerung. Innerhalb bedeutet: ohne Bewertungen gibt es auch keine Blätterleiste. Das ist die sinnvollere Variante.
* Nur die Fassung ohne AJAX hat Pfeile für eine Seite vor und zurück, über `PagingBack` und `PagingNext`.

## Das AJAX-Template

`ws_ajax_eKomi.htm` ist kurz. Es liefert nur den Bewertungsblock, ohne das übrige Seitengerüst.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-Ajax}
  <WS-Ajax-product_rating_ekomi>
           ~WS-Module(rating_ekomi)~
  </WS-Ajax-product_rating_ekomi>
{/ST-Ajax}
```

Der Name zwischen den spitzen Klammern bestimmt, welcher Container auf der Produktseite ersetzt wird. Geben Sie dem `div`, in dem die Bewertung steht, also die ID `product_rating_ekomi`.

## Die JavaScript-Rückmeldefunktionen

`ws_AJAXloadTemplate` erwartet vier Funktionen. Auch wenn Sie nichts darin tun wollen, müssen sie vorhanden sein, sonst bricht der Aufruf mit einem Fehler ab.

```js theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
// eKomi Produktbewertung

// Wird aufgerufen, bevor die AJAX-Anfrage abgesetzt wird.
// Hier lässt sich eine Ladeanzeige einblenden.
function ws_AJAXloadRatingEkomiStart()
{
}

// Wird aufgerufen, wenn das Nachladen der eKomi-Produktbewertung erfolgreich war.
function ws_AJAXloadRatingEkomiResponseSuccess()
{
}

// Wird aufgerufen, wenn das Nachladen der eKomi-Produktbewertung nicht erfolgreich war.
function wsAJAXloadRatingEkomiResponseError()
{
}

// Wird aufgerufen, wenn die AJAX-Kommunikation fehlschlug.
// Hier lässt sich ein allgemeiner Kommunikationsfehler anzeigen,
// beispielsweise wenn die Internetverbindung unterbrochen wurde.
function wsAJAXloadRatingEkomiError()
{
}
```

Zwei der vier Namen beginnen mit `ws_`, die anderen beiden nur mit `ws`. Das ist uneinheitlich, aber richtig so: die Templates rufen genau diese Namen auf. Ändern Sie einen Namen, müssen Sie ihn an allen Stellen im Template mitändern.

## Das CSS für die Bewertungsbalken

```css theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
.rating_ekomi_graphic_line {
   margin-bottom: 2px;
}

.rating_ekomi_graphic_line a {
   margin-right: 5px;
   text-decoration: none;
}

.rating_ekomi_graphic_line a:hover {
   text-decoration: underline;
   cursor: pointer;
}

.rating_ekomi_graphic_line_complete {
   margin-right: 5px;
   background: #f4f4f4;
   border: 1px solid #ddd;
   display: inline-block;
   vertical-align: middle;
   width: 180px;
   height: 18px;
   position: relative;
}

.rating_ekomi_graphic_line_complete a {
   font-size: 11px;
}

.rating_ekomi_graphic_line_filler {
   background: #ffc757;
   height: 100%;
}

.rating_ekomi_graphic_line_0 a,
.rating_ekomi_graphic_line_0 a:hover {
   color: #999;
   text-decoration: none !important;
   cursor: default;
}

.rating_ekomi_graphic_score {
   color: #666;
   position: absolute;
   right: 10px;
   top: 3px;
}
```

### Die Null als Sonderfall

Beide Templates setzen an die Zeile eine zweite Klasse, die auf die Stimmenzahl endet:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div class="rating_ekomi_graphic_line rating_ekomi_graphic_line_~E-PRODRATING-EKOMI_RatingVotes~">
```

Bei drei Stimmen entsteht `rating_ekomi_graphic_line_3`, bei keiner Stimme `rating_ekomi_graphic_line_0`. Nur für die Null gibt es eine Regel im Stylesheet, und sie macht den Text grau und den Mauszeiger normal. Damit sieht eine Bewertungsstufe ohne Stimmen nicht mehr nach einem Link aus. Die Klammerung um das `href` beziehungsweise das `onclick` sorgt im selben Zug dafür, dass sie auch keiner ist.

Die Templates verwenden vier weitere Klassen, die in diesem Stylesheet fehlen: `clear`, `infobox`, `rating_paging_placeholder` und `rating_paging_actualpage`. Ergänzen Sie sie selbst, sonst stehen Händlerantwort und Blätterleiste ohne Gestaltung da.

## Wo die Tags beschrieben sind

Diese Seite erklärt die Beispieldateien, nicht die einzelnen Tags. Die vollständige Beschreibung aller `E-PRODRATING-EKOMI_`-Tags, mit Typen, Parametern und den Eigenheiten der Blätterleiste, steht auf der Referenzseite.

Referenz: E-PRODRATING-EKOMI-Tags

Drei Punkte von dort sind beim Nachbauen der Beispiele besonders wichtig:

* `Count()` gehört als erstes Tag an den Anfang des Templates. Es lädt die Bewertungen und richtet das Blättern ein.
* Fehlt bei den vier Paging-Tags der Zahlenparameter, rechnen sie mit fünf Seiten. Die Beispiele oben geben überall `2` und `3` an.
* `PagingParam` nimmt einen aktiven Filter von selbst mit. Sie müssen ihn nicht anhängen.


## Related topics

- [eKomi Produktbewertung](https://dokumentation.websale.de/v8s/interaktive-funktionen/ekomi-produktbewertung.md)
- [E-PRODRATING-EKOMI_ (eKomi Produktbewertung)](https://dokumentation.websale.de/v8s/referenz/tags/e-prodrating-ekomi.md)
- [Strukturierte Daten und Rich Snippets](https://dokumentation.websale.de/v8s/seo/strukturierte-daten-rich-snippets.md)
- [Produkte, Katalog und Suche](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md)
- [Materialien Produktbewertung](https://dokumentation.websale.de/v8s/materialien/materialien-produktbewertung.md)


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