Intégrer Gunfinder sur ton propre site web
Le widget Gunfinder offre aux propriétaires de sites web la possibilité d’afficher les résultats de recherche Gunfinder directement sur leur site. Un bon exemple est l’intégration Gunfinder sur Geartester (tout en bas de la page).
Voici une brève explication pour intégrer le widget Gunfinder sur ton propre site. Le processus se compose essentiellement de 2 étapes : d’abord, on intègre un fichier JavaScript, puis on écrit un code HTML minimal qui sera reconnu et traité par ce fichier JavaScript.
Intégration du fichier JavaScript
Le snippet de code suivant doit être intégré soit dans le head, soit dans le body du document HTML :
<script src="https://widgets.gunfinder.de/js/search.js" async></script>
Placement du snippet HTML
Dès que le fichier JavaScript est intégré, un nouvel élément DIV peut être inséré, qui doit recevoir un attribut nommé data-gunfinder-search-widget pour être reconnu par le code JavaScript. Voici un exemple simple :
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}"></div>
Cela lance une recherche avec le terme {Suchanfrage} sur Gunfinder et les résultats sont affichés sur la page. data-gunfinder-search-query est le seul attribut obligatoire. D’autres attributs possibles sont listés dans le tableau ci-dessous. Tous les attributs doivent avoir le préfixe data-gunfinder-search-.
Attribut |
Description |
Valeurs possibles |
Obligatoire |
query |
Terme de recherche |
Texte |
Oui |
count |
Nombre maximum de résultats. Entier. Par défaut : 5 |
> 0 < 30 |
Non |
price-min |
Prix minimum. Entier. |
> 0 < price-max (si indiqué) |
Non |
price-max |
Prix maximum. Entier. |
> 0 > price-min (si indiqué) |
Non |
condition |
État de l’article |
new ou used |
Non |
available |
Disponible immédiatement. Par défaut : false |
true ou false |
Non |
category |
Limite la recherche à une catégorie spécifique |
weapon, ammunition, optics, apparel, equipment |
Non |
style |
Style. Voir description ci-dessous. |
Objet JSON |
Non |
sources |
Liste séparée par des virgules des noms des sources à rechercher. Par défaut, toutes les sources sont recherchées. |
Merci de nous contacter |
Non |
exclude-sources |
Liste séparée par des virgules des noms des sources à exclure de la recherche. Par défaut, toutes les sources sont recherchées. |
Merci de nous contacter |
Non |
marketplace |
Si true, affiche uniquement les résultats du marketplace. Si false, n’affiche aucun résultat du marketplace. |
true ou false |
Non |
Autres exemples :
<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
Si le widget ne doit pas être stylé via des règles CSS, il existe quelques variables simples qui peuvent être passées au widget sous forme d’objet JSON pour modifier son apparence.
Variable |
Description |
Valeurs possibles |
fontSize |
Taille de police de base. Impacte tout le widget. |
Valeurs CSS standard pour les tailles |
itemTitleColor |
Couleur du titre de l’annonce |
Valeurs CSS standard pour les couleurs |
itemPriceColor |
Couleur du prix de l’annonce |
Valeurs CSS standard pour les couleurs |
moreColor |
Couleur du texte et du cadre du bouton « autres annonces » |
Valeurs CSS standard pour les couleurs |
Exemple :
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>