Saltar al contenido principal

JavaScript API

Controla el widget programáticamente mediante su API de JavaScript.

Inicialización​

const widget = NeuroonWidget.init({
  container: '#neuroon-search',
  token: 'YOUR_TOKEN',
  // ... opciones
});

Métodos​

search(query)​

Ejecuta una búsqueda programáticamente.

widget.search('zapatillas running');

setFilters(filters)​

Aplica filtros a la búsqueda actual.

widget.setFilters({
  categories: ['deportes'],
  brands: ['Nike', 'Adidas'],
  priceMin: 50,
  priceMax: 200,
  inStock: true,
});

clearFilters()​

Elimina todos los filtros aplicados.

widget.clearFilters();

open()​

Abre el modal de búsqueda (si está configurado como overlay).

widget.open();

close()​

Cierra el modal de búsqueda.

widget.close();

destroy()​

Destruye la instancia del widget y limpia el DOM.

widget.destroy();

Propiedades​

isOpen​

Estado del modal (solo lectura).

if (widget.isOpen) {
  console.log('El widget está abierto');
}

currentQuery​

Query de búsqueda actual (solo lectura).

console.log('Búsqueda actual:', widget.currentQuery);

Eventos globales​

El widget emite eventos en el objeto window:

window.addEventListener('neuroon:search', (event) => {
  console.log('Búsqueda:', event.detail.query);
  console.log('Resultados:', event.detail.results.length);
});

window.addEventListener('neuroon:click', (event) => {
  console.log('Producto clickeado:', event.detail.product);
});

window.addEventListener('neuroon:error', (event) => {
  console.error('Error:', event.detail.error);
});

Ejemplo: Integración con Analytics​

const widget = NeuroonWidget.init({
  container: '#neuroon-search',
  token: 'YOUR_TOKEN',
  callbacks: {
    onSearch: (query, results) => {
      // Google Analytics 4
      gtag('event', 'search', {
        search_term: query,
        results_count: results.length,
      });
    },
    onResultClick: (product) => {
      // Google Analytics 4
      gtag('event', 'select_item', {
        item_list_name: 'search_results',
        items: [{
          item_id: product.id,
          item_name: product.name,
          price: product.price,
        }],
      });
    },
  },
});

Ejemplo: Búsqueda desde otro elemento​

<input type="text" id="custom-search" placeholder="Buscar...">
<button id="search-btn">Buscar</button>

<script>
const widget = NeuroonWidget.init({ /* config */ });

document.getElementById('search-btn').addEventListener('click', () => {
  const query = document.getElementById('custom-search').value;
  widget.search(query);
  widget.open();
});
</script>