0

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

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

我通过使用infinite-ajax-scrollrendered事件重新初始化“ajaxizes”商店的一段jQuery 代码解决了这个问题。

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

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

ajaxifyShopify可以在此处的第 261 行找到完整的代码。每次加载新页面时，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');
  });
})

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

我究竟做错了什么？

4

1 回答 1

0

我通过解除绑定每个单独的事件处理程序来解决这个问题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>
于 2014-10-19T07:43:56.130 回答