Shopify每页最多只能显示50个产品。
为了绕过这个限制,我编写了一个jquery代码片段。该脚本从每个分页链接获取url,并执行ajax加载—将结果添加到主内容区域。这对我来说很有效,但对我的朋友却不是。他每次都缺一页。所以我认为这可能是一个异步问题,他的连接比我的慢。所以我把剧本重写了几次,让它更明确。但这对他来说仍然不起作用。
经过多次故障排除后,如果以管理员身份登录,似乎一切正常。如果未登录,则中间页面无法加载。
这是我最近的代码:
{% if template contains 'collection' %}
<script>
$(document).ready(function() {
$('#viewFewerProducts').hide();
// when viewAllProducts is clicked
$("#viewAllProducts").click( function (e) {
e.preventDefault();
$("#viewAllProducts , #paginationMagic").hide(); // hide pagination buttons
// and clear out collectionThumbs - but add the ViewAllRow back in.
$("#collectionThumbs").empty().html('<div class="row" id="viewAllRow"></div>');
// see how many pagination links there are. Add 1 because of index 0
var numberOfPages = $('#paginateNumbers .item').length + 1
var path = window.location.pathname;
var pageURL;
// this bit adapted from blog post... but cant remember url
for (var i=1;i<numberOfPages;i++) {
$.ajax(
{
type: 'GET',
url: pageURL = path + "?page=" + i, // build pagination page url
ajaxI: i, // Capture the current value of 'i'.
success: function(data)
{
i = this.ajaxI; // Reinstate the correct value for 'i'.
$(data).find('#collectionThumbs').each(function()
{
// Read data... and stick it in the page
var importedCollection = $(data).find("#collectionThumbs a").unwrap();
importedCollection.appendTo("#viewAllRow");
});
},
error: function(data)
{
// Handle errors here.
}
});
}
///
$("#viewFewerProducts").show();
});
// reload the window
$("#viewFewerProducts").click( function (e) {
e.preventDefault();
$("#viewFewerProducts").text('loading...').removeAttr('id');
location.reload();
});
});
</script>
{% endif %}
我已经用其他几种不同的方式写过了。如果没有登录,它就不能工作?我已经检查过了,控制台也没有出现任何错误。
所以我的问题是-有没有人知道为什么它会工作,如果登录,而不是如果没有登录到管理员?这真的很奇怪-因为它没有在任何管理页面上运行。
编辑:{% if template contains 'collection' %}
<script>
$(document).ready(function() {
$('#viewFewerProducts').hide();
$("#viewAllProducts").click( function (e) {
e.preventDefault();
$("#viewAllProducts , #paginationMagic").hide();
var numberOfPages = $('#paginateNumbers .item').length + 1
var path = window.location.pathname;
// console.log(path);
var pageURL;
//
for (var i=1;i<numberOfPages;i++) {
// console.log(i + 'a')
$.ajax(
{
type: 'GET',
url: pageURL = path + "?page=" + i,
beforeSend: function() {
$("#collectionThumbs").empty();
},
ajaxI: i, // Capture the current value of 'i'.
success: function(data)
{
i = this.ajaxI; // Reinstate the correct value for 'i'.
$(data).find('#collectionThumbs').each(function() {
// Read data from XML...
$('<div class="row" id="viewAllRow' + i + '"></div>').appendTo("#collectionThumbs");
var importedCollection = $(data).find("#collectionThumbs a").unwrap();
importedCollection.appendTo("#viewAllRow" + i );
// alert("now showing " + ($("#viewAllRow" + i + " a").length) + " products" );
});
var numberOfRows = $('#collectionThumbs .row').length + 1
var viewAllRowItem = []
for (var x=1;x<numberOfRows;x++) {
//put each row into a variable
viewAllRowItem[x] = $("#viewAllRow" + x ).clone();
$("#viewAllRow" + x ).remove();
// console.log(viewAllRowItem[x])
}
for (var x=1;x<numberOfRows;x++) {
$(viewAllRowItem[x]).appendTo('#collectionThumbs');
}
},
dataType: "html",
error: function(data)
{
// Handle errors here.
}
});
}
$("#viewFewerProducts").show();
});
$("#viewFewerProducts").click( function (e) {
e.preventDefault();
$("#viewFewerProducts").text('loading...').removeAttr('id');
location.reload();
});
});
</script>
{% endif %}
上面的代码似乎工作-不确定为什么…是一个淘汰的过程。我必须添加一些代码来重新排列加载后的元素(因为一些ajax响应返回的速度比其他响应快-并且以错误的顺序出现在页面上)。
$('[js-load-more]').on('click', function(){
var $this = $(this),totalPages = parseInt($('[data-total-pages]').val()),currentPage = parseInt($('[data-current-page]').val());
$this.attr('disabled', true);
$this.find('[load-more-text]').addClass('hide');
$this.find('[loader]').removeClass('hide');
currentPage = currentPage+1;
var nextUrl = $('[data-next-url]').val().replace(/page=[0-9]+/,'page='+currentPage);
$('[data-current-page]').val(currentPage);
$.ajax({
url: nextUrl,
type: 'GET',
dataType: 'html',
success: function(responseHTML){
$('.grid--view-items').append($(responseHTML).find('.grid--view-items').html());
},
complete: function() {
if(currentPage >= totalPages) {
$this.remove();
}
else {
$this.attr('disabled', false);
$this.find('[load-more-text]').removeClass('hide');
$this.find('[loader]').addClass('hide');
}
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="hidden" value="{{ paginate.next.url }}" data-next-url>
<input type="hidden" value="{{ paginate.pages }}" data-total-pages>
<input type="hidden" value="{{ paginate.current_page }}" data-current-page>
<div class="load-more_wrap">
<button class="btn" js-load-more>
<span load-more-text>Load more</span>
<span class="hide" loader></span>
</button>
</div>