Menu Close

Get Support From ShopWired Close

All Systems Operational

Subscribe To Updates
Prefer To Live Chat? Chat directly with ShopWired support Quickest response time

Prefer To Phone?

Call us on 0330 111 2024 (free from landlines and mobiles)

Available 9.30am to 5.30pm Monday to Friday


Send A Message
Response within 24 hours

Menu Close

Menu

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 %}