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 "//")
