Skip to content

Instantly share code, notes, and snippets.

@ihorduchenko
Forked from rickydazla/collections.liquid.html
Created February 23, 2018 13:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ihorduchenko/8794948185a6f7f41db3b5e6eca2b1bc to your computer and use it in GitHub Desktop.
Save ihorduchenko/8794948185a6f7f41db3b5e6eca2b1bc to your computer and use it in GitHub Desktop.
"Infinite" (non-auto) scrolling in Shopify collections
{% paginate collection.products by 20 %}
<ul class="collection-matrix">
{% for product in collection.products %}
<li id="product-{{ forloop.index | plus:paginate.current_offset }}">
{% include 'product' with product %}
</li>
{% endfor %}
<li class="top"><a href="#collectionpage">Back to Top</a> &uarr;</li>
{% if paginate.next %}
<li class="more">&darr; <a href="{{ paginate.next.url }}">More</a></li>
{% endif %}
</ul>
<div id="product-list-foot"></div>
{% endpaginate %}}
var pInfScrLoading = false;
var pInfScrDelay = 250;
function pInfScrExecute() {
pInfScrNode = $('.more').last();
pInfScrURL = $('.more a').last().attr("href");
if(pInfScrNode.length > 0 && pInfScrNode.css('display') != 'none') {
$.ajax({
type: 'GET',
url: pInfScrURL,
beforeSend: function() {
pInfScrLoading = true;
pInfScrNode.clone().empty().insertAfter(pInfScrNode).append('<img src=\"http://cdn.shopify.com/s/files/1/0068/2162/assets/loading.gif?105791\" />');
pInfScrNode.hide();
},
success: function(data) {
// remove loading feedback
pInfScrNode.next().remove();
pInfScrNode.remove();
var filteredData = $(data).find(".collection-matrix");
filteredData.insertBefore( $("#product-list-foot") );
pInfScrLoading = false;
$('li.singleproduct').setAllToMaxHeight();
attachClickEvent();
},
dataType: "html"
});
}
}
function attachClickEvent(){
$('li.more a').click(function(event){
pInfScrExecute();
event.stopPropagation();
return false;
});
}
$(document).ready(function () {
attachClickEvent();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment