[英]How do I bind and unbind infinite-ajax-scroll so other jQuery works?
注意:我知道這是一個常見的問題,對此已經寫了很多文章,但是我似乎無法解決。
我的Shopify商店使用Ajax調用將產品添加到購物車,並使用jQuery更新前端。 我最近安裝了無限ajax-scroll,但這帶來了一些問題。
向下滾動到Infinite-ajax-scroll加載的產品,然后單擊“添加到購物車”按鈕時,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添加了bind
和unbind
方法,但是沒有成功。
我究竟做錯了什么?
您可以在此處查看相關頁面。
每當新產品使用無限ajax-scroll的rendered
事件完成渲染時,我都會通過重新初始化ajaxifyShopify
來解決此問題。
將以下代碼復制並粘貼到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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.