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 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 pour intégrer le widget Gunfinder sur ton propre site. Le processus se déroule en 2 étapes : d'abord, un fichier JavaScript est inclus, puis dans la deuxième étape, un code HTML minimal peut être écrit, qui sera reconnu et traité par le fichier JavaScript.
Inclusion du fichier JavaScript
Le code snippet suivant doit être inclus 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
Une fois le fichier JavaScript inclus, 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 affiche les résultats sur la page. data-gunfinder-search-query est le seul attribut obligatoire. Les autres attributs possibles peuvent être consultés dans le tableau suivant. Tous les attributs doivent recevoir 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 renseigné) |
Non |
price-max |
Prix maximum. Nombre entier. |
> 0 > price-min (si renseigné) |
Non |
condition |
État de l'article |
new ou used |
Non |
available |
Disponible immédiatement. Valeur par défaut : false |
true ou false |
Non |
category |
Limitation de la recherche à une catégorie spécifique |
weapon, ammunition, optics, apparel, equipment |
Non |
style |
Mise en forme. Voir description ci-dessous. |
Objet JSON |
Non |
sources |
Liste de noms de sources à rechercher, séparés par des virgules. Par défaut, toutes les sources sont interrogées. |
Merci de nous contacter |
Non |
exclude-sources |
Liste de noms de sources à ne pas(!) rechercher, séparés par des virgules. Par défaut, toutes les sources sont interrogées. |
Merci de nous contacter |
Non |
marketplace |
Si true, affiche uniquement les résultats de la place de marché. Si false, n'affiche aucun résultat de la place de marché. |
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 mis en forme via des règles CSS, il existe quelques variables simples qui peuvent être transmises au widget sous forme d'objet JSON pour modifier son apparence.
Variable |
Description |
Valeurs possibles |
fontSize |
Taille de police de base. Affecte l'ensemble du 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 & de la bordure 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>