A-TEC
AEA Airguns
AKAH
ASG
Aimpoint
Alpen Optics
Alpha Industries
Anschütz
Antonio Zoli
Ares
B&T Schalldämpfer
Baikal
Ballistol
Balzer
Barbour
Barnes
Barnett
Benelli
Beretta
Bergara
Blaser
Brandit
Bremer Tresor
Brenneke
Gunfinder integreren op je eigen website
De Gunfinder Widget biedt websitebeheerders de mogelijkheid om Gunfinder zoekresultaten op de eigen website weer te geven. Een goed voorbeeld is de Gunfinder integratie op Geartester (helemaal onderaan de pagina).
Hieronder wordt kort uitgelegd hoe je de Gunfinder Widget op je eigen website kunt inbinden. In principe bestaat het proces uit 2 stappen: eerst wordt een JavaScript-bestand ingeladen en in de tweede stap kan minimale HTML-code worden geschreven, die door het JavaScript-bestand wordt herkend en verwerkt.
Het insluiten van het JavaScript-bestand
Het volgende code-fragment moet worden opgenomen in de head of body van het HTML-document:
<script src="https://widgets.gunfinder.de/js/search.js" async></script>
Plaatsing van het HTML-fragment
Zodra het JavaScript-bestand is ingesloten, kan een nieuw DIV-element worden ingevoegd dat een attribuut met de naam data-gunfinder-search-widget moet krijgen, zodat het door de JavaScript-code wordt herkend. Hier is een eenvoudig voorbeeld:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}"></div>
Hiermee wordt een zoekopdracht gestart met de term {Suchanfrage} bij Gunfinder en worden de resultaten op de pagina weergegeven. data-gunfinder-search-query is het enige verplichte attribuut. Verdere mogelijke attributen zijn te vinden in de onderstaande tabel. Alle attributen moeten het voorvoegsel 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 |
Minimumprijs. Geheel getal. |
> 0 < price-max (indien opgegeven) |
Nee |
price-max |
Maximumprijs. Geheel getal. |
> 0 > price-min (indien opgegeven) |
Nee |
condition |
Staat van het artikel |
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 |
Opmaak. Zie beschrijving verderop. |
JSON-object |
Nee |
sources |
Door komma's gescheiden lijst met namen van bronnen die doorzocht moeten worden. Standaard worden alle bronnen doorzocht. |
Neem contact met ons op |
Nee |
exclude-sources |
Door komma's 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, worden alleen resultaten van de marktplaats getoond. Als false, worden geen resultaten van de marktplaats getoond. |
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 gestyld moet worden, zijn er enkele eenvoudige variabelen die als JSON-object aan het widget meegegeven kunnen worden om het uiterlijk van het widget te wijzigen.
Variabele |
Beschrijving |
Mogelijke waarden |
fontSize |
Basislettergrootte. Heeft invloed op het hele widget. |
Standaard CSS-waarden voor groottes |
itemTitleColor |
Kleur van de aanbiedingstitel |
Standaard CSS-waarden voor kleuren |
itemPriceColor |
Kleur van de aanbiedingsprijs |
Standaard CSS-waarden voor kleuren |
moreColor |
Tekst- & randkleur van de knop "meer aanbiedingen" |
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>
