Ajaxify

Shopify ajax pagination plugin

Download

View Source on GitHub
View Demo Store

Made with by

Features

Demos

Endless Scroll

Endless Click

Ajaxinate

Getting Started

Ajaxify requires jQuery!

Add ajaxify.min.js to the assets folder of your shopify theme.

Add ajaxify.min.js before the closing body tag

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

Setup your collection or blog template, for example:

{% paginate collection.products by 3 %}
  <div id="MainContent" class="container">
    <div class="row">

      <div class="EndlessScroll">

        {% for product in collection.products %}
          {% include 'product-grid-item' %}
        {% endfor %}

        {% if paginate.next %}
          <div class="pagination">
            <a href="{{ paginate.next.url }}">Loading More</a>
          </div>
        {% endif %}

      </div>

    </div>
  </div>
{% endpaginate %}
Note:

Default pagination will work for ajaxinate

{% if paginate.pages > 1 %}
  <div class="pagination">
    {{ paginate | default_pagination }}
  </div>
{% endif %}

Initialize it in your script file or inline

$(document).ready(function(){
  ajaxify();
});

Settings

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

For example:

$(document).ready(function(){
  ajaxify({
    linkParent: '.custom-pagination',
    parentContainer: '#page-content'
    });
});

linkParent

Type

String

Default

.pagination

Description

Set the selector of the pagination container. Should only be a class as the script will generate multiple.


parentContainer

Type

String

Default

#MainContent

Description

Set the selector of the top level container. Can be class or id.


endlessScrollContainer

Type

String

Default

.EndlessScroll

Description

Set the selector of the content container. Should only be a class as the script will generate multiple.


endlessClickContainer

Type

String

Default

.EndlessClick

Description

Set the selector of the content container. Should only be a class as the script will generate multiple.


endlessOffset

Type

Integer

Default

0

Description

Set the distance from the bottom of the page to fire the endless scroll, in pixels. The higher the number the sooner it will fire.


ajaxinateContainer

Type

String

Default

.Ajaxinate

Description

Set the selector of the content container. Should only be a class as the script will generate multiple.


Type

String

Default

.page a

Description

Set the selector for the pagination links. Should only be a class as the script will generate multiple.


fade

Type

String

Default

fast

Description

Set the speed of the fade animation.


textChange

Type

String

Default

Loading

Description

Set the text string to change during the loading process.