Sehr geehrte Kunden,
die Detaildarstellung von Bewertungen (z.B. im Highslide bei Klick auf die Sterne aus einem Suchergebnis, oder wenn man aus der Artikeldetailanzeige auf "alle Bewertungen anzeigen" klickt) war nicht mehr zeitgemäß und so haben wir diese in einem etwas größeren Projekt komplett neu entwickelt. Selbstverständlich als Template, so dass Sie es sogar selbst komplett umgestalten können.
Entwickelt war ja schon im Update "Intelligente Sortierung bei Bewertungen" die perfekte Sortierreihenfolge. Nun wurde also das Layout angegangen und weitere Funktionen, die wir in einem separaten Beitrag vorstellen werden.
Was ist neu?
Vor allem natürlich die ansprechende Optik, aber auch mehr Information für den Besucher in Form von schicken Balkendiagrammen, die wie eine Statistik z.B. Durchschnittswerte aller Bewertungstypen (Preis/Geschmack/Qualität/..) anzeigen:
Verkürzte Darstellung bei nur "einer" Bewertung:
Darstellung, wenn mehrere Bewertungen vorliegen:
Anpassung an Ihr CI / Shopdesign:
Wir empfehlen Ihnen den ausgelieferten Standard dringend anzupassen, oder wenn Sie es sich selbst nicht zutrauen, dann durch uns anpassen zu lassen. Ist im Grunde in 15 Minuten perfekt angepasst mit ein paar Änderungen am CSS.
Der Standard ist bewusst in Grautönen gehalten, damit es ja bei möglichst vielen Shops zunächt nicht all zu negativ auffällt. Hier das CSS, das automatisch bei Ihrem Shop geladen wird, und Sie selbst anpassen können:
Achtung! Bitte in keinem Fall dieses Standard-CSS nehmen und 1:1 bei Ihnen in die CSS-Datei kopieren. Das wäre nur Ressourcenverschwendung. Denn es wird schon genau so ja geladen. Bitte nur Änderungen in Ihr CSS einarbeiten.
Beispiel:
In diesem Shop wurde nur der Button und der Hintergrund (in dem Fall mit einem Verlauf/Gradient) umgestellt:
Einzelansicht:
Ansicht bei mehreren Bewertungen:
Dazu mussten nur die beiden Klassen rat_button und rat_kopf angepasst werden:
Welche Klasse zu welchem Objekt passt, läßt sich im Firefox z.B. einfach mit dem Markieren des jeweiligen Objekts und dann rechte Maustaste+Auswahlquelltext_anzeigen herausfinden.
Das Template:
Der gesamte obere Bereich läßt sich per Template selbst gestalten:
Ist nichts gepflegt, gilt der hinterlegte Standard. Für Deutsch:
und für alle anderen Sprachen:
In jedem Fall sollten Sie bei Einsatz anderer Sprachen das Template von hier kopieren und die paar wenigen Wörter darin übersetzen.
Neben dem Template können noch die Wörter "Stern", "Sterne" und der Text für den Button "Bewertung schreiben" je Sprache gepflegt werden. Sind diese nicht gepflegt, gilt der hinterlegte Standard und der Englische dann auch für alle anderen Sprachen.
Im Kopf-Template können Sie folgende Synonyme nutzen:
#rich_artikel & #rich_note & #rich_krit: sollten dringend enthalten sein, da die Rich-Snippets von den Suchmaschinen mit den angezeigten Sternen belohnt werden!
#rat_button: Button um eine neue Bewertung zu schreiben
#rat_sterne_liste: Balkenstatistik, wenn mehrere Bewertungen vorliegen, die anzeigt, wie viele Bewertungen je Stern vorliegen
#rich_photo: Artikel-Thumb, direkt mit den Rich-Snippet Eigenschaften
#rat_typ_liste: Eine Balkenstatistik, um die Durchschnittswerte je Bewertungstyp anzuzeigen. z.B. wie haben alle Bewerter die Benotung für das Preis-/Leistungsverhältnis der Ware gesehen
#wenn_nur_eine_bewertung#: wird 2 mal eingetragen und alles was dazwischen steht, wird nur angezeigt, wenn nur 1 Bewertung vorliegt. Und wenn das der Fall ist, dann dienen die Synonyme #rich_wer, #rich_ort, #rich_datum, #rich_titel, #rich_text dazu diese Bewertung anzuzeigen. Auch hier wieder mit allen nötigen Rich-Snippet Informationen ausgestattet.
Sollten Sie noch Fragen zu diesem Update haben, bitte uns einfach z.B. per Ticket-System (siehe myP) eine Nachricht zukommen lassen.
die Detaildarstellung von Bewertungen (z.B. im Highslide bei Klick auf die Sterne aus einem Suchergebnis, oder wenn man aus der Artikeldetailanzeige auf "alle Bewertungen anzeigen" klickt) war nicht mehr zeitgemäß und so haben wir diese in einem etwas größeren Projekt komplett neu entwickelt. Selbstverständlich als Template, so dass Sie es sogar selbst komplett umgestalten können.
Entwickelt war ja schon im Update "Intelligente Sortierung bei Bewertungen" die perfekte Sortierreihenfolge. Nun wurde also das Layout angegangen und weitere Funktionen, die wir in einem separaten Beitrag vorstellen werden.
Was ist neu?
Vor allem natürlich die ansprechende Optik, aber auch mehr Information für den Besucher in Form von schicken Balkendiagrammen, die wie eine Statistik z.B. Durchschnittswerte aller Bewertungstypen (Preis/Geschmack/Qualität/..) anzeigen:
Verkürzte Darstellung bei nur "einer" Bewertung:
Darstellung, wenn mehrere Bewertungen vorliegen:
Anpassung an Ihr CI / Shopdesign:
Wir empfehlen Ihnen den ausgelieferten Standard dringend anzupassen, oder wenn Sie es sich selbst nicht zutrauen, dann durch uns anpassen zu lassen. Ist im Grunde in 15 Minuten perfekt angepasst mit ein paar Änderungen am CSS.
Der Standard ist bewusst in Grautönen gehalten, damit es ja bei möglichst vielen Shops zunächt nicht all zu negativ auffällt. Hier das CSS, das automatisch bei Ihrem Shop geladen wird, und Sie selbst anpassen können:
.rat_bewertungsklasse {margin-left:3px;margin-top:12px;margin-bottom:5px;}
.rat_beste_hilfreiche,.rat_beste_kritische{margin:5px;}
.rat_hilfreich{margin:5px;}
.rat_einzelne_bewertung{border: 1px solid #CCCCCC;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;margin-bottom:10px;}
.rat_einzelne_bewertung_innen{margin:7px;}
.rat_eine{margin:12px;}
.rat_2besten{font-size:14px;margin-top:5px;margin-left:10px;}
.rat_kopf{border: 1px solid #CCCCCC;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;background-color: #F5F5F5;}
*html .rat_kopf{width:98%;}
.rat_kopf_innen{border: 1px solid #CCCCCC;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;margin:10px;background-color:#FFFFFF;}
*html .rat_kopf_innen{width:100%;}
.rat_balken_tt {margin-top:10px;margin-left:0px;padding-left:0px;}
.rat_umfrage{width:240px;margin-left: 10px;margin-bottom: 10px;border: 1px solid #CCCCCC;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background: #F5F5F5;}
.rat_umfrage_innen {margin:8px;font-weight:normal;font-size:11px;}
.aa_rating_typen{color:#AAAAAA;}
.rat_rating_typen_tab{margin-top:5px;}
.aa_rating_artikel{font-size:14px;}
.rat_typ_liste{margin-top:10px;}
.rat_balken_hint{overflow:hidden;line-height:11px;float:right;display:inline-block;width:100px;background-color:#F1F1F1;height:11px;}
.rat_balken{margin-top:1px;margin-bottom:1px;display:inline-block;background:#AAAAAA;height:9px;}
.rat_button {font-size:16px;font-weight:bold;cursor:pointer;background-color: #444444;text-decoration:none;padding:5px;height:35px;margin-bottom:10px;margin-top:10px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background:-webkit-gradient(linear, left top, left bottom, from(#999999), color-stop(50%, #777777), color-stop(50.1%, #666666), to(#444444));background:-moz-linear-gradient(top, #999999, #777777 50%, #666666 50.1%, #444444);background:linear-gradient(top, #999999, #777777 50%, #666666 50.1%, #444444);color: #EEEEEE; border: 1px solid #AAAAAA;text-align:center;letter-spacing: 1px;}
*html .rat_button {font-size: 12px; font-weight: bold; background-color: #444444; color: #EEEEEE; float: center; position: relative; border: 1px solid #222222;}
.rat_button:hover {text-decoration:none;color: #FFFFFF;-webkit-box-shadow: 2px 2px 2px #999999; /* webkit browser*/ -moz-box-shadow: 2px 2px 2px #999999; /* firefox */ box-shadow: 2px 2px 2px #999999;}
.rat_beste_hilfreiche,.rat_beste_kritische{margin:5px;}
.rat_hilfreich{margin:5px;}
.rat_einzelne_bewertung{border: 1px solid #CCCCCC;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;margin-bottom:10px;}
.rat_einzelne_bewertung_innen{margin:7px;}
.rat_eine{margin:12px;}
.rat_2besten{font-size:14px;margin-top:5px;margin-left:10px;}
.rat_kopf{border: 1px solid #CCCCCC;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;background-color: #F5F5F5;}
*html .rat_kopf{width:98%;}
.rat_kopf_innen{border: 1px solid #CCCCCC;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;margin:10px;background-color:#FFFFFF;}
*html .rat_kopf_innen{width:100%;}
.rat_balken_tt {margin-top:10px;margin-left:0px;padding-left:0px;}
.rat_umfrage{width:240px;margin-left: 10px;margin-bottom: 10px;border: 1px solid #CCCCCC;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background: #F5F5F5;}
.rat_umfrage_innen {margin:8px;font-weight:normal;font-size:11px;}
.aa_rating_typen{color:#AAAAAA;}
.rat_rating_typen_tab{margin-top:5px;}
.aa_rating_artikel{font-size:14px;}
.rat_typ_liste{margin-top:10px;}
.rat_balken_hint{overflow:hidden;line-height:11px;float:right;display:inline-block;width:100px;background-color:#F1F1F1;height:11px;}
.rat_balken{margin-top:1px;margin-bottom:1px;display:inline-block;background:#AAAAAA;height:9px;}
.rat_button {font-size:16px;font-weight:bold;cursor:pointer;background-color: #444444;text-decoration:none;padding:5px;height:35px;margin-bottom:10px;margin-top:10px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background:-webkit-gradient(linear, left top, left bottom, from(#999999), color-stop(50%, #777777), color-stop(50.1%, #666666), to(#444444));background:-moz-linear-gradient(top, #999999, #777777 50%, #666666 50.1%, #444444);background:linear-gradient(top, #999999, #777777 50%, #666666 50.1%, #444444);color: #EEEEEE; border: 1px solid #AAAAAA;text-align:center;letter-spacing: 1px;}
*html .rat_button {font-size: 12px; font-weight: bold; background-color: #444444; color: #EEEEEE; float: center; position: relative; border: 1px solid #222222;}
.rat_button:hover {text-decoration:none;color: #FFFFFF;-webkit-box-shadow: 2px 2px 2px #999999; /* webkit browser*/ -moz-box-shadow: 2px 2px 2px #999999; /* firefox */ box-shadow: 2px 2px 2px #999999;}
Achtung! Bitte in keinem Fall dieses Standard-CSS nehmen und 1:1 bei Ihnen in die CSS-Datei kopieren. Das wäre nur Ressourcenverschwendung. Denn es wird schon genau so ja geladen. Bitte nur Änderungen in Ihr CSS einarbeiten.
Beispiel:
In diesem Shop wurde nur der Button und der Hintergrund (in dem Fall mit einem Verlauf/Gradient) umgestellt:
Einzelansicht:
Ansicht bei mehreren Bewertungen:
Dazu mussten nur die beiden Klassen rat_button und rat_kopf angepasst werden:
.rat_kopf{border: 1px solid #CCCCCC;
background: #f4f2e6; /* Old browsers */
background: -moz-linear-gradient(45deg, #f4f2e6 0%, #c8c6ba 50%, #c8c6ba 53%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#f4f2e6), color-stop(50%,#c8c6ba), color-stop(53%,#c8c6ba), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #f4f2e6 0%,#c8c6ba 50%,#c8c6ba 53%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,#f4f2e6 0%,#c8c6ba 50%,#c8c6ba 53%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,#f4f2e6 0%,#c8c6ba 50%,#c8c6ba 53%,#ffffff 100%); /* IE10+ */
background: linear-gradient(45deg,#f4f2e6 0%,#c8c6ba 50%,#c8c6ba 53%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f2e6', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback */}
.rat_button {font-family: Arial, Verdana; font-size:16px;font-weight:bold;cursor:pointer;text-decoration:none;padding:5px;height:35px;margin-bottom:10px;margin-top:10px;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;color: #FFFFFF; border: 1px solid #AAAAAA;text-align:center;letter-spacing: 1px;background-image:url(https://cdn.powergap.de/l1.gif);background-color: #3D332A;}
background: #f4f2e6; /* Old browsers */
background: -moz-linear-gradient(45deg, #f4f2e6 0%, #c8c6ba 50%, #c8c6ba 53%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#f4f2e6), color-stop(50%,#c8c6ba), color-stop(53%,#c8c6ba), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #f4f2e6 0%,#c8c6ba 50%,#c8c6ba 53%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,#f4f2e6 0%,#c8c6ba 50%,#c8c6ba 53%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,#f4f2e6 0%,#c8c6ba 50%,#c8c6ba 53%,#ffffff 100%); /* IE10+ */
background: linear-gradient(45deg,#f4f2e6 0%,#c8c6ba 50%,#c8c6ba 53%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f2e6', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback */}
.rat_button {font-family: Arial, Verdana; font-size:16px;font-weight:bold;cursor:pointer;text-decoration:none;padding:5px;height:35px;margin-bottom:10px;margin-top:10px;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;color: #FFFFFF; border: 1px solid #AAAAAA;text-align:center;letter-spacing: 1px;background-image:url(https://cdn.powergap.de/l1.gif);background-color: #3D332A;}
Welche Klasse zu welchem Objekt passt, läßt sich im Firefox z.B. einfach mit dem Markieren des jeweiligen Objekts und dann rechte Maustaste+Auswahlquelltext_anzeigen herausfinden.
Das Template:
Der gesamte obere Bereich läßt sich per Template selbst gestalten:
Ist nichts gepflegt, gilt der hinterlegte Standard. Für Deutsch:
<br><div class=rat_kopf><div class=rat_kopf_innen><table cellspacing=0 cellpadding=10 border=0 width="100%"><tr><td colspan=2>#rich_artikel#rich_note</td><td>#rat_button</td></tr><tr><td>#rat_sterne_liste</td><td>#rich_photo</td><td valign=top>#rich_krit#rat_typ_liste</td></tr></table></div>#wenn_nur_eine_bewertung#<div class=rat_eine>#rich_wer aus #rich_ort schrieb am #rich_datum:<h2>#rich_titel</h2>#rich_text</div>#wenn_nur_eine_bewertung#</div>
und für alle anderen Sprachen:
<br><div class=rat_kopf><div class=rat_kopf_innen><table cellspacing=0 cellpadding=10 border=0 width="100%"><tr><td colspan=2>#rich_artikel#rich_note</td><td>#rat_button</td></tr><tr><td>#rat_sterne_liste</td><td>#rich_photo</td><td valign=top>#rich_krit#rat_typ_liste</td></tr></table></div>#wenn_nur_eine_bewertung#<div class=rat_eine>On #rich_datum, #rich_wer from #rich_ort wrote:<h2>#rich_titel</h2>#rich_text</div>#wenn_nur_eine_bewertung#</div>
In jedem Fall sollten Sie bei Einsatz anderer Sprachen das Template von hier kopieren und die paar wenigen Wörter darin übersetzen.
Neben dem Template können noch die Wörter "Stern", "Sterne" und der Text für den Button "Bewertung schreiben" je Sprache gepflegt werden. Sind diese nicht gepflegt, gilt der hinterlegte Standard und der Englische dann auch für alle anderen Sprachen.
Im Kopf-Template können Sie folgende Synonyme nutzen:
#rich_artikel & #rich_note & #rich_krit: sollten dringend enthalten sein, da die Rich-Snippets von den Suchmaschinen mit den angezeigten Sternen belohnt werden!
#rat_button: Button um eine neue Bewertung zu schreiben
#rat_sterne_liste: Balkenstatistik, wenn mehrere Bewertungen vorliegen, die anzeigt, wie viele Bewertungen je Stern vorliegen
#rich_photo: Artikel-Thumb, direkt mit den Rich-Snippet Eigenschaften
#rat_typ_liste: Eine Balkenstatistik, um die Durchschnittswerte je Bewertungstyp anzuzeigen. z.B. wie haben alle Bewerter die Benotung für das Preis-/Leistungsverhältnis der Ware gesehen
#wenn_nur_eine_bewertung#: wird 2 mal eingetragen und alles was dazwischen steht, wird nur angezeigt, wenn nur 1 Bewertung vorliegt. Und wenn das der Fall ist, dann dienen die Synonyme #rich_wer, #rich_ort, #rich_datum, #rich_titel, #rich_text dazu diese Bewertung anzuzeigen. Auch hier wieder mit allen nötigen Rich-Snippet Informationen ausgestattet.
Sollten Sie noch Fragen zu diesem Update haben, bitte uns einfach z.B. per Ticket-System (siehe myP) eine Nachricht zukommen lassen.