0

私の Shopify ストアは、Ajax 呼び出しを使用して商品をカートに追加し、jQuery を使用してフロントエンドを更新します。最近infinite-ajax-scrollをインストールしましたが、これによりいくつかの問題が発生しました。

無限 ajax スクロールによって読み込まれた製品まで下にスクロールし、[カートに追加] ボタンをクリックすると、ajax 呼び出しと jQuery の更新が機能しなくなり、カート ページにリダイレクトされます。

renderedこれを解決するには、infinite-ajax-scroll のイベントを使用してショップを「ajax化」する jQuery コードを再初期化しました。

しかし、infinite-ajax-scroll によってロードされた 20 個の新しい製品までスクロールすると、最初の 20 個の製品で ajaxifyShopify が 2 回目の初期化を取得します。最初の 20 個の製品の 1 つをカートに追加すると、2 回追加されます。

ajaxifyShopifyjQueryで最初のバインドを解除しようと.off()しましたが、うまくいきません。

の完全なコードは、こちらajaxifyShopifyの 261 行にあります。新しいページが読み込まれるたびに、ページを「ajaxify」するために get が初期化されます。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 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 に答える