Splitting orders on the account page into multiple pages

When a customer logs into their account on your website they'll usually be shown a table displaying the orders they have placed.

By default, your theme will be set to show all the orders that a customer has placed. If your customers have placed a very large number of orders then you may want to add pagination onto this table to help load the page faster.

Instructions for adding pagination to this page are below:

1. You will need to add a setting orders_per_page to your theme's settings.json file. This is best placed in the 'other settings' section.

{
    "label": "Orders per page displayed on account home",
    "name": "orders_per_page",
    "type": "text",
    "defaultValue": 12
}

2. You'll then need to set the number of orders per page on the theme settings page.

3. You'll need to use the page editor to edit the account_home.twig file.

The following variables are available to implement pagination:

orders_per_page Returns the orders set per page

total_pages Returns the number of pages of orders

current_page Returns true if the page is the current page

order_count Returns the total number of orders

4. The following code will implement basic pagination...

{% if total_pages > 1 %}
    {% for page in 1..total_pages %}
        <a href="/account?page={{ page }}" class="{{ page == current_page ? 'current' : '' }}">{{ page }}</a>
    {% endfor %}
{% endif %}

If your theme is built using the Bootstrap Framework you can take advantage of the pre-styled links by using the following mark-up...

{% if total_pages > 1 %}
    <nav aria-label="Page navigation">
        <ul class="pagination">
            {% if current_page > 1 %}
                <li class="page-item">
                    <a class="page-link" href="/account?page={{ current_page - 1 }}">
                        Previous
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    Previous
                </li>
            {% endif %}
            {% for page in 1..total_pages %}
                {% if page == current_page %}
                    <li class="page-item active">
                        <a class="page-link">{{ page }}</a>
                    </li>
                {% else %}
                    <li class="page-item">
                        <a class="page-link" href="/account?page={{ page }}">
                            {{ page }}
                        </a>
                    </li>
                {% endif %}
            {% endfor %}
            {% if current_page < total_pages %}
                <li class="page-item">
                    <a class="page-link" href="/account?page={{ current_page + 1 }}">
                        Next
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    Next
                </li>
            {% endif %}
        </ul>
    </nav>
{% endif %}

If your theme is built using the Foundation Framework...

{% if total_pages > 1 %}
    <div class="text-center">
        <ul class="pagination" role="navigation" aria-label="Pagination">
            {% if current_page > 1 %}
                <li class="pagination-previous">
                    <a href="/account?page={{ current_page - 1 }}">
                        Previous
                    </a>
                </li>
            {% else %}
                <li class="pagination-previous disabled">
                    Previous
                </li>
            {% endif %}
            {% for page in 1..total_pages %}
                {% if page == current_page %}
                    <li class="current">
                        {{ page }}
                    </li>
                {% else %}
                    <li>
                        <a href="/account?page={{ page }}">
                            {{ page }}
                        </a>
                    </li>
                {% endif %}
            {% endfor %}
            {% if current_page < total_pages %}
                <li class="pagination-next">
                    <a href="/account?page={{ current_page + 1 }}">
                        Next
                    </a>
                </li>
            {% else %}
                <li class="pagination-next disabled">
                    Next
                </li>
            {% endif %}
        </ul>
    </div>
{% endif %}