Escribí una sección personalizada de Shopify. La sección contiene un control deslizante, y cada bloque agregado a la sección da como resultado una nueva diapositiva agregada al control deslizante.

Al editar diapositivas (bloques), el control deslizante debería deslizarse automáticamente al bloque seleccionado para una experiencia de vista previa adecuada. Escribí una función js para eso, que funciona perfectamente bien:

 if (Shopify.designMode) { document.addEventListener('shopify:block:select', function(event) { const sectionSelectedIsHero = event.target.classList.contains('hero-slide'); if(!sectionSelectedIsHero) return; var selectedSlideId = $(event.target).attr("data-slide-id"); heroCarousel.to(selectedSlideId); }); }

Sin embargo, cuando un usuario edita una diapositiva (bloque), por ejemplo, el color de fondo en un selector de color, Shopify vuelve a cargar automáticamente la sección en ThemeEditor para actualizar la vista previa para el usuario.

Mientras que el evento shopify:block:select se activa nuevamente (puedo rastrear la variable "evento" en console.log()), el control deslizante no funciona en absoluto después de eso. La primera diapositiva está en vista previa y los controles también dejan de funcionar. Al seleccionar diferentes diapositivas (bloques), no pasa nada.

Agradezco cualquier ayuda. ¡Gracias!

EDITAR: ahora tengo una solución de trabajo. Sin embargo, esto no es óptimo en absoluto, ya que estoy repitiendo el código solo para que se ejecute nuevamente. ¿Cómo puedo evitar eso? alguien tiene una sugerencia?

 $( document ).ready(function() { var heroCarouselElement = document.querySelector('#heroCarousel'); var heroCarousel = new bootstrap.Carousel(heroCarouselElement, { interval: false, keyboard: false, wrap: true, touch: true }); $("#heroControlPrev").click(function() { heroCarousel.prev(); }); $("#heroControlNext").click(function() { heroCarousel.next(); }); if (Shopify.designMode) { document.addEventListener('shopify:block:select', function(event) { const sectionSelectedIsHero = event.target.classList.contains('hero-slide'); if(!sectionSelectedIsHero) return; var selectedSlideId = $(event.target).attr("data-slide-id"); var heroCarouselElement = document.querySelector('#heroCarousel'); var heroCarousel = new bootstrap.Carousel(heroCarouselElement, { interval: false, keyboard: false, wrap: true, touch: true }); $("#heroControlPrev").click(function() { heroCarousel.prev(); }); $("#heroControlNext").click(function() { heroCarousel.next(); }); heroCarousel.to(selectedSlideId); }); }

});