Gunfinder auf der eigenen Webseite integrieren
Das Gunfinder Widget bietet Webseiten-Betreibern die Möglichkeit Gunfinder Suchergebnisse auf der eigenen Webseite anzuzeigen. Ein gutes Beispiel ist die Gunfinder Integration auf Geartester (ganz unten auf der Seite).
Im Folgenden wird nun kurz erklärt wie man das Gunfinder Widget auf seiner eigenen Webseite einbinden kann. Im Grunde besteht der Prozess aus 2 Schritten: Als erstes wird eine JavaScript-Datei eingebunden und im zweiten Schritt kann dann minimaler HTML-Code geschrieben werden, der von der JavaScript-Datei erkannt und verarbeitet wird.
Einbinden der JavaScript-Datei
Das folgende Code-Snippet muss entweder im Head oder Body des HTML-Dokuments eingebunden werden:
<script src="https://widgets.gunfinder.de/js/search.js" async></script>
Platzieren des HTML-Snippets
Sobald die JavaScript-Datei eingebunden ist, kann ein neues DIV-Element eingefügt werden, das ein Attribut mit dem Namen data-gunfinder-search-widget erhalten muss, damit es von dem JavaScript-Code erkannt wird. Hier ist ein simples Beispiel:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}"></div>
Damit wird eine Suche mit dem Begriff {Suchanfrage} bei Gunfinder gestartet und die Ergebnisse werden auf der Seite dargestellt. data-gunfinder-search-query ist das einzige obligatorische Attribut. Weitere mögliche Attribute können der folgenden Tabelle entnommen werden. Alle Attribute müssen als Prefix data-gunfinder-search- erhalten.
Attribut | Beschreibung | Mögliche Werte | Obligatorisch |
query | Suchanfrage | Text | Ja |
count | Maximale Anzahl an Ergebnissen. Ganze Zahl. Voreinstellung: 5 | > 0 < 30 | Nein |
price-min | Minimaler Preis. Ganze Zahl. | > 0 < price-max (sofern angegeben) | Nein |
price-max | Maximaler Preis. Ganze Zahl. | > 0 > price-min (sofern angegeben) | Nein |
condition | Artikel-Zustand | new oder used | Nein |
available | Sofort Lieferbar. Voreinstellung: false | true oder false | Nein |
category | Begrenzung der Suche auf eine bestimmte Kategorie | weapon, ammunition, optics, apparel, equipment | Nein |
style | Styling. Siehe Beschreibung weiter unten. | JSON-Objekt | Nein |
sources | Komma getrennte Liste mit Namen der Quellen, die durchsucht werden sollen. Standardmäßig werden alle Quellen durchsucht. | Bitte sprich uns an | Nein |
exclude-sources | Komma getrennte Liste mit Namen der Quellen, die nicht(!) durchsucht werden sollen. Standardmäßig werden alle Quellen durchsucht. | Bitte sprich uns an | Nein |
marketplace | Wenn true, zeigt nur Ergebnisse des Marktplatzes an. Wenn false, zeigt keine Ergebnisse des Marktplatzes an. | true oder false | Nein |
Weitere Beispiele:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" data-gunfinder-search-price-min="2500"></div>
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" data-gunfinder-search-available="true"></div>
Styling
Falls das Widget nicht über CSS-Regeln gestylt werden soll, gibt es einige simple Variablen, die als JSON-Objekt an das Widget übergeben werden können um das Aussehen des Widgets zu verändern.
Variable | Beschreibung | Mögliche Werte |
fontSize | Grundlegende Schriftgröße. Hat Auswirkungen auf das gesamte Widget. | Standard CSS Werte für Größen |
itemTitleColor | Farbe der Angebot-Überschrift | Standard CSS Werte für Farben |
itemPriceColor | Farbe des Angebotspreises | Standard CSS Werte für Farben |
moreColor | Text- & Rahmenfarbe des "weitere Angebote"-Buttons | Standard CSS Werte für Farben |
Beispiel:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>