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

【问题标题】：Shopify Theme section is ignoring the stylesheet and the javascript can't access global objectsShopify 主题部分忽略样式表并且 javascript 无法访问全局对象
【发布时间】：2019-12-06 08:59:16
【问题描述】：

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

【问题讨论】：

标签： shopify liquid shopify-template

【解决方案1】：

节文件中没有全局section javascript 变量，这就是为什么您会收到没有未定义的id 的错误。

你可以这样做：

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

至于样式表对我来说没有问题。我对其进行了测试，它为 div 应用了边框。

【讨论】：

谢谢！这真的很奇怪。这些风格现在也对我有用。我正在使用“主题手表”上传，动态部分（使用在线商店/自定义）和样式起初不起作用。但是我在 10 分钟内再试一次，它成功了！这太奇怪了。是否有一些服务器端缓存？我可以关掉它吗？
Javascript 仍然无法正常工作。我查看调试器中生成的代码（在 scripts.js 中），它有 `try { console.log('THE SECTION ID IS {{section.id}}'); } 捕捉（e）{ 控制台.错误（e）; }` 如你所见，小胡子没有展开

【解决方案2】：

请记住，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 过滤器应该是用过。

希望这会有所帮助！

【讨论】：

小胡子的东西在 {% javascript %} 中不起作用。显然这是shopify中的一个错误。奇怪的是，shopify 部分都没有使用 {% javascript %} 或 {% stylesheet %}。这让我很难过，因为使用 {% .. %} 会好很多，因为理论上它们会在服务器上被转译和聚合。但它似乎被打破了，没有人（甚至没有 shopify 内置主题）使用它们。所以我不会继续尝试。我会像其他人一样使用
嗯。让我仍然以旧方式制作脚本让我不会感到太糟糕！我经常使用的模式之一是将几乎所有功能的代码放入资产文件中，然后使用该部分中的内联脚本，其唯一目的是使用相关的部分/块设置初始化类。（顺便说一句，如果您需要传入块设置，可以使用{{ section.block | map: 'settings' | json }} 获取块设置数组）

【解决方案3】：

样式表解析器似乎对使用 // 或 /* */ 的 CSS 内联注释非常敏感。我必须删除所有这些，并将所有单引号 ' 替换为双 "。

【讨论】：