Getting started

NPM

1
$ npm i ajaxinate
Copied!
1
import {Ajaxinate} from 'ajaxinate';
2
​
3
new Ajaxinate({
4
container: '#AjaxinateContainer',
5
pagination: '#AjaxinatePagination',
6
loadingText: 'Loading more...',
7
});
Copied!

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
    1
    {{ 'ajaxinate.min.js' | asset_url | script_tag }}
    Copied!
  3. 3.
    Setup your collection or blog template, for example:
    collection.liquid
    1
    {% paginate collection.products by 3 %}
    2
    <div id="AjaxinateContainer" >
    3
    {% for product in collection.products %}
    4
    {% include 'product-grid-item' %}
    5
    {% endfor %}
    6
    </div>
    7
    ​
    8
    <div id="AjaxinatePagination">
    9
    {% if paginate.next %}
    10
    <a href="{{ paginate.next.url }}">Loading More</a>
    11
    {% endif %}
    12
    </div>
    13
    {% endpaginate %}
    Copied!
  4. 4.
    Initialize it in your script file, or inline:
    1
    document.addEventListener("DOMContentLoaded", function() {
    2
    var endlessScroll = new Ajaxinate();
    3
    });
    Copied!
  5. 5.
    Configure your settings as desired.
Last modified 1yr ago
Copy link