Create your own ecommerce website and start selling successfully with ShopWired today
Splitting orders on the account page into multiple pages
Theme Customisations - Coding
Before you proceed: |
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 %} |