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 ↗
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:
{{ 'ajaxinate.min.js' | asset_url | script_tag }}
Setup your collection or blog template, for example:
{% 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 %}
Initialize it in your script file, or inline:
document.addEventListener("DOMContentLoaded", function() { var endlessScroll = new Ajaxinate(); });
Configure your settings as desired.
Last updated
Was this helpful?