Shopify Liquid 文件中的部分加載事件 (Shopify)

Question

我是 Shopify 開發者。 我在 Shopify 中使用 Flickity 庫設計了一個幻燈片。我的 slider 在加載時在 URL 上工作正常，但它在 Shopify 主題編輯器上不起作用，直到我沒有保存設計。 保存后設計工作正常。

我在節文件中使用這個腳本它不起作用但是當我將這個代碼粘貼到 theme.liquid 文件中時它在兩邊都工作正常。

我不想喜歡這個圖片

<script>
  {% if request.design_mode %}
        console.log("123");
        document.addEventListener("shopify:section:load", function() {
        console.log("abc");
        var elem = document.querySelector('.carousel');
            var flkty = new Flickity( elem, {
                autoPlay: "{{ section.settings.autoplay_slide }}", 
                pageDots: true, 
                contain: true, 
                wrapAround: false, 
                imagesLoaded: true, 
                accessibility: false
            });
        });
      {% endif %}
</script>

我想，當我 select 來自主題編輯器的部分時，它工作順利。

我想要這個圖片

Answer 1

不要使用僅在主題編輯器內部觸發的shopify:section:load （這就是為什么您不能在主題編輯器之外使用它的原因），您應該在您的部分代碼末尾包含此<script>標記並將其更改為少量：

<script>
  {% if request.design_mode %}
        console.log("123");
        let flkty; // for later use
        document.addEventListener("DOMContentLoaded", function() { // run this script after window is ready and scripts are loaded
            console.log("abc");
            var elem = document.querySelector('.carousel');
            if (elem) { // check if element was found before using it
                 flkty = new Flickity( elem, {
                    autoPlay: "{{ section.settings.autoplay_slide }}", 
                    pageDots: true, 
                    contain: true, 
                    wrapAround: false, 
                    imagesLoaded: true, 
                    accessibility: false
                 });
             }
        });
      {% endif %}
</script>