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 op de eigen website integreren
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 integreren. Het proces bestaat in principe uit 2 stappen: eerst wordt een JavaScript-bestand ingesloten en in de tweede stap kan minimale HTML-code worden geschreven die door het JavaScript-bestand wordt herkend en verwerkt.
Het JavaScript-bestand insluiten
Het volgende code-fragment moet worden ingesloten in de head of body van het HTML-document:
<script src="https://widgets.gunfinder.de/js/search.js" async></script>
Het HTML-fragment plaatsen
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 met de term {Suchanfrage} bij Gunfinder gestart en de resultaten worden op de pagina weergegeven. data-gunfinder-search-query is het enige verplichte attribuut. Overige 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 |
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 |
Zoekresultaten beperken tot een bepaalde categorie |
weapon, ammunition, optics, apparel, equipment |
Nee |
style |
Opmaak. Zie beschrijving hieronder. |
JSON-object |
Nee |
sources |
Kommagescheiden lijst met namen van bronnen die doorzocht moeten worden. Standaard worden alle bronnen doorzocht. |
Neem contact met ons op |
Nee |
exclude-sources |
Kommagescheiden 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 de widget niet via CSS-regels opgemaakt moet worden, zijn er een aantal eenvoudige variabelen die als JSON-object aan de widget kunnen worden meegegeven om het uiterlijk van de widget te wijzigen.
Variabele |
Beschrijving |
Mogelijke waarden |
fontSize |
Basislettergrootte. Heeft invloed op de gehele widget. |
Standaard CSS-waarden voor grootten |
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>
