Integrare Gunfinder sul proprio sito web
Il widget di Gunfinder offre ai gestori di siti web la possibilità di mostrare i risultati di ricerca di 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 di Gunfinder nel proprio sito web. In sostanza il processo si compone di 2 passaggi: prima viene incluso un file JavaScript e nel secondo passaggio si può scrivere del codice HTML minimale, che viene riconosciuto ed elaborato dal file JavaScript.
Incorporare il file JavaScript
Il seguente frammento di codice deve essere incluso nell'head o nel body del documento HTML:
<script src="https://widgets.gunfinder.de/js/search.js" async></script>
Inserimento dello snippet HTML
Una volta incluso il file JavaScript, è possibile inserire un nuovo elemento DIV che deve ricevere un attributo denominato data-gunfinder-search-widget affinché venga riconosciuto dal codice JavaScript. Ecco un esempio semplice:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}"></div>
In questo modo viene avviata una ricerca con il termine {Suchanfrage} su Gunfinder e i risultati vengono visualizzati nella pagina. data-gunfinder-search-query è l'unico attributo obbligatorio. Gli ulteriori attributi disponibili sono elencati nella tabella seguente. Tutti gli attributi devono avere come prefisso data-gunfinder-search-.
Attributo |
Descrizione |
Valori possibili |
Obbligatorio |
query |
Termine di ricerca |
Testo |
Sì |
count |
Numero massimo di risultati. Numero intero. Predefinito: 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. Predefinito: false |
true o false |
No |
category |
Limita la ricerca a una categoria specifica |
weapon, ammunition, optics, apparel, equipment |
No |
style |
Stile grafico. Vedi descrizione più in basso. |
Oggetto JSON |
No |
sources |
Elenco separato da virgole con i nomi delle sorgenti da includere nella ricerca. Per impostazione predefinita vengono cercate tutte le sorgenti. |
Per favore contattaci |
No |
exclude-sources |
Elenco separato da virgole con i nomi delle sorgenti da escludere dalla ricerca. Per impostazione predefinita vengono cercate tutte le sorgenti. |
Per favore contattaci |
No |
marketplace |
Se true, mostra solo i risultati del marketplace. Se false, non mostra alcun risultato del marketplace. |
true o false |
No |
Altri esempi:
<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
Se il widget non deve essere stilizzato tramite regole CSS, esistono alcune semplici variabili che possono essere passate al widget come oggetto JSON per modificarne l'aspetto.
Variabile |
Descrizione |
Valori possibili |
fontSize |
Dimensione del carattere di base. Influisce sull'intero 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 "altre offerte" |
Valori CSS standard per i colori |
Esempio:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>