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 alalaidassa).
Seuraavaksi kerrotaan lyhyesti, miten voit lisätä Gunfinder-widgetin omalle verkkosivustollesi. Prosessi koostuu kahdesta vaiheesta: ensin lisätään JavaScript-tiedosto, minkä jälkeen kirjoitetaan pieni määrä HTML-koodia, jonka JavaScript-tiedosto tunnistaa ja käsittelee.
JavaScript-tiedoston upottaminen
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, jolle on annettava data-gunfinder-search-widget-niminen attribuutti, 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. Oletusarvo: 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 toimitettavissa. Oletusarvo: false |
true tai false |
Ei |
category |
Rajaa haku tiettyyn kategoriaan |
weapon, ammunition, optics, apparel, equipment |
Ei |
style |
Tyylin määritys. Katso kuvaus alempaa. |
JSON-objekti |
Ei |
sources |
Pilkulla erotettu luettelo haettavien lähteiden nimistä. Oletusarvoisesti haetaan kaikista lähteistä. |
Ole hyvä ja ota meihin yhteyttä |
Ei |
exclude-sources |
Pilkulla erotettu luettelo niiden lähteiden nimistä, joita EI haeta. Oletusarvoisesti haetaan kaikista lähteistä. |
Ole hyvä ja 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 widgetin tyyliä ei haluta määrittää 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>