Badget-Grafik

Was kostet die Badget-Grafik?

Die Badget-Grafik stellen wir Ihnen kostenlos zur Verfügung. Aber das haben Sie sicher bereits vermutet… ;-)

Wo finde ich den Quellcode für die Badget-Grafik?

Sie können auf den Quellcode der Badget-Grafik über den Händlerbereich und den Menüpunkt “Grafiken” zugreifen.

Wie wird die Badget-Grafik eingebunden?

Im Gegensatz zu den bislang bekannten Grafiken, die wir Ihnen zur Verfügung stellen, wird die Badget-Grafik über ein JavaScript (JS) in Ihren Shop eingebunden. Wir wollen damit sicherstellen, dass die Einbindung möglichst einfach erfolgen kann.

Den benötigten JS-Quellcode können Sie im Händlerbereich unter dem Menüpunkt “Grafiken” abrufen. Sie finden dort auch eine Vorschau der Badget-Grafik.

Beispielcode:

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

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.

Wie kann ich die Position der Badget-Grafik anpassen?

Standardmäßig wird die Badget-Grafik am rechten unteren Bildschirmrand angezeigt. Per CSS wird die Grafik mit einem Abstand von 2px vom rechten Bildschirmrand und 5px vom unteren Bildschirmrand positioniert. Es kann manchmal vorkommen, dass die Grafik mit ihren Standardwerten andere Objekte innerhalb Ihrer Website überlagert oder von anderen Objekten überlagert wird. Deshalb haben Sie die Möglichkeit, die Positionierung zu beeinflussen.

Der im Händlerbereich bereitgestellte JavaScript-Code zur Einbindung des Badgets beinhaltet die Funktion:

createBadget(myShopID, myBadgetType, mySrc)

Die Funktion createBadget kann mit zusätlichen vier Parametern SpaceX, SpaceY, AlignH und AlignV erweitert werden, um die Position der Grafik zu beeinflussen:

createBadget(myShopID, myBadgetType, mySrc,[[SpaceX, SpaceY, [AlignH , AlignV]], DisplayWidth])

- SpaceX entspricht dem Abstand in Pixeln vom rechten/linken Bildschirmrand
- SpaceY entspricht dem Abstand in Pixeln vom unteren/oberen Bildschirmrand
- wird SpaceX nicht angegeben, entspricht der Standardwert hierfür "right/left: 2px;"
- SpaceX darf nicht kleiner als 2 sein
- SpaceY darf nicht kleiner als 5 sein
- AlignH gibt die horizontale Ausrichtung an (gültige Werte sind 'left' oder 'right')
- AlignV gibt die vertikale Ausrichtung an (gültige Werte sind 'top' oder 'bottom')
- DisplayWidth gibt die Display-Breite in Pixeln an, bis zu der die Badget-Grafik ausgeblendet wird.
- soll DisplayWidth angegeben werden, die Parameter SpaceX, SpaceY, AlignH und AlignV aber mit den Default-Werten geladen werden, müssen die Parameter mit 0 bzw. leeren Werten übergeben werden (siehe Bsp. 6)
- werden AlignH und AlignV angegeben, müssen auch die Parameter SpaceX und SpaceY angeben werden (Sollen die Seitenabstände unverändert bleiben, können SpaceX und SpaceY mit 0 angegeben werden).

Fügen Sie also der Funktion die gewünschten Parameter hinzu, um die Position der Grafik zu beeinflussen. Lassen Sie aber den übrigen JavaScript-Code unverändert.

Anwendungsbeispiele:

1. createBadget(myShopID, myBadgetType, mySrc)

Die Parameter wurden nicht gesetzt. D.h., die Grafik wird mit den Default-Werten in einem Abstand von 5 Pixeln vom unteren Bildschirmrand und 2 Pixeln vom rechten Bildschirmrand angezeigt.

2. createBadget(myShopID, myBadgetType, mySrc, 100)

Der Parameter SpaceX wurde nicht angegeben. Es wird der Default-Wert "right: 2px;" verwendet. SpaceY hat den Wert “100″. D.h., die Grafik wird mit einem Abstand von 100 Pixeln vom unteren Bildschirmrand und 2 Pixeln vom rechten Bildschirmrand angezeigt.

3. createBadget(myShopID, myBadgetType, mySrc, 100, 100)

Die Parameter SpaceX und SpaceY haben den Wert “100″. D.h., die Grafik wird mit einem Abstand von 100 Pixeln vom unteren Bildschirmrand und 100 Pixeln vom rechten Bildschirmrand angezeigt.

4. createBadget(myShopID, myBadgetType, mySrc, 0, 0, 'right', 'top')

Die Grafik wird mit einem Abstand von 5 Pixeln vom oberen (‘top’) Bildschirmrand und 2 Pixeln vom rechten (‘right’) Bildschirmrand angezeigt.

5. createBadget(myShopID, myBadgetType, mySrc, 25, 10, 'left', 'bottom')

Die Grafik wird mit einem Abstand von 25 Pixeln vom linken (‘left’) Bildschirmrand und 10 Pixeln vom unteren (‘bottom’) Bildschirmrand angezeigt.

6. createBadget(myShopID, myBadgetType, mySrc, 0, 0, '', '', 480)

Die Grafik wird mit den Default-Werten (siehe Bsp. 1) auf Displays mit einer Display-Breite > 480 Pixeln angezeigt. Ist die Display-Breite kleiner / gleich 480 Pixeln, wird die Grafik nicht angezeigt.

Wie kann man die Badget-Grafik bei mobilen Geräten mit kleinen Displays ausblenden?

badget-sampleMit einer zusätzlichen Option beim Aufruf der Funktion createBadget kann festgelegt werden, bis zu welcher Display-Breite (in Pixeln) das Badget augeblendet wird. Diese Option ist hilfreich, wenn Sie z.B. verhindern möchten, dass das Badget auf mobilen Geräten mit kleiner Auflösung Inhalte Ihrer Website überdeckt. So funktionert es:

Fügen Sie der createBadget-Funktion einen zusätzlichen Parameter z.B. 480 hinzu. Beispiel:

createBadget(myShopID, myBadgetType, mySrc, 0, 15, 'left','',480);

Der zusätzliche (neue) Wert “480″ bewirkt, dass bei Displays <= 480 Pixel Breite die Badget-Grafik nicht angezeigt wird. Der leere Wert hinter 'left' bedeutet, dass der Default-Wert für die vertikale Ausrichtung verwendet wird. Ein weiteres Beispiel finden Sie hier (siehe Beispiel 6).

Hinweis: Die Funktion prüft beim Laden der Seite, wie groß das aufrufende Display ist. Beim Test (z.B. durch Ändern der Fenstergröße) muss die Website anschließend neu geladen werden, damit der Effekt sichtbar wird. Webmaster sollten zusätzlich darauf achten, dass sie beim Testen den Browser-Cache und ggf. den Cache des Shopsystems leeren.