Integrare Gunfinder sul proprio sito web
Il widget Gunfinder offre ai gestori di siti web la possibilità di visualizzare 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 Gunfinder nel proprio sito web. Il processo si compone essenzialmente di 2 passaggi: nel primo viene incluso un file JavaScript, nel secondo si scrive del codice HTML minimale che viene riconosciuto ed elaborato dal file JavaScript.
Inclusione del file JavaScript
Il seguente snippet 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 avere un attributo chiamato 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 riportati nella tabella seguente. Tutti gli attributi devono avere il prefisso data-gunfinder-search-.
Attributo |
Descrizione |
Valori possibili |
Obbligatorio |
query |
Termine di ricerca |
Testo |
Sì |
count |
Numero massimo di risultati. Numero intero. Valore 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. Valore 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ù avanti. |
Oggetto JSON |
No |
sources |
Elenco separato da virgole con i nomi delle sorgenti da includere nella ricerca. Per impostazione predefinita vengono incluse 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 incluse tutte le sorgenti. |
Per favore contattaci |
No |
marketplace |
Se true, mostra solo i risultati del marketplace. Se false, non mostra i risultati del marketplace. |
true o false |
No |
Ulteriori 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 non si desidera applicare stili tramite regole CSS, sono disponibili 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>