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

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 ♥️