Shopify - Infinite Scrolling on Collection Pages

collection.liquid

{% paginate collection.products by 24 %}
<div class="devProductContainer">
	{% for product in collection.products %}
			{% include 'product-loop' %} 
	{% endfor %} 
</div>
<!--pagination links-->
<div id="pagination"> {{ paginate | default_pagination }} </div>
{% endpaginate %}
<style>
#pagination{ display: none; }
</style>

InfiniteScroller.liquid

//This file needs to be hooked at the bottom of theme.liquid right before the </body>

{% if template.name contains 'collection' %}
{% assign product_per_page = 24 %}
<script>
$(document).ready(function() {
    var counter = 2
    var pages = Math.ceil('{{ collection.all_products_count }}' / {{ product_per_page }});
    var maxCount = pages + 1;
    console.log("Pages Found: " + pages);

    console.log("Collection Title: {{ collection.handle }}");

      $('#pagination a').on('click' , function(e) {

      e.preventDefault();

      var getUrl = "{{shop.url}}/collections/{{ collection.handle }}?page="+counter;
      console.log(getUrl);
      $.ajax({
        url: getUrl,
        type:'GET',
//         beforeSend: function() {
//           showPopup('.loading');
//         },
        success: function(data){
          //hidePopup('.loading');
          $(".devProductContainer").append($(data).find('.devProductContainer').html());
          counter++;

          if(counter == maxCount ) {
            $('#more').empty();
          }
        }
      });
    });
    $(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == $(document).height()) {
           $('#pagination a').eq(0).trigger('click');
         	console.log('clicked');
       }
    });  
  
  });  
</script>
{% endif %}