Integrar Gunfinder en tu propia página web
El widget de Gunfinder ofrece a los propietarios de páginas web la posibilidad de mostrar resultados de búsqueda de Gunfinder en su propio sitio. Un buen ejemplo es la integración de Gunfinder en Geartester (al final de la página).
A continuación se explica brevemente cómo integrar el widget de Gunfinder en tu propia web. Básicamente, el proceso consta de 2 pasos: primero se incluye un archivo JavaScript y en el segundo paso se escribe un código HTML mínimo que es reconocido y procesado por el archivo JavaScript.
Incluir el archivo JavaScript
El siguiente fragmento de código debe incluirse en el head o body del documento HTML:
<script src="https://widgets.gunfinder.de/js/search.js" async></script>
Colocación del fragmento HTML
Una vez que el archivo JavaScript esté incluido, se puede insertar un nuevo elemento DIV que debe tener un atributo llamado data-gunfinder-search-widget para que sea reconocido por el código JavaScript. Aquí tienes un ejemplo simple:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}"></div>
Esto iniciará una búsqueda con el término {Suchanfrage} en Gunfinder y mostrará los resultados en la página. data-gunfinder-search-query es el único atributo obligatorio. Otros posibles atributos se pueden consultar en la siguiente tabla. Todos los atributos deben tener el prefijo data-gunfinder-search-.
Atributo |
Descripción |
Valores posibles |
Obligatorio |
query |
Consulta de búsqueda |
Texto |
Sí |
count |
Número máximo de resultados. Número entero. Valor por defecto: 5 |
> 0 < 30 |
No |
price-min |
Precio mínimo. Número entero. |
> 0 < price-max (si se especifica) |
No |
price-max |
Precio máximo. Número entero. |
> 0 > price-min (si se especifica) |
No |
condition |
Estado del artículo |
new o used |
No |
available |
Disponible inmediatamente. Valor por defecto: false |
true o false |
No |
category |
Limitar la búsqueda a una categoría específica |
weapon, ammunition, optics, apparel, equipment |
No |
style |
Estilo. Ver descripción más abajo. |
Objeto JSON |
No |
sources |
Lista separada por comas con los nombres de las fuentes que se deben buscar. Por defecto se buscan todas las fuentes. |
Por favor contacta con nosotros |
No |
exclude-sources |
Lista separada por comas con los nombres de las fuentes que no(!) se deben buscar. Por defecto se buscan todas las fuentes. |
Por favor contacta con nosotros |
No |
marketplace |
Si es true, solo muestra resultados del marketplace. Si es false, no muestra resultados del marketplace. |
true oder false |
No |
Más ejemplos:
<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>
Estilo
Si el widget no debe ser estilizado mediante reglas CSS, hay algunas variables simples que se pueden pasar como objeto JSON al widget para cambiar su apariencia.
Variable |
Descripción |
Valores posibles |
fontSize |
Tamaño básico de la fuente. Afecta a todo el widget. |
Valores CSS estándar para tamaños |
itemTitleColor |
Color del título del anuncio |
Valores CSS estándar para colores |
itemPriceColor |
Color del precio del anuncio |
Valores CSS estándar para colores |
moreColor |
Color del texto y del borde del botón "más ofertas" |
Valores CSS estándar para colores |
Ejemplo:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>