El widget Gunfinder ofrece a los operadores 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 explicará brevemente cómo se puede integrar el widget Gunfinder en su propio sitio web. En esencia, el proceso consta de 2 pasos: primero se incluye un archivo JavaScript y en el segundo paso se puede escribir un código HTML mínimo que será reconocido y procesado por el archivo JavaScript.
Incorporación del archivo JavaScript
El siguiente fragmento de código debe ser incluido ya sea en el Head o en el 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á vinculado, 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í hay un ejemplo simple:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Consulta}"></div>
Esto iniciará una búsqueda con el término {Consulta} en Gunfinder y los resultados se mostrarán en la página. data-gunfinder-search-query es el único atributo obligatorio. Otros atributos posibles se pueden encontrar 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 predeterminado: 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 | nuevo o usado | No |
| available | Disponible inmediatamente. Valor predeterminado: false | true o false | No |
| category | Limitación de la búsqueda a una categoría específica | arma, munición, óptica, ropa, equipo | 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 se deben buscar. Por defecto, se buscan todas las fuentes. | Por favor contáctanos | No |
| marketplace | Si es true, solo muestra resultados del mercado. Si es false, no muestra resultados del mercado. | true o false | No |
Más ejemplos:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Consulta}" data-gunfinder-search-price-min="2500"></div>
<div data-gunfinder-search-widget data-gunfinder-search-query="{Consulta}" 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 al widget como un objeto JSON para cambiar la apariencia del widget.
| Variable | Descripción | Valores posibles |
| fontSize | Tamaño de fuente básico. 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 del texto y del marco del botón "más ofertas" | Valores CSS estándar para colores |
Ejemplo:
<div data-gunfinder-search-widget data-gunfinder-search-query="{consulta}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>
Kleinanzeige
