如何在Shopify购物车中更新同款多数量商品的单个订单项？

问题根源 #

你现在的视觉拆分只是前端显示效果，实际Shopify购物车中，同一个变体且属性一致的商品会被合并成单个订单项（line item）。调用购物车API更新时，line参数指向的是这个合并后的订单项，所以修改属性会覆盖该订单项下的所有商品，无法单独修改其中一个。

正确实现方案 #

要实现每个商品单独定制，必须把每个需要个性化的商品拆成独立的订单项，而不是在同一个订单项里拆分数量。具体步骤如下：

1. 修改添加商品的逻辑 #

不要让用户直接添加数量>1的商品，而是通过JS循环调用Shopify的/cart/add.js接口，每次添加1件商品并带上对应个性化属性。比如用户要定制2件蛋糕，分别给甲和乙，就分两次调用接口：

// 添加第一个定制商品
fetch('/cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    variant_id: 123456789, // 商品变体ID
    quantity: 1,
    properties: {
      "FROM": "张三",
      "FOR": "甲"
    }
  })
});

// 添加第二个定制商品
fetch('/cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    variant_id: 123456789,
    quantity: 1,
    properties: {
      "FROM": "张三",
      "FOR": "乙"
    }
  })
});

这样购物车中会生成两个独立的订单项，每个都有自己的属性，后续可以单独编辑。

2. 购物车页面的显示与编辑 #

现在每个定制商品都是独立的订单项，Liquid代码不再需要循环数量，直接遍历cart.items即可：

{% for item in cart.items %}
  <!-- 每个item对应一个独立的定制商品 -->
  <div class="cart-item">
    <h3>{{ item.title }}</h3>
    <p>寄件人: {{ item.properties.FROM }}</p>
    <p>收件人: {{ item.properties.FOR }}</p>
    <!-- 编辑属性的表单 -->
    <input type="hidden" name="line_item_index" value="{{ forloop.index }}">
    <input type="text" name="from" value="{{ item.properties.FROM }}">
    <input type="text" name="for" value="{{ item.properties.FOR }}">
    <button class="update-item">更新</button>
  </div>
{% endfor %}

编辑时，调用/cart/change.js接口，指定对应的订单项索引（或key，更可靠）：

document.querySelectorAll('.update-item').forEach(btn => {
  btn.addEventListener('click', function() {
    const lineIndex = this.closest('.cart-item').querySelector('input[name="line_item_index"]').value;
    const fromField = this.closest('.cart-item').querySelector('input[name="from"]');
    const forField = this.closest('.cart-item').querySelector('input[name="for"]');

    fetch('/cart/change.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        line: lineIndex, // 对应独立订单项的索引
        properties: {
          "FROM": fromField.value,
          "FOR": forField.value
        }
      })
    }).then(response => response.json())
      .then(data => {
        // 更新购物车显示
        window.location.reload();
      });
  });
});

3. 处理购物车中数量修改的情况 #

如果用户不小心把独立订单项的数量改成了>1，需要添加“拆分”功能，将其拆成多个独立订单项：

// 拆分订单项的示例代码
function splitLineItem(lineIndex, quantity) {
  // 先获取原订单项的信息
  fetch('/cart.js')
    .then(response => response.json())
    .then(cart => {
      const item = cart.items[lineIndex - 1]; // 索引是1-based
      // 先把原订单项数量改成1
      fetch('/cart/change.js', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          line: lineIndex,
          quantity: 1
        })
      }).then(() => {
        // 循环添加剩余数量的订单项，复制原属性
        for (let i = 1; i < quantity; i++) {
          fetch('/cart/add.js', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              variant_id: item.variant_id,
              quantity: 1,
              properties: item.properties
            })
          });
        }
        // 刷新购物车
        window.location.reload();
      });
    });
}

总结 #

核心是将每个需要单独定制的商品拆成独立订单项，而不是在同一个订单项里做视觉拆分。这样购物车API就能精准修改单个商品的属性，满足你的定制需求。

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