Le widget Gunfinder offre aux opérateurs de sites web la possibilité d'afficher les résultats de recherche Gunfinder sur leur propre site. Un bon exemple est l'intégration de Gunfinder sur Geartester (tout en bas de la page).
Voici une brève explication sur la façon d'intégrer le widget Gunfinder sur son propre site. En gros, le processus se compose de 2 étapes : tout d'abord, un fichier JavaScript est intégré, puis dans un deuxième temps, un code HTML minimal peut être écrit, qui sera reconnu et traité par le fichier JavaScript.
Intégration du fichier JavaScript
Le 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 de l'extrait HTML
Dès que le fichier JavaScript est inclus, un nouvel élément DIV peut être inséré, qui doit avoir 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="{requête}"></div>
Cela lancera une recherche avec le terme {requête} sur Gunfinder et les résultats seront affichés sur la page. data-gunfinder-search-query est le seul attribut obligatoire. D'autres attributs possibles peuvent être trouvés dans le tableau suivant. Tous les attributs doivent avoir le préfixe data-gunfinder-search-.
Attribut | Description | Valeurs possibles | Obligatoire |
query | Requête de recherche | Texte | Oui |
count | Nombre maximum de résultats. Nombre entier. Valeur par défaut : 5 | > 0 < 30 | Non |
price-min | Prix minimum. Nombre entier. | > 0 < price-max (si spécifié) | Non |
price-max | Prix maximum. Nombre entier. | > 0 > price-min (si spécifié) | Non |
condition | État de l'article | new ou used | Non |
available | Disponible immédiatement. Valeur par défaut : false | true ou false | Non |
category | Limiter la recherche à une catégorie spécifique | weapon, ammunition, optics, apparel, equipment | Non |
style | Style. Voir la description ci-dessous. | Objet JSON | Non |
sources | Liste séparée par des virgules avec les noms des sources à rechercher. Par défaut, toutes les sources sont recherchées. | Veuillez nous contacter | Non |
exclude-sources | Liste séparée par des virgules avec les noms des sources à ne pas rechercher (!). Par défaut, toutes les sources sont recherchées. | Veuillez nous contacter | Non |
marketplace | Si true, n'affiche que les résultats du marché. Si false, n'affiche aucun résultat du marché. | true ou false | Non |
Autres exemples :
<div data-gunfinder-search-widget data-gunfinder-search-query="{requête}" data-gunfinder-search-price-min="2500"></div>
<div data-gunfinder-search-widget data-gunfinder-search-query="{requête}" data-gunfinder-search-available="true"></div>
Style
Si le widget ne doit pas être stylisé par des règles CSS, il existe quelques variables simples qui peuvent être passées au widget sous forme d'objet JSON pour modifier l'apparence du widget.
Variable | Description | Valeurs possibles |
fontSize | Taille de police de base. A un impact sur l'ensemble du widget. | Valeurs CSS standard pour les tailles |
itemTitleColor | Couleur du titre de l'offre | Valeurs CSS standard pour les couleurs |
itemPriceColor | Couleur du prix de l'offre | Valeurs CSS standard pour les couleurs |
moreColor | Couleur du texte et du cadre du bouton "autres offres" | Valeurs CSS standard pour les couleurs |
Exemple :
<div data-gunfinder-search-widget data-gunfinder-search-query="{requête}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>