How Do I Unbind This Piece Of 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. When scro
Solution 1:
I solved this by unbinding each individual event handler binded by 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(newIASSpinnerExtension({
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 ajaxifyShopifyjQuery(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>
Post a Comment for "How Do I Unbind This Piece Of Jquery?"