0

注:これは一般的な問題であり、これについては多くの記事が書かれていますが、修正できないようです。

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

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

IAS を有効にするために使用しているインライン スクリプトは次のとおりです。

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

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

これは、製品をカートに追加するコード ( ajaxify.jsの 161 ～ 194 行目) です。

Shopify.addItemFromForm = function(form, callback, errorCallback) {
  // Unbind IAS
  ias.destroy();

  var params = {
    type: 'POST',
    url: '/cart/add.js',
    data: jQuery(form).serialize(),
    dataType: 'json',
    success: function(line_item) {
      if ((typeof callback) === 'function') {
        callback(line_item, form);
      }
      else {
        Shopify.onItemAdded(line_item, form);
      }
    },
    error: function(XMLHttpRequest, textStatus) {
      if ((typeof errorCallback) === 'function') {
        errorCallback(XMLHttpRequest, textStatus);
      }
      else {
        Shopify.onError(XMLHttpRequest, textStatus);
      }
    }
  };
  jQuery.ajax(params);

  var variant_id = params.data.split('=')[1]
  $( "#var-id-" + variant_id + " " + "#in-cart-indicator" ).removeClass( "not-in-cart" ).addClass( "triangle-top-right" );

  // Bind IAS
  ias.bind();
};

この SO postに基づいてbindandメソッドを追加しましたが、成功しませんでした。unbind

私は何を間違っていますか？

問題のページはこちらからご覧いただけます。

4

1 に答える 1

0

これは、infinite-ajax-scroll のイベントajaxifyShopifyを使用して新製品のレンダリングが終了するたびに再初期化することで解決しました。rendered

次のコードをコピーして に貼り付けますcollection.liquid。

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

ias.on('rendered', function() { 
  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
    });
  });
})
</script>
于 2014-10-18T09:53:34.330 に答える