Infinite scroll / endless scrolling with infinite-scroll.com

[simonski]

I had certain problems by implementing Ajaxinate endless scroll:

Ajaxinate infinite scroll 

The issue was that after clicking on a product and clicking the back button, the scroll position was lost. I tried to implement "Snapback cache", to solve the back button issue, but it didn't work properly:

Insert Snapback cache 

After clicking the back button in the browser, the position was restored perfectly, but the next loaded pages were starting with page 1 again.

So now I implemented the infinite scroll of infinite-scroll.com, they have a quite good solution to solve the back button problem, and a commercial licence is a one time fee of 25$, which is a fair price to me. 

So I show you how I implemented infinite-scroll in my minimal theme to save you some time:

1. download infinite-scroll.pkgd.js and upload it in shopify assets

2. in theme-liquid, directly above </head>, I implemented:

{{ 'infinite-scroll.pkgd.js' | asset_url | script_tag }}

3. in theme.js right at the end, insert following:

$(document).ready(function() {
    $('.infiniteloop').infiniteScroll({
  // options
  path: '.pagination__next',
  append: '.loopload',
  status: '.page-load-status',
  hideNav: '.pagination',
  //scrollThreshold: 1000,
});
});

4. -Open your sections folder and open collection-template.liquid

-Find your for loop. You need to wrap a div with the class of "infiniteloop" before the forloop begins and after the forloop ends:

     <div class="infiniteloop">  // <----- Start Div ------>
        {% for product in collection.products %}
          <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
            {% include 'product-card-grid', max_height: max_height %}
          </li>
        {% else %}
          {% comment %}
          Add default products to help with onboarding for collections/all only.

          The onboarding styles and products are only loaded if the
          store has no products.
          {% endcomment %}
          {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
            <li class="grid__item">
              <div class="grid grid--uniform">
                {% for i in (1..limit) %}
                  <div class="grid__item {{ grid_item_width }}">
                    <div class="grid-view-item">
                      <a href="#" class="grid-view-item__link">
                        <div class="grid-view-item__image">
                          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                        </div>
                        <div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
                        <div class="grid-view-item__meta">
                          <span class="product-price__price">$19.99</span>
                        </div>
                      </a>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </li>
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
        </div> // <------ End Div -------> ​

5. Then find your pagination at the end of collection-template.liquid, by default is says this:

{% if paginate.pages > 1 %}
      {% include 'pagination' %}
    {% endif %}​

Replace that with this:

    <div class="page-load-status">
  <div class="infinite-scroll-request loader-ellips">
    more products loading...
  </div>
  <p class="infinite-scroll-last">End of content</p>
  <p class="infinite-scroll-error">No more pages to load</p>
</div>
<p class="pagination">
    <a class="pagination__next" href="{{ paginate.next.url }}"></a>
</p>

6. Check if it's working (on collection pages). In my case, the infinite scroll was firing as soon as i started scrolling, so i checked in the js file why the offsets of the scroll position was calculated wrong. I found it and solved it like this:

I changed infinite-scroll.pkgd.js in line 1368

var bottom = this.top + this.element.clientHeight;

with following

var bottom = Math.max( window.innerHeight, document.body.clientHeight )

Then it was firing a bit late, so I implemented 

scrollThreshold: 1000 

in theme.js (by removing the "//") 

[simonski]

I forgot one thing, I added the class "loopload" in the for- loop, just the line below the for loop starts in the collection-template.liquid, so the line looks like this:

<div class="grid__item {{grid_item_width}} loopload">

[mtseng]

This seems like the standard install for infinte-scroll.com

Is the back button/save position working? Did you have to update/add any additional options to make that work?

[WiseCrackers1]

Thanks for your post.  I'm using minimal theme as well.  Just to be sure, I can start with going to infinite-scroll.com or I need to add some codes before that?  Thanks.  Al

[JakobZabala]

Thanks for this! but how did you solve the retain-position-in-infinite scroll problem? When I hit back on browser, i get loaded from page 2 without content from page 1

[simonski]

Like in the demo. It is loaded beginning page 2 after back button. So I put in a title with adding " - page 2" to the collection title. so at least the user knows he's on page 2.

[JakobZabala]

Good solution!

I also can't seem to figure out how to stop infinite scroll from making requests for new pages when there aren't any... the instructions in the demo don't work on my solution could you possibly show how yours works?

[KetanKumar]

@JakobZabala 

Thanks post can you please try this 

https://www.huratips.com/tech-tips/how-to-add-infinite-scroll-pagination-to-shopify-collection-pages...

[JakobZabala]

Hi,

I have tried this method with no luck, infinite scroll works for me, except for my one problem

[simonski]

I only start infinite scroll if I have more than 29 items on my collection page, as I have a pagination of 30 products per page. This is what I put in my theme.js:

$(function () {
  if ($('.loopload').length>29){
    var $container = $('.ajaxloop').infiniteScroll({
    // options
      path: '.pagination__next',
      append: '.loopload',
      status: '.page-load-status',
      hideNav: '.pagination',
      scrollThreshold: 1400,
    });
    $('#next-pagination-check').addClass('initialised');
  }
});