Links

Getting started

NPM

$ npm i ajaxinate
import {Ajaxinate} from 'ajaxinate';
new Ajaxinate({
container: '#AjaxinateContainer',
pagination: '#AjaxinatePagination',
loadingText: 'Loading more...',
});

Manual installation

IMPORTANT! If you are using Ajaxinate without a package manager, use the v2 branch
  1. 1.
    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.
  2. 2.
    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. 3.
    Setup your collection or blog template, for example:
    collection.liquid
    {% paginate collection.products by 3 %}
    <div id="AjaxinateContainer" >
    {% for product in collection.products %}
    {% include 'product-grid-item' %}
    {% endfor %}
    </div>
    <div id="AjaxinatePagination">
    {% if paginate.next %}
    <a href="{{ paginate.next.url }}">Loading More</a>
    {% endif %}
    </div>
    {% endpaginate %}
  4. 4.
    Initialize it in your script file, or inline:
    document.addEventListener("DOMContentLoaded", function() {
    var endlessScroll = new Ajaxinate();
    });
  5. 5.
    Configure your settings as desired.