我该如何解开这个jquery？

My Shopify store uses Ajax call's to add products to the cart and jQuery to update the front-end. I recently installed infinite-ajax-scroll but this brought some issues.

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

When scrolling down to the products loaded by infinite-ajax-scroll, and then click on the add to cart button, the ajax calls & jQuery updates don't work anymore, it redirects me to the cart page.

当向下滚动到由infinite-ajax-scroll加载的产品,然后单击“添加到购物车”按钮时,ajax调用和jQuery更新不再起作用,它会将我重定向到购物车页面。

I solved this by reinitialising the piece of jQuery code that "ajaxifies" the shop using infinite-ajax-scroll's rendered event.

我通过重新初始化jQuery代码解决了这个问题,该代码使用无限ajax-scroll的渲染事件“ajaxifies”商店。

But now when scrolling down to the 20 new products loaded by infinite-ajax-scroll, ajaxifyShopify get's initialized for the second time on the first 20 products. When adding one of the first 20 products to the cart, they get added twice.

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

I tried unbinding the first ajaxifyShopify with jQuery's .off() but it doesn't work.

我尝试用jQuery的.off()解除第一个ajaxifyShopify的绑定,但它不起作用。

The complete code for ajaxifyShopify can be found on line 261 here. Every time a new page loads, ajaxifyShopify get's initialized to "ajaxify" the page.

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

Here's my code:

这是我的代码:

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');
  });
})

You can take a look at the page in question here.

您可以在此处查看相关页面。

What am I doing wrong?

我究竟做错了什么?

1 个解决方案

#1

I solved this by unbinding each individual event handler binded by ajaxifyShopify.

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

For those interested, here's the code:

对于那些感兴趣的人,这里是代码:

<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>

#1