Badget-Grafik

Was kostet die Badget-Grafik?

Die Badget-Grafik stellen wir Ihnen kostenlos zur Verf├╝gung. Aber das haben Sie sicher bereits vermutet… ­čśë

Gibt es f├╝r das Addon RatingStars eine JavaScript-Integration?

Ja, das Addon kann per JavaScript – verbunden mit einer entsprechenden Grafik – integriert werden. Der Code kann im H├Ąndlerbereich ├╝ber den Punkt „Grafiken & Siegel“ abgerufen werden. Die Grafiken „AllVotes“, „VoteBadge“ (klein + gro├č) und „schwebendes Badge“ sind in der Lage, den n├Âtigen Code automatisch auzuliefern. Dazu muss zus├Ątzlich im Men├╝punkt „RatingStars“ die Option „RatingStars-Integration ohne Programmierkenntnisse“ aktiviert werden.

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','bottom',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.