如何在Shopify中将JavaScript值赋值给Liquid变量？

首先明确核心限制：Liquid是服务器端渲染语言，在页面发送到用户浏览器前就已执行完毕；而JavaScript是客户端脚本，页面加载后才会运行。二者运行时机完全分离，无法直接把JS变量赋值给Liquid变量，必须通过间接方式传递值。

以下是两种可行的解决方案：

方案1：通过表单提交传递值 #

最直接的方式是用隐藏表单字段存储选中值，提交表单时将值发送到服务器，再在Liquid中读取。

示例代码 #

<!-- 新增隐藏字段，用于存储选中值 -->
<input type="hidden" name="protein_option" id="protein_option" value="{{ selected_variant_title }}">

<!-- 原有展示元素 -->
<span id="selected_variant_title">{{ selected_variant_title }}</span>

<script>
function handleRadioChange() {
  const radioButtons = document.getElementsByName('meal_radio_input');
  let selectedValue = '';
  
  for (let i = 0; i < radioButtons.length; i++) {
    if (radioButtons[i].checked) {
      selectedValue = radioButtons[i].value;
      break;
    }
  }

  // 更新页面展示和隐藏字段的值
  document.getElementById('selected_variant_title').textContent = selectedValue;
  document.getElementById('protein_option').value = selectedValue;
}

// 给所有单选按钮绑定变化事件
document.querySelectorAll('input[name="meal_radio_input"]').forEach(radio => {
  radio.addEventListener('change', handleRadioChange);
});
</script>

在Liquid中读取值 #

表单提交后，通过request.params获取传递的参数，再赋值给Liquid变量：

{% if request.params.protein_option %}
  {% assign protein_option = request.params.protein_option %}
  <!-- 在这里使用protein_option变量 -->
{% endif %}

方案2：使用AJAX更新服务器端会话（需后端开发能力） #

如果不想刷新页面，可以通过AJAX将选中值发送到Shopify自定义路由，在后端把值存入会话（Session），之后Liquid就能从会话中读取。

示例JS代码 #

function handleRadioChange() {
  const radioButtons = document.getElementsByName('meal_radio_input');
  let selectedValue = '';
  
  for (let i = 0; i < radioButtons.length; i++) {
    if (radioButtons[i].checked) {
      selectedValue = radioButtons[i].value;
      break;
    }
  }

  // 发送AJAX请求到自定义后端接口
  fetch('/apps/your-custom-app/set-protein-option', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-Token': Shopify.csrfToken
    },
    body: JSON.stringify({ protein_option: selectedValue })
  });
}

在Liquid中读取会话值 #

后端将值存入会话后，直接从session对象中读取：

{% assign protein_option = session.protein_option %}

注意：此方案需要开发Shopify应用或自定义后端脚本处理请求，适合具备开发能力的场景。

关键提醒 #

• 永远不要尝试直接在JS中修改Liquid代码，Liquid在页面加载前就已渲染完成，客户端无法修改已生成的Liquid变量。
• 所有需要传递给Liquid的值，必须通过服务器端请求（表单提交或AJAX）让服务器获取，才能在Liquid中使用。

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