Question

我的Shopify商店使用Ajax调用将产品添加到购物车，使用jQuery更新前端。我最近安装了infinite-ajax-scroll，但这带来了一些问题。

当向下滚动到无限ajax滚动加载的产品时，然后单击添加到购物车按钮，ajax调用＆amp; jQuery更新不再起作用，它将我重定向到购物车页面。

我通过重新初始化使用infinite-ajax-scroll的rendered事件“ajaxifies”商店的jQuery代码来解决这个问题。

但现在当向下滚动到无限ajax-scroll加载的20个新产品时，ajaxifyShopify会在前20个产品上第二次初始化。将前20个产品中的一个添加到购物车时，它们会被添加两次。

我尝试使用jQuery的.off()取消绑定第一个ajaxifyShopify，但它不起作用。

ajaxifyShopify的完整代码可以在第261行here找到。每次加载新页面时，ajaxifyShopify都会被初始化为“ajaxify”页面。

这是我的代码：

jQuery(function($) {
  ajaxifyShopify.init({
    method: '{{ settings.ajax_cart_method }}',
    wrapperClass: 'wrapper',
    formSelector: '#addToCartForm',
    addToCartSelector: '#addToCart',
    cartCountSelector: '#cartCount',
    toggleCartButton: '.cart-toggle',
    useCartTemplate: true,
    btnClass: 'btn',
    moneyFormat: {{ shop.money_format | json }},
    disableAjaxCart: false,
    enableQtySelectors: true
  });
});

console.log('ajaxifyShopify initialized for the first time');

var ias = jQuery.ias({
  container:  '#products',
  item:       '.single-product',
  pagination: '.pagination-custom',
  next:       '.next'
});

ias.extension(new IASSpinnerExtension({
  src: '{{ "spiffygif_36x36.gif" | asset_url }}'
}));

ias.on('rendered', function(data, items) {
  console.log('ias rendered');

  // Unbind ajaxifyShopify
  $("html").off("ajaxifyShopify");
  console.log('ajaxifyShopify off');

  // Initialize ajaxifyShopify
  jQuery(function($) {
    ajaxifyShopify.init({
      method: '{{ settings.ajax_cart_method }}',
      wrapperClass: 'wrapper',
      formSelector: '#addToCartForm',
      addToCartSelector: '#addToCart',
      cartCountSelector: '#cartCount',
      toggleCartButton: '.cart-toggle',
      useCartTemplate: true,
      btnClass: 'btn',
      moneyFormat: {{ shop.money_format | json }},
      disableAjaxCart: false,
      enableQtySelectors: true
    });

    console.log('ajaxifyShopify initialized from ias');
  });
})

您可以查看有问题的页面here。

我做错了什么？

Answer 1

我通过解除绑定ajaxifyShopify绑定的每个单独事件处理程序来解决这个问题。

对于有兴趣的人，请参阅以下代码：

<script>
  jQuery(function($) {
    ajaxifyShopify.init({
      method: '{{ settings.ajax_cart_method }}',
      wrapperClass: 'wrapper',
      formSelector: '#addToCartForm',
      addToCartSelector: '#addToCart',
      cartCountSelector: '#cartCount',
      toggleCartButton: '.cart-toggle',
      useCartTemplate: true,
      btnClass: 'btn',
      moneyFormat: {{ shop.money_format | json }},
      disableAjaxCart: false,
      enableQtySelectors: true
    });
  });

  console.log('ajaxifyShopify initialized for the first time');

  var ias = jQuery.ias({
    container:  '#products',
    item:       '.single-product',
    pagination: '.pagination-custom',
    next:       '.next'
  });

  ias.extension(new IASSpinnerExtension({
    src: '{{ "spiffygif_36x36.gif" | asset_url }}'
  }));

  ias.on('rendered', function(data, items) {
    console.log('ias rendered event');

    // Unbind previous ajaxifyShopify event handlers
    $("wrapper").off();
    $("#addToCartForm").off();
    $("#addToCart").off();
    $("#cartCount").off();
    $(".cart-toggle").off();
    console.log('ajaxifyShopify off from ias rendered event');

    // Initialize ajaxifyShopify
    jQuery(function($) {
        ajaxifyShopify.init({
          method: '{{ settings.ajax_cart_method }}',
          wrapperClass: 'wrapper',
          formSelector: '#addToCartForm',
          addToCartSelector: '#addToCart',
          cartCountSelector: '#cartCount',
          toggleCartButton: '.cart-toggle',
          useCartTemplate: true,
          btnClass: 'btn',
          moneyFormat: {{ shop.money_format | json }},
          disableAjaxCart: false,
          enableQtySelectors: true
        });

      console.log('ajaxifyShopify initialized from ias rendered event');
    });
  })
  </script>

我该如何解开这个jquery？

1 个答案: