![](/img/trans.png)
[英]Add a timer to close Ajax Quick Cart (Shopify) after product is added to cart?
[英]Shopify Infinite scroll has stopped product Quick View and Quick Add to Cart buttons from working
我正在使用帶有快速產品視圖和快速添加到購物車按鈕的Shopify“帝國主題”,最近我使用Ajaxinate.js在每個系列的產品上添加了無限滾動。
當我打開收藏頁面時,它會加載一些應該做的產品,已經存在的產品可以很好地工作,可以快速查看並快速添加到購物車中。
無限滾動可以正常工作,並且可以很好地加載新產品,但是通過AJAX調用加載的新產品沒有快速添加到購物車和快速查看功能時,就會出現問題。
簡而言之,裝有AJAX呼叫的產品沒有快速查看功能,但另一方面,沒有裝有AJAX且已經具有上述功能的產品沒有添加到購物車功能。
如果您想查看商店,請點擊這里。 檢查前8個產品,您會發現它們工作正常,+圖標(將項目添加到購物車)和快速查看都很好。 但是在8個項目之后沒有任何效果。
https://www.gyftss.myshopify.com
密碼:1239
Ajax無限滾動的代碼是:
'use strict';
/* ===================================================================================== @preserve =
___ _ _ _
/ || | | | | |
\__ | | | | | | __
/ |/ |/_) |/ / \_/\/
\___/|__/| \_/|__/\__/ /\_/
|\
|/
Ajaxinate
version v2.0.6
https://github.com/Elkfox/Ajaxinate
Copyright (c) 2017 Elkfox Co Pty Ltd
https://elkfox.com
MIT License
================================================================================================= */
var Ajaxinate = function ajaxinateConstructor(config) {
var settings = config || {};
/*
pagination: Selector of pagination container
method: [options are 'scroll', 'click']
container: Selector of repeating content
offset: 0, offset the number of pixels before the bottom to start loading more on scroll
loadingText: 'Loading', The text changed during loading
callback: null, function to callback after a new page is loaded
*/
var defaultSettings = {
pagination: '.AjaxinatePagination',
method: 'scroll',
container: '.AjaxinateLoop',
offset: 660,
loadingText: '<img src="https://cdn.shopify.com/s/files/1/0066/5072/4415/files/spinner.gif?16236020128462925067" style="width:40px">',
callback: null
};
// Merge configs
this.settings = Object.assign(defaultSettings, settings);
// Bind 'this' to applicable prototype functions
this.addScrollListeners = this.addScrollListeners.bind(this);
this.addClickListener = this.addClickListener.bind(this);
this.checkIfPaginationInView = this.checkIfPaginationInView.bind(this);
this.stopMultipleClicks = this.stopMultipleClicks.bind(this);
this.destroy = this.destroy.bind(this);
// Set up our element selectors
this.containerElement = document.querySelector(this.settings.container);
this.paginationElement = document.querySelector(this.settings.pagination);
this.initialize();
};
Ajaxinate.prototype.initialize = function initializeTheCorrectFunctionsBasedOnTheMethod() {
// Find and initialise the correct function based on the method set in the config
if (this.containerElement) {
var initializers = {
click: this.addClickListener,
scroll: this.addScrollListeners
};
initializers[this.settings.method]();
}
};
Ajaxinate.prototype.addScrollListeners = function addEventListenersForScrolling() {
if (this.paginationElement) {
document.addEventListener('scroll', this.checkIfPaginationInView);
window.addEventListener('resize', this.checkIfPaginationInView);
window.addEventListener('orientationchange', this.checkIfPaginationInView);
}
};
Ajaxinate.prototype.addClickListener = function addEventListenerForClicking() {
if (this.paginationElement) {
this.nextPageLinkElement = this.paginationElement.querySelector('a');
this.clickActive = true;
if (typeof this.nextPageLinkElement !== 'undefined') {
this.nextPageLinkElement.addEventListener('click', this.stopMultipleClicks);
}
}
};
Ajaxinate.prototype.stopMultipleClicks = function handleClickEvent(event) {
event.preventDefault();
if (this.clickActive) {
this.nextPageLinkElement.innerHTML = this.settings.loadingText;
this.nextPageUrl = this.nextPageLinkElement.href;
this.clickActive = false;
this.loadMore();
}
};
Ajaxinate.prototype.checkIfPaginationInView = function handleScrollEvent() {
var top = this.paginationElement.getBoundingClientRect().top - this.settings.offset;
var bottom = this.paginationElement.getBoundingClientRect().bottom + this.settings.offset;
if (top <= window.innerHeight && bottom >= 0) {
this.nextPageLinkElement = this.paginationElement.querySelector('a');
this.removeScrollListener();
if (this.nextPageLinkElement) {
this.nextPageLinkElement.innerHTML = this.settings.loadingText;
this.nextPageUrl = this.nextPageLinkElement.href;
this.loadMore();
}
}
};
Ajaxinate.prototype.loadMore = function getTheHtmlOfTheNextPageWithAnAjaxRequest() {
this.request = new XMLHttpRequest();
this.request.onreadystatechange = function success() {
if (this.request.readyState === 4 && this.request.status === 200) {
var newContainer = this.request.responseXML.querySelectorAll(this.settings.container)[0];
var newPagination = this.request.responseXML.querySelectorAll(this.settings.pagination)[0];
this.containerElement.insertAdjacentHTML('beforeend', newContainer.innerHTML);
this.paginationElement.innerHTML = newPagination.innerHTML;
if (this.settings.callback && typeof this.settings.callback === 'function') {
this.settings.callback(this.request.responseXML);
}
this.initialize();
}
}.bind(this);
this.request.open('GET', this.nextPageUrl);
this.request.responseType = 'document';
this.request.send();
};
Ajaxinate.prototype.removeClickListener = function removeClickEventListener() {
this.nextPageLinkElement.addEventListener('click', this.stopMultipleClicks);
};
Ajaxinate.prototype.removeScrollListener = function removeScrollEventListener() {
document.removeEventListener('scroll', this.checkIfPaginationInView);
window.removeEventListener('resize', this.checkIfPaginationInView);
window.removeEventListener('orientationchange', this.checkIfPaginationInView);
};
Ajaxinate.prototype.destroy = function removeEventListenersAndReturnThis() {
// This method is used to unbind event listeners from the DOM
// This function is called manually to destroy "this" Ajaxinate instance
var destroyers = {
click: this.removeClickListener,
scroll: this.removeScrollListener
};
destroyers[this.settings.method]();
return this;
};
初始化代碼為:
<script>
document.addEventListener("DOMContentLoaded", function(e) {
e.preventDefault();
var endlessScroll = new Ajaxinate();
offset: 660
});
</script>
主題的主題javascript文件可以在以下位置找到:
https://cdn.shopify.com/s/files/1/0066/5072/4415/t/5/assets/empire.js?11964077371852938126
提前致謝。
使用此代碼,我可以解決主題帝國的快速外觀
<script> var empire_js_o = '<script src="//cdn.shopify.com/s/files/1/1540/2631/t/34/assets/empire.js?9521252849869083980" data-scripts="" data-shopify-api-url="//cdn.shopify.com/s/assets/themes_support/api.jquery-0ea851da22ae87c0290f4eeb24bc8b513ca182f3eb721d147c009ae0f5ce14f9.js" data-shopify-currencies="//cdn.shopify.com/s/javascripts/currencies.js" data-shopify-countries="/services/javascripts/countries.js" data-shopify-common="//cdn.shopify.com/s/assets/themes_support/shopify_common-040322ee69221c50a47032355f2f7e6cbae505567e2157d53dfb0a2e7701839c.js" data-shopify-cart="//cdn.shopify.com/s/files/1/1540/2631/t/34/assets/jquery.cart.js?9521252849869083980" id="empire_js">'; var NewEmpire = function reload_js() { $('#empire_js').remove(); $(empire_js_o).appendTo('head'); } document.addEventListener("DOMContentLoaded", function() { var endlessScroll = new Ajaxinate({ method: 'scroll', loadingText: 'Loading...', callback: NewEmpire }); }); </script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.