液体模式有效，但从编辑器中修改时会删除该部分

Question

我是整个 Shopify 和 liquid 环境的新手。但是，我能够修改使用 {%schema%} 标记显示控件的部分，以设置文本框的背景和最大宽度。

所以我冒险为自己创建了一个部分，以便在其中一个页面上添加一个小的常见问题解答块。

我已尽我所能阅读所有内容以确保我没有忘记任何内容，我还检查了现有部分的代码是否正常工作，但我找不到导致此问题的原因。

当我在主题编辑器中打开包含该部分的页面时，我可以正确加载并显示默认颜色。我还在左窗格中看到修改器块，但是一旦我在编辑器中更改值，它只会让整个部分消失。

有人可以帮我指出我做错了什么吗？

非常感谢

这是部分中的完整代码：

    <style>
  
  .faq{
    max-width:900px;
    width:80%;
  }
  .faq-container{
    background-color:{{section.settings.container_background_color}};
    display: flex;
    justify-content:center;
    
  }
  
</style>


<div class="faq-container">
 
    <div class="faq" id="ndnappseasyfaqs-wrapper"></div>
  
</div>


{%schema%}
{
  "name": "FAQ section",
  "settings": [
    {
      "type": "color",
      "id": "container_background_color",
      "label": "Background color",
      "default": "#a0cf67"
    }
  ]


}
{% endschema %}

这是我尝试修改之前的结果： before modification

这是我修改颜色后的结果： After modification

Answer 1

这可能是与 JS 中的预览更新相关联的问题。您是否尝试保存更改并查看它是否有效？

Answer 2

根据Integration with the theme editor，

When merchants customize sections, the HTML of those sections is dynamically added, removed, or re-rendered directly onto the existing DOM without reloading the entire page.

JavaScript that runs when the page loads will not run again when a section is re-rendered or added to the page. This poses a problem for any custom scripts that would need to be re-run.

如果您在页面加载时运行加载一些 js，则在用户对部分进行更改后它不会再次运行。所以我猜你必须手动运行 js。只需将事件与您的事件侦听器绑定

document.addEventListener('shopify:section:load', function(event){
   [your code...]
});

液体模式有效，但从编辑器中修改时会删除该部分

liquid schema works, but removes the section when modified from the editor

liquid

shopify