Shopify按供应商分组购物车商品后结账行号匹配错误如何修复？

问题根因 #

你当前仅在购物车模板的前端展示层做了商品按供应商分组排序，没有同步修改Shopify购物车对象本身的line items存储顺序，结账时Shopify读取的是原始未排序的购物车数据，才会出现商品和数量错配的问题。

解决方案 #

你需要调用Shopify官方的购物车更新接口，在用户进入购物车页时先按你要的分组顺序更新后端存储的购物车行顺序，保证前端展示和后端数据完全一致，具体实现步骤如下：

1. Liquid层生成排序后的商品ID数组
   在购物车模板文件（一般是cart-template.liquid或者sections/cart.liquid）的顶部添加以下代码，按供应商生成排序后的line item ID数组：

{% comment %} 按供应商分组排序生成目标ID序列 {% endcomment %}
{% assign sorted_items = cart.items | sort: 'vendor' %}
{% assign sorted_line_item_ids = '' %}
{% for item in sorted_items %}
  {% assign sorted_line_item_ids = sorted_line_item_ids | append: item.id | append: ',' %}
{% endfor %}
{% assign sorted_line_item_ids = sorted_line_item_ids | remove_last: ',' %}

2. JS层调用接口同步后端购物车顺序
   在购物车模板的底部添加以下JS代码，页面加载时调用官方接口更新后端购物车的行顺序：

document.addEventListener('DOMContentLoaded', function() {
  const sortedIds = [{{ sorted_line_item_ids }}];
  // 增加重复调用拦截标记，避免页面刷新重复提交
  if (sessionStorage.getItem('cart_sorted') === 'true') return;
  
  fetch(window.Shopify.routes.root + 'cart/update.json', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify({
      order: sortedIds
    })
  }).then(response => response.json())
  .then(cart => {
    sessionStorage.setItem('cart_sorted', 'true');
    // 如果前端已经渲染了排序后的内容不需要刷新页面，否则可添加 location.reload() 刷新展示
  }).catch(error => console.error('购物车顺序更新失败：', error));
});

注意事项 #

• 用户新增商品、修改商品数量、删除商品等操作触发购物车更新后，要清空sessionStorage中的cart_sorted标记，触发重新排序
• 不要手动修改前端表格的行号属性，该属性仅为前端展示用，Shopify后端不识别前端修改的行号
• 测试时可打印接口返回的cart对象，确认返回的line items顺序和你预期的分组顺序完全一致

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