编辑后 Shopify 部分没有运行 javascript

Question

我写了一个自定义的 Shopify 部分。它包含 javascript 需要在页面加载时执行的代码，因为它会执行一些 DOM 操作。

我注意到，如果我在 Shopify 编辑器中更改部分设置，javascript 不会再次执行（Shopify 编辑器将部分 DOM 节点替换为具有更新值的节点）。这意味着 JS 生成的 DOM 个节点丢失了。

以下代码应演示此行为。在初始加载期间，您会在控制台中看到一个 hi。但是，如果您在编辑器中更改 title_text 的值，您会在页面中看到更新后的文本，但在控制台中您看不到从 JS 记录的新 hi。在我看来应该是二喜吧

有谁知道我做错了什么吗？

{{ section.settings.title_text }}
<script>
  console.log("hi");
</script>

{% schema %}
{
  "name": {
    "de": "Test",
    "en": "Test"
  },
  "settings": [
    {
      "type": "text",
      "id": "title_text"
      "label": "Text",
      "default": "Text"
    }
  ],
  "presets": [
  {
    "name": {
      "de": "Test",
      "en": "Test"
    },
    "category": {
      "de": "Test",
      "en": "Test"
    }
  }
]
}
{% endschema %}

Answer 1

您没有做错任何事，当您从自定义面板编辑它时，Shopify 会刷新 DOM，但不会刷新 Javascript。

为了重新初始化您的 javascript 逻辑，您需要挂钩事件 shopify:section:load。每次修改都会触发此事件。

例如，您需要执行以下操作：

document.addEventListener("shopify:section:load", function(event) {
  console.log(1)
});

并在回调函数中添加任何你想重新初始化的JS。

有关所提供事件的更多信息，请参见此处：https://shopify.dev/tutorials/develop-theme-sections-integration-with-theme-editor

编辑后 Shopify 部分没有运行 javascript

Shopify Section doesn't run javascript after edit

javascript

liquid

shopify

shopify-template

编辑后 Shopify 部分没有 运行 javascript

Shopify Section doesn't run javascript after edit

javascript

liquid

shopify

shopify-template

编辑后 Shopify 部分没有运行 javascript