Materialien eKomi Produktbewertung - WEBSALE Dokumentation

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 · Referenz: E-PRODRATING-EKOMI-Tags

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.

incl_prodrating_ekomi.htm, ohne AJAX

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

incl_prodrating_ekomi.htm, mit AJAX

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

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

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

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

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

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

​Die Dateien im Überblick

​Mit oder ohne AJAX

​Das Bewertungstemplate

​Was die beiden Fassungen sonst noch unterscheidet

​Das AJAX-Template

​Die JavaScript-Rückmeldefunktionen

​Das CSS für die Bewertungsbalken

​Die Null als Sonderfall

​Wo die Tags beschrieben sind

Die Dateien im Überblick

Mit oder ohne AJAX

Das Bewertungstemplate

Was die beiden Fassungen sonst noch unterscheidet

Das AJAX-Template

Die JavaScript-Rückmeldefunktionen

Das CSS für die Bewertungsbalken

Die Null als Sonderfall

Wo die Tags beschrieben sind