Question

我正在使用Liquid为Shopify主题创建一个自定义部分，下面是/sections/mytest.liquid的代码。

我希望看到带有红色边框的部分，并且希望在浏览器控制台中看到该部分的ID。

这不起作用，因为shopify忽略了我的样式表。它总是说部分ID丢失。我在做什么错了？

<div id="fish1">
Hello this is the threshold -- {{ section.settings.threshold }} --
</div>

{% javascript %}
console.log('THE SECTION ID IS ' + (section ? section.id : 'MISSING'));
{% endjavascript %}

{% stylesheet %}
#fish1 {
    border: 1px solid red;
    background-color: cyan;
}
{% endstylesheet %}

{% schema %}
{
  "name": "test Header",
  "settings": [
    {
      "type": "range",
      "id": "threshold",
      "min": 300, "max": 1000, "step": 10, "unit": "px",
      "label": "Threshold",
      "default": 760
    }
  ],
  "presets": [
    {
      "category": "My Stuff",
      "name": "My Test"
    }
  ]
}
{% endschema %}

Answer 1

请记住，Liquid是一种模板语言，它是在服务器端进行编译以创建将提供给客户端浏览器的文档的，而Javascript是一种客户端脚本，该脚本将在提供页面后进行解析。从Java脚本的角度来看，除非您以某种方式将它们放入模板中，否则客户端不会知道您通过主题或栏目设置设置的任何变量。

下面的一些代码可能会帮助您入门（我通常使用基本的<script>标签而不是Shopify的{% javascript %}液体标签，但是应该在这些标签中也可以使用）：

<script>
  const section = {
    settings: {{ section.settings | json }},
    id: {{ section.id | json }}
  }

  console.log('Confirmation:', section.id, section.settings);
</script>

请注意| json过滤器的使用-该过滤器将确保过滤器之前的任何变量都将以Javascript友好的方式输出到生成的文档中，并且也适用于非对象。字符串将用引号引起来，字符串中的引号将被转义，空值将为null，依此类推。我的经验法则是，每次将Liquid变量放入Javascript中时，{{1} }过滤器。

希望这会有所帮助！

Answer 2

在节文件中没有全局section javascript变量，这就是为什么会出现错误的提示，即没有id的不确定性。

您可以这样做：

{% javascript %}
console.log('THE SECTION ID IS {{section.id}}');
{% endjavascript %}

关于样式表，对我来说没有问题。我对其进行了测试，并将其应用于div。

Shopify主题部分忽略了样式表，并且javascript无法访问全局对象

2 个答案: