Getting started
$ npm i ajaxinate
import {Ajaxinate} from 'ajaxinate';
new Ajaxinate({
container: '#AjaxinateContainer',
pagination: '#AjaxinatePagination',
loadingText: 'Loading more...',
});
- 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.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: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.Initialize it in your script file, or inline:document.addEventListener("DOMContentLoaded", function() {var endlessScroll = new Ajaxinate();});
- 5.Configure your settings as desired.
Last modified 2yr ago