为何Liquid环境下JS无法渲染product变量？

核心原因 #

Shopify的静态资产文件（即使后缀是.js.liquid）通过asset_url引用时，无法获取页面模板的上下文数据，比如product这类仅在产品页模板中存在的变量，所以{{product.title}}会渲染为空字符串。

可行解决方式 #

方式1：将脚本内联到产品页模板 #

把原本variant.js里的逻辑直接写到product-template.liquid中，这样就能直接读取当前页面的product对象：

<script defer>
  alert('{{product.title | escape}}');
</script>

提示：添加escape过滤器是为了避免产品标题里的特殊字符（比如单引号、双引号）破坏JS语法结构

方式2：通过全局变量传递数据 #

如果需要保留独立的.js文件，先在产品页模板里把需要的产品数据挂载到全局对象，再在JS文件中读取：

1. 在product-template.liquid的脚本引用前添加全局变量定义：

<script>
  window.currentProduct = {
    title: '{{product.title | escape}}'
  };
</script>
<script src="{{ 'variant.js' | asset_url }}" defer="defer"></script>

2. 修改variant.js的内容：

alert(window.currentProduct.title);

方式3：使用Snippet/Section承载脚本（推荐） #

利用Shopify的snippet或section文件会继承页面上下文的特性，把JS逻辑放到这类文件中：

• 创建snippets/product-variant-script.liquid，内容如下：

<script defer>
  alert('{{product.title | escape}}');
</script>

• 在product-template.liquid中引用这个snippet：

{% render 'product-variant-script' %}

内容的提问来源于stack exchange，提问作者srhuevo