每当加载主页时，如何清除 Shopify 购物车？

Question

我是一名设计师，一位客户询问我是否可以帮助他们在他们的商店中实现某些功能。

他们只在商店中销售一种产品，提供不同的捆绑选项。由于客户在任何给定时间只会从商店购买 1 件产品，他们问我是否可以拥有它，以便在任何给定时间只有 1 件产品可以放在购物车中，以及客户是否要从结帐页面（或任何其他页面）并选择不同的产品捆绑包，它会将其他产品从他们的购物车中删除。

我在网站上没有任何 AJAX 购物车项目（抽屉、滑出式购物车等），因此在这里可以选择使用 AJAX。除了 HTML、CSS 和一些基本的 JS 之外，我的知识非常有限。

以我有限的知识，我认为在加载主页时运行一个清除购物车的脚本会很好，因为网站上实际上只有 3 个页面，主页、购物车页面和结帐页面。这是我找到的代码，但我不确定如何实现它，或者它是否可以工作：

$(document).ready(function() {
  $('.clear-cart').on('load',function(e){
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: '/cart/clear.js',
      success: function(){
        alert('I cleared the cart!');
      },
      dataType: 'json'
    });
  })
});

非常感谢您为帮助这个有需要的菜鸟所做的努力！

Answer 1

您需要检查页面的类，就像默认的首次亮相主题一样，它使用类template-index 作为索引页又名主页。

并将条件添加到代码中进行检查。

$(document).ready(function() {
  $(document).on('load',function(e){
    if( !$('body').hasClass('template-index') ){
       return;
    }
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: '/cart/clear.js',
      success: function(){
        alert('I cleared the cart!');
      },
      dataType: 'json'
    });
  })
});