Gunfinder jetzt
karloooo

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 or 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


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
itemBorderColor Rahmenfarbe einzelner Angebote Standard CSS Werte für Farben
itemTitleColor Farbe der Angebot-Überschrift

Standard CSS Werte für Farben

itemTitleHoverColor Hover-Farbe der Angebot-Überschrift

Standard CSS Werte für Farben

itemUrlColor Farbe der Angebot-URL

Standard CSS Werte für Farben

itemPriceColor Farbe des Angebotspreises

Standard CSS Werte für Farben

itemDescriptionColor Farbe der Angebotsbeschreibung

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>

Anzeige
t