{% paginate collection.products by 16 %}
<div class="products__collection">
<ul class="product collection__grid"">
{% for product in collection.products %}
{% assign prod_id = forloop.index | plus:paginate.current_offset %}
{% include 'product-grid-item' with prod_id %}
{% endfor %}
{% if paginate.next %}
<div id="more"><p>↓ <a href="{{ paginate.next.url }}">More</a></p></div>
{% endif %}
</ul>
<div id="product-list-foot"></div>
</div>
{% endpaginate %}
Note that items in {% include 'product-grid-item' with prod_id %}
template should be <li>
tags, given the <ul>
wrapper. However, the structure can be altered as necessary.
// Shortcircuit variable
let triggered = false;
function ScrollExecute() {
// Locate loadmore button
let moreButon = $('#more').last();
// Get URL from the loadmore button
let nextUrl = $(moreButon).find('a').attr("href");
// Button position when AJAX call should be made one time
if ((($(moreButon).offset().top - $(window).scrollTop()) < 800) && (triggered == false)) {
// Trigger shortcircuit to ensure AJAX only fires once
triggered = true;
// Make ajax call to next page for load more data
$.ajax({
url: nextUrl,
type: 'GET',
beforeSend: function() {
moreButon.remove();
}
})
.done(function(data) {
// Append data
$('.product').append($(data).find('.product').html());
// On success, reset shortcircuit
triggered = false
});
}
}
$(document).ready(function () {
$(window).scroll(function(){
ScrollExecute();
});
});
Great snippet but only works once, how can I make this work for a collection that has 10 product pages?