Bewertungen beim Produkt anzeigen

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

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

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.

{!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 · PR-RatingScore · PR-RatingScoreImg · PR-ReadRatingsLink · PR-WriteRatingLink

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

<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

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.

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

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:

{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 · PR-AdvRatingScoreImg · 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.

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

.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

Wegweiser

Die Anzeige einbauen

Die Grafiken zur Note

Eine Grafik je ganze Note

Grafiken für Wertebereiche

Fehlerhafte Eingaben hervorheben

Verwandte Themen

​Die Anzeige einbauen

​Die Grafiken zur Note

​Eine Grafik je ganze Note

​Grafiken für Wertebereiche

​Fehlerhafte Eingaben hervorheben

​Verwandte Themen

Die Anzeige einbauen

Die Grafiken zur Note

Eine Grafik je ganze Note

Grafiken für Wertebereiche

Fehlerhafte Eingaben hervorheben

Verwandte Themen