Saltar al contenido principal

Eventos del widget

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

  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.

La lógica vive en widget/src/index-preact.tsx (eventos globales) y widget/src/context/CartContext.tsx (neuroon:cart-update).

Eventos emitidos​

EventoMecanismoDetailCuándo se emite
neuroon-theme-changewindow.dispatchEvent{ theme: 'light' | 'dark', containerId?: string }Cambio de tema (auto-detect del SO o widget.setTheme()).
neuroon-preview-readywindow.parent.postMessage{ type: 'neuroon-preview-ready', containerId }El widget se ha montado dentro de un iframe (uso interno: previews del 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)​

El widget escucha un único evento del host: neuroon:cart-update. El listener (widget/src/context/CartContext.tsx:165-191) ignora event.detail por completo: cuando recibe el evento, llama a config.cart.onGetCart() para leer el carrito desde tu host. Debounce de 300 ms; se ignora si hay operaciones del propio widget en vuelo.

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

Contrato: dispara el evento sin payload — el widget llamará a tu onGetCart(). No envíes datos en event.detail; el listener actual no los lee.

// Correcto — el widget llamará a config.cart.onGetCart() y leerá tu carrito.
window.dispatchEvent(new CustomEvent('neuroon:cart-update'))

Ejemplo: WordPress / 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.

Ejemplo: SPA custom​

// Tu código de carrito mutó el estado — notifica al widget.
window.dispatchEvent(new CustomEvent('neuroon:cart-update'))
// El widget invocará config.cart.onGetCart() para releer.

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)
  // - Custom: invocar tras tu propia mutación de carrito
</script>

Lo que no expone el widget​

A día de hoy el widget no emite estos eventos sobre el window (aunque están declarados como callbacks en NeuroonWidgetConfig.callbacks):

  • onSearch, onResultClick, onFilterChange, onConversion, onError.

Si necesitas reaccionar a clicks de producto, usa el endpoint de tracking POST /api/widget/track/click o consulta los logs server-side.

Próximas lecturas​

Última actualización en