Gunfinderin integrointi omille verkkosivuille

Gunfinder-widgetin avulla verkkosivustojen ylläpitäjät voivat näyttää Gunfinder-hakutuloksia omilla sivuillaan. Hyvä esimerkki on Gunfinder-integraatio Geartesterissä (sivun alareunassa).

Seuraavaksi kerrotaan lyhyesti, miten voit lisätä Gunfinder-widgetin omalle verkkosivustollesi. Prosessi koostuu käytännössä kahdesta vaiheesta: ensin lisätään JavaScript-tiedosto, ja toisessa vaiheessa kirjoitetaan pieni määrä HTML-koodia, jonka JavaScript-tiedosto tunnistaa ja käsittelee.

JavaScript-tiedoston lisääminen

Seuraava koodinpätkä on lisättävä HTML-dokumentin head- tai body-osioon:
<script src="https://widgets.gunfinder.de/js/search.js" async></script>

HTML-koodinpätkän lisääminen

Kun JavaScript-tiedosto on lisätty, voit lisätä uuden DIV-elementin. Siinä täytyy olla attribuutti nimeltä data-gunfinder-search-widget, jotta JavaScript-koodi tunnistaa sen. Tässä yksinkertainen esimerkki:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}"></div>

Tämä käynnistää Gunfinderissa haun hakusanalla {Suchanfrage} ja näyttää tulokset sivulla. data-gunfinder-search-query on ainoa pakollinen attribuutti. Muut mahdolliset attribuutit löydät seuraavasta taulukosta. Kaikkien attribuuttien etuliitteenä on oltava data-gunfinder-search-.

Attribuutti	Kuvaus	Mahdolliset arvot	Pakollinen
query	Hakusana	Teksti	Kyllä
count	Tulosten enimmäismäärä. Kokonaisluku. Oletus: 5	> 0 < 30	Ei
price-min	Vähimmäishinta. Kokonaisluku.	> 0 < price-max (jos annettu)	Ei
price-max	Enimmäishinta. Kokonaisluku.	> 0 > price-min (jos annettu)	Ei
condition	Tuotteen kunto	new tai used	Ei
available	Heti saatavilla. Oletus: false	true tai false	Ei
category	Rajaa haku tiettyyn kategoriaan	weapon, ammunition, optics, apparel, equipment	Ei
style	Tyyli. Katso kuvaus alta.	JSON-objekti	Ei
sources	Pilkuilla eroteltu luettelo haettavien lähteiden nimistä. Oletuksena haetaan kaikista lähteistä.	Ota meihin yhteyttä	Ei
exclude-sources	Pilkuilla eroteltu luettelo niiden lähteiden nimistä, joita ei haeta. Oletuksena haetaan kaikista lähteistä.	Ota meihin yhteyttä	Ei
marketplace	Jos arvo on true, näytetään vain markkinapaikan tulokset. Jos arvo on false, markkinapaikan tuloksia ei näytetä.	true tai false	Ei

Lisää esimerkkejä:
<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>

Tyylit

Jos widgetiä ei haluta tyylitellä CSS-säännöillä, voit muuttaa sen ulkoasua muutamalla yksinkertaisella muuttujalla, jotka välitetään widgetille JSON-objektina.

Muuttuja	Kuvaus	Mahdolliset arvot
fontSize	Perusfonttikoko. Vaikuttaa koko widgetiin.	CSS:n vakiokokoarvot
itemTitleColor	Ilmoituksen otsikon väri	CSS:n vakioväriarvot
itemPriceColor	Ilmoituksen hinnan väri	CSS:n vakioväriarvot
moreColor	"Lisää ilmoituksia" -painikkeen tekstin ja reunuksen väri	CSS:n vakioväriarvot

Esimerkki:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>

Julkaistu 9.9.2019