Salla Docs
Orders list
This orders list page template is designated for listing customers orders where customers can check their existing orders to view the status, price, order number and make changes where applicable.
└── src
├── views
| ├── pages
| | ├── customer
| | | ├── orders
| | | | ...
| | | | ├── index.twig
...
Example
Variables
Components
This page extends the default layout master.twig, and accordingly, it takes the unified look-and-feel. For example, all of the header's and footer's components will be added automatically to this page.
In addition, the User model is accessible automatically on this page because it's included in the master.twig layout file.
JS Web Components
Customer Orders List page may include the following JS Web Components, which are ready-made designs and style-sets of web components for Salla stores.
- Button
<salla-button> - Infinite Scroll
<salla-infinite-scroll>
Hooks
The orders list page template calls for the following hooks in order to inject extra information.
{% hook 'customer:orders.index.items.start' %}
{% hook 'customer:orders.index.items.end' %}
Usage
Mainly, in this page's template, the list of the customer's orders are displyed using a for-loop statement. This can be done easily by using the orders object as we see in the following example. Note that the Salla component salla infinite scroll has been used to ease the pagination process.
{% if orders|length %}
<salla-infinite-scroll next-page="{{ orders.next_page }}" item=".customer-row">
<table>
<thead>
<tr>
<th scope="col">{{ trans('pages.thank_you.order_id') }}</th>
<th scope="col">{{ trans('pages.orders.total') }}</th>
<th scope="col">{{ trans('pages.orders.date') }}</th>
<th scope="col">{{ trans('pages.orders.status') }}</th>
</tr>
</thead>
<tbody>
{% for order in orders %}
<tr class="customer-row">
<td><span>{{ trans('pages.thank_you.order_id') }}:</span> #{{ order.reference_id }}</td>
<td><span>{{ trans('pages.orders.total') }}:</span> {{ order.total|money }}</td>
<td><span>{{ trans('pages.orders.date') }}:</span> {{ order.created_at|date("l j F Y") }}</td>
<td>
<span>{{ trans('pages.orders.status') }}:</span>
<span> {{ order.status.name }} </span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</salla-infinite-scroll>
{% else %}
<div>
<span>{{ trans('pages.orders.non_orders') }}</span>
</div>
{% endif %}