shopify theeeditor在编辑后未执行javaScript。

Question

我写了一个自定义Shopify部分。该部分包含一个滑块，每个块添加到该部分中会导致在滑块中添加了一个新的幻灯片。

当编辑幻灯片（块）时，滑块应自动滑到所选块以进行适当的预览体验。我为此写了一个JS函数，它的工作原理很好：

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);
  });
} 

但是，当用户编辑幻灯片（块）时，例如颜色选择器中的背景颜色，Shopify会自动重新加载themeeditor中的部分以更新用户的预览。

当Shopify：block：Select事件再次被触发时（我可以在Console.log（）中跟踪“事件”变量），此后，滑块根本不起作用。第一个幻灯片是预览，控件也停止工作。选择不同的幻灯片（块）时，什么也不会发生。

感谢任何帮助。谢谢！

编辑：我现在有一个工作解决方案。但是，这根本不是最佳的，因为我重复代码只是为了使其再次执行。我该怎么避免？有人有建议吗？

$( 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);
  });
} 

}）;

Answer 1

在我看来，问题是关于事件的。

您可以尝试一下：

if (Shopify.designMode) {
  document.addEventListener('shopify:section:load', function(event) {
    /* Do something */
  });
}

如当“添加或重新渲染部分”时，将发射加载事件。每次用户添加幻灯片（重新渲染）时，情况就是这种情况。

请不要使用卸载事件（取决于滑块的工作方式）之前，您可能必须在初始化滑块之前重置/清除函数。