Eventos JavaScript

Usa esta página cuando necesites comportamiento más allá de los ajustes del editor de temas pero quieras personalización segura ante actualizaciones.

Estrategia de eventos

• Escucha eventos del ciclo de vida existentes antes de mutar el DOM directamente.
• Mantén los listeners idempotentes para que las secciones re-renderizadas por Shopify no dupliquen manejadores.
• Encapsula el comportamiento en envoltorios de sección con atributos data-.

Ganchos habituales

• Medios del producto y cambios de variante en assets/theme.js
• Apertura/cierre del carrito lateral y actualizaciones de líneas
• Eventos de paginación de colección (cargar más e infinito)
• Clics de navegación: studioarcana:navigation (detail: type, label, parent, href, text) y dataLayer sa_navigation_click
• Evento de finalización del quiz: studio-arcana:quiz:complete (respuestas, scoreMap, resolvedProfileKey, recommendation con staffId opcional)
• hollow-reserve:open — se dispara al pulsar controles data-hr-reserve-staff (equipo de especialistas, menú de servicios, CTA de resultado del quiz)
• Eventos analíticos del lookbook: studio-arcana:lookbook:look-click, studio-arcana:lookbook:product-click, studio-arcana:lookbook:filter, studio-arcana:lookbook:load-more y studio-arcana:lookbook:quick-add

Lista de implementación

1. Escucha en una sola función de arranque.
2. Protege por nodos ausentes.
3. Re-enlaza tras respuestas de la Section Rendering API.
4. Fallar en silencio si el comerciante no tiene la sección opcional activa.