Integrare Gunfinder nel proprio sito web
Il widget Gunfinder offre ai gestori di siti web la possibilità di mostrare i risultati di ricerca Gunfinder direttamente sul proprio sito. Un buon esempio è l’integrazione Gunfinder su Geartester (in fondo alla pagina).
Di seguito viene spiegato brevemente come integrare il widget Gunfinder sul proprio sito web. Fondamentalmente il processo si compone di 2 passaggi: prima si include un file JavaScript e poi si scrive un codice HTML minimo che viene riconosciuto e gestito dal file JavaScript.
Incorporare il file JavaScript
Il seguente snippet di codice deve essere inserito nell'head o nel body del documento HTML:
<script src="https://widgets.gunfinder.de/js/search.js" async></script>
Posizionamento dello snippet HTML
Una volta inclusa la libreria JavaScript, puoi 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>
Questo avvia una ricerca con il termine {Suchanfrage} su Gunfinder e mostra i risultati nella pagina. data-gunfinder-search-query è l’unico attributo obbligatorio. Altri attributi possibili sono elencati 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. Default: 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 oppure used |
No |
available |
Disponibile subito. Default: false |
true oppure false |
No |
category |
Limita la ricerca a una categoria specifica |
weapon, ammunition, optics, apparel, equipment |
No |
style |
Stile. Vedi descrizione più sotto. |
Oggetto JSON |
No |
sources |
Lista separata da virgole con i nomi delle fonti da cercare. Di default vengono cercate tutte le fonti. |
Per favore contattaci |
No |
exclude-sources |
Lista separata da virgole con i nomi delle fonti da escludere dalla ricerca. Di default vengono cercate tutte le fonti. |
Per favore contattaci |
No |
marketplace |
Se true, mostra solo risultati dal marketplace. Se false, non mostra risultati dal 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, ci sono alcune variabili semplici che possono essere passate al widget come oggetto JSON per modificare l’aspetto del widget.
Variabile |
Descrizione |
Valori possibili |
fontSize |
Dimensione base del font. Influisce su tutto il widget. |
Valori CSS standard per dimensioni |
itemTitleColor |
Colore del titolo dell’annuncio |
Valori CSS standard per colori |
itemPriceColor |
Colore del prezzo dell’annuncio |
Valori CSS standard per colori |
moreColor |
Colore del testo e del bordo del pulsante "altre offerte" |
Valori CSS standard per colori |
Esempio:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>