Как отменить этот кусок jquery?

Question

Магазин My ​​Shopify использует вызов Ajax для добавления продуктов в корзину и jQuery для обновления интерфейса. Недавно я установил infinite-ajax-scroll, но это вызвало некоторые проблемы.

При прокрутке вниз до продуктов, загружаемых бесконечным ajax-прокруткой, а затем нажмите кнопку «Добавить в корзину», вызовы ajax & Обновления jQuery больше не работают, он перенаправляет меня на страницу корзины.

Я решил это, повторно инициализируя кусок кода jQuery, который «аяксирует» магазин, используя событие rendered с бесконечным ajax-scroll.

Но теперь, прокручивая до 20 новых продуктов, загружаемых бесконечным ajax-scroll, ajaxifyShopify get инициализируется во второй раз на первых 20 продуктах. Добавляя один из первых 20 продуктов в корзину, они добавляются дважды.

Я попытался развязать первый ajaxifyShopify с помощью jQuery's .off(), но он не работает.

Полный код для ajaxifyShopify можно найти по строке 261 here. Каждый раз, когда загружается новая страница, ajaxifyShopify get инициализируется для «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>