Il widget Gunfinder offre agli operatori di siti web la possibilità di visualizzare risultati di ricerca Gunfinder sul proprio sito. Un buon esempio è l'integrazione di Gunfinder su Geartester (in fondo alla pagina).
Di seguito viene spiegato brevemente come integrare il widget Gunfinder sul proprio sito. In sostanza, il processo consiste in 2 passaggi: per prima cosa si integra un file JavaScript e nel secondo passaggio si può scrivere un codice HTML minimale, che verrà riconosciuto e elaborato dal file JavaScript.
Incorporare il file JavaScript
Il seguente frammento di codice deve essere incorporato nel Head o nel Body del documento HTML:
<script src="https://widgets.gunfinder.de/js/search.js" async></script>
Posizionamento dello snippet HTML
Una volta che il file JavaScript è stato incluso, è possibile inserire un nuovo elemento DIV che deve avere un attributo con il nome data-gunfinder-search-widget affinché venga riconosciuto dal codice JavaScript. Ecco un semplice esempio:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Richiesta di ricerca}"></div>
Questo avvia una ricerca con il termine {Richiesta di ricerca} su Gunfinder e i risultati vengono visualizzati sulla pagina. data-gunfinder-search-query è l'unico attributo obbligatorio. Ulteriori attributi possibili possono essere trovati nella tabella seguente. Tutti gli attributi devono avere il prefisso data-gunfinder-search-.
Attributo | Descrizione | Valori possibili | Obbligatorio |
query | Richiesta di ricerca | Testo | Sì |
count | Numero massimo di risultati. Numero intero. Impostazione predefinita: 5 | > 0 < 30 | No |
price-min | Prezzo minimo. Numero intero. | > 0 < price-max (se specificato) | No |
price-max | Prezzo massimo. Numero intero. | > 0 > price-min (se specificato) | No |
condition | Condizione dell'articolo | new o used | No |
available | Disponibile immediatamente. Impostazione predefinita: false | true o false | No |
category | Limitazione della ricerca a una categoria specifica | weapon, ammunition, optics, apparel, equipment | No |
style | Stile. Vedi descrizione qui sotto. | Oggetto JSON | No |
sources | Elenco separato da virgole con i nomi delle fonti da cercare. Per impostazione predefinita, vengono cercate tutte le fonti. | Per favore contattaci | No |
exclude-sources | Elenco separato da virgole con i nomi delle fonti che non devono essere cercate(!). Per impostazione predefinita, vengono cercate tutte le fonti. | Per favore contattaci | No |
marketplace | Se true, mostra solo i risultati del marketplace. Se false, non mostra risultati del marketplace. | true o false | No |
Ulteriori esempi:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Richiesta di ricerca}" data-gunfinder-search-price-min="2500"></div>
<div data-gunfinder-search-widget data-gunfinder-search-query="{Richiesta di ricerca}" data-gunfinder-search-available="true"></div>
Stile
Se il widget non deve essere stilizzato tramite regole CSS, ci sono alcune semplici variabili che possono essere passate al widget come oggetto JSON per modificare l'aspetto del widget.
Variabile | Descrizione | Valori possibili |
fontSize | Dimensione del font di base. Influisce su tutto il widget. | Valori CSS standard per le dimensioni |
itemTitleColor | Colore del titolo dell'offerta | Valori CSS standard per i colori |
itemPriceColor | Colore del prezzo dell'offerta | Valori CSS standard per i colori |
moreColor | Colore del testo e del bordo del pulsante "ulteriori offerte" | Valori CSS standard per i colori |
Esempio:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Richiesta}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>