Features
- No dependencies
- Multiple methods; 'Endless scroll' automatically adds content as you scroll, whereas 'endless click' adds content on click
- Graceful fallback when JavaScript is not available
- Created for Shopify, but will work on any site
Manual installation
- Add ajaxinate.min.js to the assets folder of your shopify theme, or add it to your vendor files if you are using Slate or a similar method.
- Add the ajaxinate.min.js script src tag before the closing body tag, or defer its loading:
collection.liquid
{{ 'ajaxinate.min.js' | asset_url | script_tag }} 3. Setup your collection or blog template, for example:
{% paginate collection.products by 3 %}
{% for product in collection.products %}
{% include 'product-grid-item' %}
{% endfor %}
{% if paginate.next %}
Loading More
{% endif %}
{% endpaginate %}
4. Initialize it in your script file, or inline:
document.addEventListener("DOMContentLoaded", function() {
var endlessScroll = new Ajaxinate();
});
https://cdn.shopify.com/s/files/1/0015/5982/2434/t/2/assets/ajaxinate.min.js
Tags:
Shopify