Skip to content

Instantly share code, notes, and snippets.

@rickydazla
Forked from davecap/collections.liquid.html
Created December 17, 2011 05:42
Show Gist options
  • Save rickydazla/1489365 to your computer and use it in GitHub Desktop.
Save rickydazla/1489365 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();
});
@cnotv
Copy link

cnotv commented Jul 13, 2014

For me it loads a copy of the collection-matrix...... no idea about why...

EDIT:
Ok I'd to set the exact number of products in the pagination and upgraded migration to 1.2.1

@lassoart
Copy link

thank you ricky... it is working great

@Mutpowr
Copy link

Mutpowr commented Jan 29, 2016

I seem to be getting the error Liquid error: Could not find asset snippets/product.liquid . It looks like I do not have the product.liquid file in my snippets director. I am currently using the lucid theme. I assume that's what's causing the problem.

I do have product.form and product.loop in my snippets area. Can someone direct me in the right direction for this? Thank you.

@turso
Copy link

turso commented Jan 2, 2017

I seem to have an issue where the product list footer duplicates every time i load more content. Otherwise it works perfectly. Any ideas what might cause this?

@amjadfaraz
Copy link

It is working for me but the problem is that it work for one next page only for page=2 , why did not move to next page=3,page=4....

@JacksonChristopherHowell

Having the same issue ^

@stephpolinar
Copy link

Thank you so much for this Ricky! It's working perfectly.

@rickydazla
Copy link
Author

Code never dies! ☠️ You’re welcome @steph-periscope ♥️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment