cuonghuynh
5/31/2018 - 6:29 PM

Shopify - Scroll infinity collection page

Shopify - Scroll infinity collection page

{% paginate collection.products by 20 %}
<!-- the top of your collections.liquid -->

<!-- START PRODUCTS -->
{% for product in collection.products %}
      <!-- START PRODUCT {{ forloop.index | plus:paginate.current_offset }} -->
      <div class="product" id="product-{{ forloop.index | plus:paginate.current_offset }}">
            {% include 'product' with product %}
        </div> 
      <!-- END PRODUCT {{ forloop.index | plus:paginate.current_offset }} -->
{% endfor %}

{% if paginate.next %}
    <div id="more"><p>&darr; <a href="{{ paginate.next.url }}">More</a></p></div>        
{% endif %}

<div id="product-list-foot"></div>
<!-- END PRODUCTS -->

<!-- the bottom of your collections.liquid -->
{% endpaginate %}
    
    
#### JS
{% if template contains 'collection' %}
     function ScrollExecute() {
       if($(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {
           scrollNode = $('#more').last();    
           scrollURL = $('#more p a').last().attr("href");
           if(scrollNode.length > 0 && scrollNode.css('display') != 'none') {
               $.ajax({
                   type: 'GET',
                   url: scrollURL,
                   beforeSend: function() {
                       scrollNode.clone().empty().insertAfter(scrollNode).append('<img src=\"{{ "loading.gif" | asset_url }}\" />');
                       scrollNode.hide();
                   },
                   success: function(data) {
                       // remove loading feedback
                       scrollNode.next().remove();
                       var filteredData = $(data).find(".product");
                       filteredData.insertBefore( $("#product-list-foot") );                   
                   },
                   dataType: "html"
               });
           }
       }
     }

     $(document).ready(function () {
       $(window).scroll(function(){
           $.doTimeout( 'scroll', 200, ScrollExecute);
       });
     });
{% endif %}