issue with infinite scroll pagination

Shopify Partner
16 1 0

I've got a paginated collection page  that I'm trying to get an infinite scroll working using javascript/ ajax.

The liquid looks something like this: 

 

{% paginate collection.products by 20 %}

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

And the JS:

 

<script>
         function ScrollExecute() {
           if($(document).height() - 100 < ($(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 class="loading_gif" src=\"{{ "ajax-loader.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', 100, ScrollExecute);
           });
         });
</script>

 

This works great but with one issue. The first paginated page works fine, but if there's 3 pages in total for example it doesn't load the third page. So the load function only works once. Any ideas why this only works once?

0 Likes
Shopify Partner
248 9 51

most likely the IF statement is wrong, seems to maybe be only detecting something if it's within the height of the page or something.

0 Likes
Excursionist
16 1 1

i have an issue my site waks.pk when we click any catgeory and goes to pagination and select next page the products on all pages disappeared

0 Likes