I had certain problems by implementing Ajaxinate endless 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:
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:
-
download infinite-scroll.pkgd.js and upload it in shopify assets
-
in theme-liquid, directly above , I implemented:
{{ 'infinite-scroll.pkgd.js' | asset_url | script_tag }}
- 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,
});
});
- -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:
// <----- Start Div ------>
{% for product in collection.products %}
- {% include 'product-card-grid', max_height: max_height %}
{% 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 %}
- {% for i in (1..limit) %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{{ 'homepage.onboarding.product_title' | t }}
$19.99
{% endfor %}
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
// <------ End Div ------->
- 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:
more products loading...
End of content
No more pages to load
- 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 “//”)
