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 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​

EventoDispatcherDetailCuándo se emite
neuroon-theme-changewindow.dispatchEvent{ theme: 'light' | 'dark', containerId: string }Cambia el tema (auto detect del SO o llamada explícita).
neuroon-preview-readywindow.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)​

EventoDónde se emiteDetail / payloadAcción
neuroon:cart-updatewindow.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.typePayload adicionalAcció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.
  • Solo se procesan los tipos listados arriba. Cualquier otro type se ignora.
  • 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é más expone el widget?​

Además de los CustomEvents, el widget acepta callbacks en NeuroonWidget.init(): onSearch, onResultClick, onFilterChange, onError, onTokenExpiring y onTokenRefreshed. Ver Configuración para el listado completo.

Próximas lecturas​

Última actualización en