Gunfinder jetzt
karloooo
Achtung: Dein Browser ist veraltet. Beachte bitte, dass Gunfinder daher an manchen Stellen nicht funktionieren wird. Du solltest deinen Browser sobald es geht aktualisieren. Hier erfährst du mehr!
Gunfinder

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>