"Infinite" (non-auto) scrolling in Shopify collections

collections.liquid.html

{% 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 %}}

plugins-collection.js

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;
	});
}

theme.liquid.html

$(document).ready(function () {
	attachClickEvent();
});

Hey Ricky, great gist! I've got it working but every second click refreshes to a new page instead of continuing down the page until there's no more products. Have you experienced this before?

It's only used on mobile so if you had a second to check it out on your phone you can go to the-chocolate-ox.myshopify.com, password is vohsko. Thanks ahead of time.

Also, are you available for hire to add this same functionality to a Shopify blog on the same site? If so, my email is travis at integritydesigns dot com.

It does that every second click refresh for me as well. I am going to dig into it. Seriously appreciate you putting this code up!!

Remove or comment out $('li.singleproduct').setAllToMaxHeight(); from line 22 of plugins-collection.js to fix the issue you both are having.

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

thank you ricky... it is working great

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.

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?

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....

Having the same issue ^

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

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