Shopify 每页最多显示 50 个产品。
为了绕过这个限制,我制作了一个 jquery 代码片段。该脚本从每个分页链接中获取 url,并执行 ajax 加载 - 将结果添加到主要内容区域。
它对我来说非常有效 - 但对我的 friend 来说却不是。他每次都漏掉一页。所以我认为这可能是一个异步问题,因为他的连接比我的慢。所以我重写了几次脚本以使其更加明确。但这对他仍然不起作用。
在解决了很多问题之后,似乎如果以管理员身份登录 - 一切正常。如果未登录,则中间页面无法加载。
这是我最近的代码:
{% 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>
关于javascript - Shopify 'View all' 按钮实现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17204287/