如何实现Shopify首页加载时自动清空购物车的功能？

原有代码问题说明 #

你找到的代码无法正常运行，原因是它绑定了不存在的.clear-cart元素的load事件作为触发条件，普通DOM元素不会触发load事件，因此清空逻辑永远不会执行。 #

适配你需求的可用代码 #

这段代码同时覆盖了你要的「首页加载清空购物车」+「选新套餐加购前清空旧商品」两个场景，完全符合购物车仅存1件商品的要求：

$(document).ready(function() {
  // 场景1：首页加载完成后自动清空购物车
  $.ajax({
    type: "POST",
    url: '/cart/clear.js',
    dataType: 'json'
  });

  // 场景2：点击加购按钮时先清空原有商品，再提交新的加购请求
  $('form[action="/cart/add"] [type="submit"]').on('click', function(e) {
    e.preventDefault();
    const currentAddForm = $(this).closest('form');
    $.ajax({
      type: "POST",
      url: '/cart/clear.js',
      dataType: 'json',
      success: function() {
        currentAddForm.submit();
      }
    });
  });
});

部署步骤 #

• 登录Shopify后台，进入「在线商店」→「主题」，点击当前使用主题右侧的「⋮」按钮，选择「编辑代码」
• 在左侧文件列表找到theme.liquid模板文件，滚动到文件最底部，在</body>结束标签的上方粘贴上述代码
• 点击右上角保存即可完成部署

测试方法 #

1. 先任选一个套餐加入购物车，刷新首页后进入购物车页，确认原有商品已被清空
2. 再选A套餐加入购物车，不结账直接返回首页选B套餐加购，进入购物车页确认仅存在B套餐1件商品，即配置生效
3. 测试没问题后可以删掉代码里的注释内容，精简体积

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