Integra Gunfinder en tu propia página web
El widget de Gunfinder ofrece a los propietarios de sitios web la posibilidad de mostrar resultados de búsqueda de Gunfinder en su propio sitio web. 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 propio sitio web. En esencia, 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 el archivo JavaScript reconoce y procesa.
Incluir el archivo JavaScript
El siguiente fragmento de código debe incluirse en el head o en el body del documento HTML:
<script src="https://widgets.gunfinder.de/js/search.js" async></script>
Colocar el fragmento HTML
Una vez incluido el archivo JavaScript, se puede insertar un nuevo elemento DIV que debe tener un atributo llamado data-gunfinder-search-widget para que el código JavaScript lo reconozca. Aquí tienes un ejemplo sencillo:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}"></div>
Esto inicia una búsqueda con el término {Suchanfrage} en Gunfinder y los resultados se muestran en la página. data-gunfinder-search-query es el único atributo obligatorio. Los demás atributos disponibles se pueden consultar en la siguiente tabla. Todos los atributos deben llevar 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 predeterminado: 5 |
> 0 < 30 |
No |
price-min |
Precio mínimo. Número entero. |
> 0 < price-max (si se indica) |
No |
price-max |
Precio máximo. Número entero. |
> 0 > price-min (si se indica) |
No |
condition |
Estado del artículo |
new o used |
No |
available |
Disponible de inmediato. Valor predeterminado: false |
true o false |
No |
category |
Limita 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 contáctanos |
No |
exclude-sources |
Lista separada por comas con los nombres de las fuentes que no(!) deben buscarse. Por defecto se buscan todas las fuentes. |
Por favor contáctanos |
No |
marketplace |
Si es true, muestra solo resultados del marketplace. Si es false, no muestra resultados del marketplace. |
true o 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>
Styling
Si no se quiere aplicar estilos al widget mediante reglas CSS, existen algunas variables sencillas que se pueden pasar al widget como objeto JSON para modificar su apariencia.
Variable |
Descripción |
Valores posibles |
fontSize |
Tamaño de fuente base. Afecta a todo el widget. |
Valores CSS estándar para tamaños |
itemTitleColor |
Color del título de la oferta |
Valores CSS estándar para colores |
itemPriceColor |
Color del precio de la oferta |
Valores CSS estándar para colores |
moreColor |
Color de texto y 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>