Home » Allgemeines » Neue Grafik verfügbar – Schwebendes Badget

badget-sample-blogAb sofort steht allen registrierten Anbietern bei ShopVote.de eine neue Bewertungsgrafik zur Verfügung. Die Grafik beinhaltet eine Sterneskala, die aktuelle Bewertungsnote als Wort und die Anzahl der Sterne als Dezimalwert. Die Besonderheit dieser Grafik liegt in der Darstellung innerhalb des Online-Shops. Die Grafik wird so dargestellt, dass sie am unteren rechten Bildschirmrand “festhängt” und über dem Seiteninhalt “schwebt”, also auch beim scrollen ihre Position nicht verändert.

Im Gegensatz zu den bislang bekannten Grafiken, die wir den Händlern zur Verfügung stellen, wird die Badget-Grafik über ein JavaScript (JS) in den Shop eingebunden. Damit soll sichergestellt werden, dass die Einbindung möglichst einfach erfolgen kann.

Der benötigte JS-Quellcode kann im Händlerbereich unter dem Menüpunkt “Grafiken” abgerufen werden. Dort ist ebenfalls eine Live-Vorschau der Badget-Grafik verfügbar.

Beispielcode:

<script src="https://widgets.shopvote.de/js/badget-98x98.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
var myShopID = xxxxx; // xxxxx = Ihre ShopID
var myBadgetType = 1;
var mySrc = ('https:' === document.location.protocol ? 'https' : 'http');
createBadget(myShopID, myBadgetType, mySrc);
});
</script>

So binden Sie die Badget-Grafik in Ihren Shop ein

Kopieren Sie den JS-Quellcode für Ihren Shop aus dem Händlerbereich und fügen Sie ihn innerhalb des <body>-Tags Ihres Online-Shops ein. Damit die Badget-Grafik auf allen Seiten Ihres Online-Shops angezeigt wird, sollten Sie den Quellcode z.B. im Footer (der Footer ist i.d.R. Bestandteil jeder Seite Ihres Shops) einbinden.

Speichern Sie die Änderung und laden Sie z.B. Ihre Startseite neu. War die Einbindung erfolgreich, sehen Sie nun rechts unten am Bildschirmrand die Badget-Grafik für Ihren Shop.

Sollte die Grafik nicht angezeigt werden, prüfen Sie den JS-Quellcode auf Vollständigkeit – er darf im Sinne der Funktionalität nicht von Ihnen verändert werden. Der Parameter “myShopID" muss Ihrer ShopID bei ShopVote.de entsprechen. Ausserdem darf der Code nur innerhalb der jeweiligen Shop-TopLevel-Domain verwendet werden.

Beispiel: Sie haben Ihren Shop “meinprimashop.de” bei ShopVote angemeldet. Die Badget-Grafik kann nur innerhalb der Top-Level-Domain “meinprimashop.de” verwendet werden. Würden Sie den JS-Quellcode innerhalb der Domain “meinprimashop.com” einbinden, würde die Badget-Grafik nicht angezeigt werden.

Fragen zur Grafik werden gern per Mail oder hier über die Kommentarfunktion beantwortet.

[31.10.14] Die Badget-Grafik kann nun individuell positioniert werden. Der Funktion createBadget wurden dazu zwei optionale Parameter hinzugefügt. Eine ausführliche Anleitung mit Beispielen wird in den FAQ unter “Wie kann ich die Position der Badget-Grafik anpassen?” angeboten.

[07.11.14] Mit zusätzlichen Parametern kann die Grafik nun in ihrer grundsätzlichen Ausrichtung oben/unten und links/rechts beeinflusst werden. Dazu wurden die FAQ angepasst und zwei weitere Beispiele hinzugefügt.

4 Antworten auf “Neue Grafik verfügbar – Schwebendes Badget

  1. Hallo,

    würde gern das schwebende Badget an der linken Seite am Rand, ca. im oberen Drittel der HP fix einbauen.
    Gibt es einen Code bzw. wie müsste ich diesen verändern damit dieser Badget immer (egal welche Auflösung ich verwende) an der selben Position bleibt.
    Vielen Dank
    Mfg
    Dusan

Antworten nicht mehr möglich.