Gunfinder op je eigen website integreren
Het Gunfinder Widget biedt website-eigenaren de mogelijkheid Gunfinder zoekresultaten op hun eigen website weer te geven. Een goed voorbeeld is de Gunfinder integratie op Geartester (helemaal onderaan de pagina).
Hieronder wordt kort uitgelegd hoe je het Gunfinder Widget op je eigen website kunt integreren. In principe bestaat het proces uit 2 stappen: eerst wordt een JavaScript-bestand ingeladen en in de tweede stap kun je minimale HTML-code schrijven die door het JavaScript-bestand wordt herkend en verwerkt.
JavaScript-bestand insluiten
De volgende code-snippet moet ofwel in de head of in de body van het HTML-document worden opgenomen:
<script src="https://widgets.gunfinder.de/js/search.js" async></script>
HTML-snippet plaatsen
Zodra het JavaScript-bestand is ingeladen, kan een nieuw DIV-element worden toegevoegd dat een attribuut met de naam data-gunfinder-search-widget moet krijgen, zodat het door de JavaScript-code wordt herkend. Hier is een simpel voorbeeld:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}"></div>
Hiermee wordt een zoekopdracht met de term {Suchanfrage} bij Gunfinder gestart en worden de resultaten op de pagina weergegeven. data-gunfinder-search-query is het enige verplichte attribuut. Andere mogelijke attributen zijn te vinden in de onderstaande tabel. Alle attributen moeten het prefix data-gunfinder-search- krijgen.
Attribuut |
Beschrijving |
Mogelijke waarden |
Verplicht |
query |
Zoekopdracht |
Tekst |
Ja |
count |
Maximaal aantal resultaten. Geheel getal. Standaard: 5 |
> 0 < 30 |
Nee |
price-min |
Minimale prijs. Geheel getal. |
> 0 < price-max (indien opgegeven) |
Nee |
price-max |
Maximale prijs. Geheel getal. |
> 0 > price-min (indien opgegeven) |
Nee |
condition |
Artikelconditie |
new of used |
Nee |
available |
Direct leverbaar. Standaard: false |
true of false |
Nee |
category |
Beperking van de zoekopdracht tot een bepaalde categorie |
weapon, ammunition, optics, apparel, equipment |
Nee |
style |
Styling. Zie beschrijving hieronder. |
JSON-object |
Nee |
sources |
Komma-gescheiden lijst met namen van bronnen die doorzocht moeten worden. Standaard worden alle bronnen doorzocht. |
Neem contact met ons op |
Nee |
exclude-sources |
Komma-gescheiden lijst met namen van bronnen die niet(!) doorzocht moeten worden. Standaard worden alle bronnen doorzocht. |
Neem contact met ons op |
Nee |
marketplace |
Als true, toont alleen resultaten van de marktplaats. Als false, toont geen resultaten van de marktplaats. |
true of false |
Nee |
Meer voorbeelden:
<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
Als het widget niet via CSS-regels gestyled moet worden, zijn er enkele simpele variabelen die als JSON-object aan het widget kunnen worden doorgegeven om het uiterlijk van het widget te veranderen.
Variabele |
Beschrijving |
Mogelijke waarden |
fontSize |
Basis lettergrootte. Heeft invloed op het hele widget. |
Standaard CSS-waarden voor groottes |
itemTitleColor |
Kleur van de advertentie-titel |
Standaard CSS-waarden voor kleuren |
itemPriceColor |
Kleur van de advertentieprijs |
Standaard CSS-waarden voor kleuren |
moreColor |
Tekst- & randkleur van de "meer advertenties"-knop |
Standaard CSS-waarden voor kleuren |
Voorbeeld:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>