Liquid环境下js.liquid调用HTML中定义的Liquid变量失败求助

问题根源 #

Liquid是服务端渲染模板引擎，每个文件（HTML、js.liquid等）在渲染时拥有独立的上下文环境。你在HTML中通过{% assign test = 42 %}定义的变量，只存在于该HTML文件的渲染上下文里，js.liquid作为单独文件渲染时，无法获取到这个变量的上下文，所以调用{{ test }}会返回空值。

另外，alert({{ user.ID }})返回空，大概率是当前页面的渲染上下文里没有user对象（比如未登录、页面权限限制等），或者对象属性名有误（比如部分平台中是user.id而非user.ID，注意大小写）。

解决方法 #

方法1：将Liquid变量挂载到全局window对象

在HTML文件中，把需要传递的Liquid变量注入到客户端全局环境：

{% assign test = 42 %}
<script>
// 使用json过滤器确保变量格式安全
window.testValue = {{ test | json }};
window.currentUserId = {{ user.id | default: 'null' | json }};
</script>

然后在js.liquid文件中，直接调用全局变量：

alert(window.testValue); // 弹出42
alert(window.currentUserId); // 弹出用户ID或null

方法2：确保js.liquid文件拥有对应变量的渲染上下文

如果你的js.liquid是通过模板引用（比如平台的{% include 'js-file' %}语法），可以在引用时传递变量：

{% assign test = 42 %}
{% include 'js-file' with test: test %}

然后在js.liquid文件中接收变量：

alert("{{ test }}");

如果是独立的js.liquid文件（直接作为静态资源渲染），需要确保该文件渲染时，服务器会把test、user等变量注入到它的上下文里，这取决于你使用的平台配置（比如对应页面模板中需确保变量可用）。

补充说明

你第一个示例能正常运行，是因为JS修改DOM属于客户端操作：HTML先通过Liquid渲染出包含product.title的DOM，然后客户端JS读取并修改这个DOM内容，和Liquid的服务端上下文无关，所以不受隔离影响。

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