如何通过Shopify Liquid/JS为购物车产品添加持久化自定义属性？

Liquid是服务器端渲染语言，仅能读取购物车数据，无法直接修改后端的购物车项——这就是为什么只在前端加<li>标签，属性会在结账时丢失的原因。要实现持久化，必须结合Shopify的AJAX购物车API更新后端数据，具体步骤如下：

1. 改造购物车页面的属性展示与输入区域 #

修改cart.liquid，为每个商品项添加自定义属性的输入控件，同时保留原有属性的渲染逻辑：

{%- for line_item in cart.items -%}
  <!-- 渲染已存在的商品属性 -->
  {% for property in line_item.properties %}
    <li class="line-item__property">{{ property.first }}: {{ property.last }}</li>
  {% endfor %}

  <!-- 新增年龄属性的输入和保存按钮 -->
  <div class="custom-property-group">
    <label for="age-{{ line_item.id }}">年龄:</label>
    <input type="number" id="age-{{ line_item.id }}" value="{{ line_item.properties['Age'] | default: '' }}">
    <button class="save-property" data-line-id="{{ line_item.id }}">保存年龄</button>
  </div>
{%- endfor -%}

2. 用JavaScript调用AJAX API同步属性到后端 #

在购物车页面添加JS代码，点击保存按钮时，将属性提交到Shopify购物车接口：

// 给所有保存按钮绑定点击事件
document.querySelectorAll('.save-property').forEach(button => {
  button.addEventListener('click', function() {
    const lineItemId = this.dataset.lineId;
    const ageInput = document.getElementById(`age-${lineItemId}`);
    const ageValue = ageInput.value.trim();

    // 构造请求数据，指定要更新的商品项和属性
    const updateData = {
      line: lineItemId,
      properties: {
        'Age': ageValue // 空值会移除该属性，按需调整
      }
    };

    // 调用Shopify的购物车更新接口
    fetch('/cart/change.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(updateData)
    })
    .then(res => res.json())
    .then(updatedCart => {
      // 更新成功后刷新页面，或局部更新属性列表提升体验
      location.reload();
    })
    .catch(err => {
      console.error('属性更新失败:', err);
      alert('保存失败，请重试');
    });
  });
});

3. 验证持久化效果 #

点击保存后，后端购物车的对应商品项会新增Age属性，结账时该属性会同步到订单详情中，不会再丢失。

额外提示 #

• 属性键名（比如'Age'）要前后端统一，避免出现匹配问题
• 如果需要添加多个自定义属性，直接在properties对象里追加键值对即可
• 可以优化局部更新逻辑，不用刷新整个页面，用返回的updatedCart数据替换对应商品的属性区域
• 对必填属性可添加输入验证，确保用户输入有效内容再提交

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