Knowledge Base

Features

• 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.
  
• Falls back gracefully when JavaScript is not available.
  
• We mostly use it on Shopify but it can work on any site.

Getting Started

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.

{{ 'ajaxinate.min.js' | asset_url | script_tag }}

Setup your collection or blog template, for example:

{% paginate collection.products by 3 %}
    <div id="AjaxinateLoop" >
      {% 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();
});

Settings

If you wish to change the names of the selectors you can pass them in with the following settings.

For example:

document.addEventListener("DOMContentLoaded", function() {
  var endlessScroll = new Ajaxinate({
    container: '#AjaxinateLoop',
    pagination: '#AjaxinatePagination'
  });
});

Methods

.destroy()

Description: Stop Ajaxinate from running and unbind the event listeners.