Preisvergleich für die eigene Webseite

Preisvergleich für die eigene Webseite

Du schreibst Rezensionen zur Brettspielen? Oder berichtest über die Szene im Allgemeinen? Dann kannst du nun mit nur wenigen Schritten einen Preisvergleich zu einem Spiel in deinen Blog integrieren und kannst damit deinen Besuchern immer den günstigsten Preis auflisten.

Die Integration ist sehr leicht und auch mit wenig technischem Know-How zu meistern. Du musst lediglich die Möglichkeit haben, ein externes JavaScript einbinden. Alle weiteren Daten und Ressourcen werden automatisch nachgeladen.

Wichtig jedoch ist, dass du die ID zum Spiel hier im Blog angibst. Diese findest du ganz leicht über die URL auf der Detailseite eines Spiels (hier am Beispiel von Great Western Trail):

https://www.brettspiel-angebote.de/spiele/great-western-trail/838/

Die Zahl, die direkt nach dem Namen kommt, ist die benötigte ID. Im obigen Beispiel wäre das die 838.

Als Nächstes musst du folgendes Code-Konstrukt auf deiner Seite einbinden:

<div id="bsaWidget"></div> <script type="text/javascript"> var _bsaWidgetConfig = { gameId: 838 }; </script> <script type="text/javascript" src="https://www.brettspiel-angebote.de/wp-content/themes/boardgame/js/widget.min.js"></script> 

Nach dem Neuladen der Seite wird an diese Stelle der Preisvergleich geladen (genauer gesagt wird das Element von oben <div id="bsaWidget"></div> ersetzt). Ihr könnt dementsprechend auch das Skript ans Ende der Seite setzen und den Container irgendwie im Content.

Das Ganze sieht dann in etwa so aus:

Neben der Standardkonfiguration (wie im Beispiel oben) könnt ihr noch einige weitere Parameter ergänzen und das Widget etwas konfigurieren. Eine Übersicht über alle Parameter findet ihr hier:

  • gameId (erforderlich) – entspricht der ID des Spiels im Blog
  • container – per Default wird ein Container mit der ID bsaWidget gesucht. Ihr könnt jedoch auch eine frei wählbare ID wählen, müsst diese aber dann hier angeben.
  • maxWidth – die maximale Breite in Pixeln (z.B. 500), die das Widget haben soll (Default ist 100%), Minimum sind hier jedoch 300 Pixel.
  • maxHeight – die Höhe des Widgets passt sich automatisch an den Inhalt an, hiermit kann man die Auswahl jedoch begrenzen. Die Angaben erfolgt auch hier in Pixeln.
  • maxPrices – die Anzahl an Preisen, die zurückgeliefert werden. Default sind hier 5. Gebt ihr -1 als Wert an, werden ALLE Preise zum gewählten Spiel angezeigt (was eine lange Liste geben könnte).
  • showTitle – Gebt hier false an, um den Titel des Spiels oberhalb der Preise auszublenden.
  • showListprice – Gebt hier false an, um den Listenpreis zu verstecken. Danach wird nur noch ein Preis mit der Gesamtsumme (inkl. aller Versandkosten, Gutscheine, …)
    angezeigt.
  • availability – Limitiert hier die Ausgabe von Preisen nach Verfügbarkeit. Die Übergabe erfolgt als Array, also z.B. [1, 2]. Gebt ihr nichts an, werden per Default alle Preise ausgegeben. Es gibt folgende Verfügbarkeiten mit ihren entsprechenden Wertigkeiten:
    • 1 – Lieferbar
    • 2 – Nicht lieferbar / Ausverkauft
    • 3 – Vorbestellbar
    • 4 – Längere Lieferzeit / wird nachbestellt

Diese Parameter müssen oben zur Variable _bsaConfig ergänzt werden, so dass eine erweitere Konfiguration beispielsweise wie folgt aussehen könnten:

var _bsaWidgetConfig = { gameId: 838, container: 'bsaWidget', showListprice: false, showTitle: false, maxItems: 5, maxHeight: 350, availability: [1, 3] };

Solltet ihr Fragen zur Integration haben oder Hilfe benötigen, kontaktiert mich einfach. Gerne auch bei Ideen zur Erweiterung des Widgets und definitiv, wenn ihr Fehler gefunden habt. Wir finden gemeinsam eine Lösung.