时间戳

首页 > 解决方案 > Shopify 主题部分忽略样式表并且 javascript 无法访问全局对象

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

问题描述

我正在使用 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 %}

标签： shopifyliquidshopify-template

解决方案

请记住，Liquid 是一种模板语言，它在服务器端编译以创建将提供给客户端浏览器的文档，而 Javascript 是一种客户端脚本，一旦提供页面就会被解析。在 Javascript 方面，客户端不会知道您通过主题或部分设置设置的任何变量，除非您以某种方式将它们放入模板中。

下面是一些可以帮助您入门的代码（我通常使用基本<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，json都应该使用过滤器。

希望这可以帮助！

推荐阅读