- No dependencies
- Endless scrolling - scroll to the bottom of the content to load next.
- Endless click - Like endless scroll but click a link to load the next pages.
- We mostly use it on Shopify but it can work on any site.
Add ajaxinate.min.js to the assets folder of your shopify theme, or add it to your vendor files if you are using slate.
Add ajaxinate.min.js before the closing body tag or defer it’s loading.
Setup your collection or blog template, for example:
Initialize it in your script file or inline
If you wish to change the names of the selectors you can pass them in with the following settings.
|pagination||String||A selector to identify the pagination container.|
|container||String||A selector to identify the grid that you want to duplicate.|
|method||String||Can be changed to click to that users must click to load more.|
|offset||Integer||Decrease the distance required to scroll before sending a request.|
|loadingText||String||Change the text of the pagination link during a request.|
|callback||Function||A function fired after the new page has been loaded.|
Description: Stop Ajaxinate from running and unbind the event listeners.