A-TEC
AEA Airguns
AKAH
ASG
Aimpoint
Alpen Optics
Alpha Industries
Anschütz
Antonio Zoli
Ares
B&T Schalldämpfer
Baikal
Ballistol
Balzer
Barbour
Barnes
Barnett
Benelli
Beretta
Bergara
Blaser
Brandit
Bremer Tresor
Brenneke
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).
Nous allons maintenant expliquer brièvement comment intégrer le widget Gunfinder sur ton propre site. Le processus se compose essentiellement de 2 étapes : d'abord, un fichier JavaScript est inclus, puis dans la deuxième étape, on peut écrire un code HTML minimal qui sera reconnu et traité par le 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
Une fois le fichier JavaScript inclus, vous pouvez insérer un nouvel élément DIV 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 sont répertoriés dans le tableau ci-dessous. 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 |
Limite la recherche à une catégorie spécifique |
weapon, ammunition, optics, apparel, equipment |
Non |
style |
Style visuel. Voir description ci-dessous. |
Objet JSON |
Non |
sources |
Liste séparée par des virgules des noms des sources à inclure dans la recherche. 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 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 stylisé via des règles CSS, il existe quelques variables simples qui peuvent être transmises au widget sous forme d'objet JSON afin de 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>
