Eventos del widget

El widget no expone callbacks JavaScript públicos para reaccionar a búsquedas o clicks; en su lugar, expone tres canales:

1. CustomEvent emitidos sobre window para que el host se suscriba.
2. CustomEvent escuchados sobre window, que el host puede emitir para alimentar al widget.
3. postMessage entrante para entornos iframe (admin de WordPress, previews).

Eventos emitidos

Evento	Dispatcher	Detail	Cuándo se emite
neuroon-theme-change	window.dispatchEvent	{ theme: 'light' | 'dark', containerId: string }	Cambia el tema (auto detect del SO o llamada explícita).
neuroon-preview-ready	window.parent.postMessage	{ type: 'neuroon-preview-ready', containerId }	El widget está embebido en un iframe (previews admin). Sólo se envía si window.parent !== window.

Ejemplo: reaccionar al cambio de tema

window.addEventListener('neuroon-theme-change', (e) => {
  console.log('Widget cambió a tema', e.detail.theme, 'en', e.detail.containerId)
  // Ej: sincronizar el tema del header de tu tienda
  document.documentElement.dataset.theme = e.detail.theme
})

Eventos escuchados (host → widget)

Evento	Dónde se emite	Detail / payload	Acción
neuroon:cart-update	window.dispatchEvent desde el host (WP, Shopify, custom)	CustomEvent (sin detail; el handler lee el carrito vía cart.onGetCart)	El widget llama a config.cart.onGetCart, debounced 300 ms, salvo que haya operaciones del propio widget en vuelo.

El nombre del evento de carrito es configurable vía cart.externalUpdateEvent (default neuroon:cart-update).

Ejemplo: actualizar el widget tras añadir al carrito en WooCommerce

jQuery(document.body).on('added_to_cart wc_fragments_refreshed removed_from_cart', () => {
  window.dispatchEvent(new CustomEvent('neuroon:cart-update'))
})

El plugin oficial de WordPress ya wirea este puente automáticamente en su loader inline; ver Plugins → WordPress.

postMessage entrante

El widget escucha message sobre window y procesa eventos cuyo data.type empieza por neuroon: o neuroon-. Esto está pensado para que un panel admin embebido en iframe pueda controlar el widget en preview.

data.type	Payload adicional	Acción
neuroon:setStyles	{ styles: StyleOverrides | ThemedStyleOverrides; theme?: 'light' | 'dark' }	Re-inyecta los estilos en el Shadow DOM.
neuroon-styles-update	(alias legacy de neuroon:setStyles para compatibilidad con el preview de WP)	igual
neuroon:setTheme	{ theme: 'light' | 'dark' | 'auto' }	Cambia el tema activo en todas las instancias o, si se pasa containerId, sólo en una.

Manejados.

Seguridad

• Los mensajes con event.origin === 'null' (iframes sandboxed) se rechazan.
• Sólo se procesan tipos neuroon:* o neuroon-* reconocidos. El resto se ignora silenciosamente.
• Los mensajes pueden incluir containerId opcional para apuntar a una instancia concreta. Si se omite, se aplica a todas las instancias.

Ejemplo: cambiar tema desde un admin iframe

// En el iframe del admin
window.parent.document.querySelector('iframe.neuroon-preview')
  .contentWindow.postMessage({
    type: 'neuroon:setTheme',
    theme: 'dark',
    containerId: 'neuroon-search',
  }, '*')

Snippet completo: listener desde el host

<script>
  // Tema
  window.addEventListener('neuroon-theme-change', (e) => {
    console.log('[host] tema:', e.detail.theme)
  })

  // Tu host emite cart-update tras cualquier mutación de carrito
  function notifyNeuroonCart() {
    window.dispatchEvent(new CustomEvent('neuroon:cart-update'))
  }

  // Hook para tu plataforma:
  // - WooCommerce: jQuery(document.body).on('added_to_cart …', notifyNeuroonCart)
  // - Shopify Liquid: window.addEventListener('cart:updated', notifyNeuroonCart)
  // - Custom: invocar tras tu propia mutación de carrito
</script>

¿Qué no expone el widget?

El widget no expone callbacks públicos para search, result-click, filter-change, conversion ni error. Solo hay callbacks para gestión del Widget Token (onTokenExpiring, onTokenRefreshed).

Si necesitas medir clicks de producto u otra actividad de búsqueda, el widget reporta tracking automáticamente al backend; las métricas las consultas vía Dashboard. No hay punto de extensión JavaScript.

Próximas lecturas

• Reference → Bus de eventos — tabla exhaustiva con schemas de payload.
• Integración de carrito — flujo completo del puente cart-update.
• Theming — uso del setTheme/setStyles desde el host.