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.

Example

Variables

CustomerOrderPage

page

object

optional

title

string

optional

Title of the page. May include html tags

slug

enum<string>

optional

Meaningful unique identifier that is readable by users. Slug are predifned valued in which each page has a list of allowed values. Below are the allowed values for this page.

Allowed values:

customer.orders.indexcustomer.orders.index.pending

orders

array[object (Order) {18}]

optional

This object is a Paginator as well, so it performs the pagination function and to specify which view should be used to create pagination links. Example: orders.next_page

integer

optional

Id of the order.

reference_id

integer

optional

Id of the order.

created_at

string <date>

optional

Date when the order was created.

sub_total

number

optional

The total price for each product in the order.

total

number

optional

Total price of the order.

cod_cost

number

optional

Cost of cash on delivery.

can_reorder

boolean

optional

Ability to order the same order again.

can_cancel

boolean

optional

Ability of cancelling the order.

can_rate

boolean

optional

Ability of rating the order.

cancel_url

string

optional

URL link of order cancelation.

payment_url

string

optional

URL link of order payment.

shipping

object | null

optional

Order shipping object.

tax

object

optional

Taxes applied on the order.

status

object

optional

Order status.

items

array [object]

optional

Items in the order.

discounts

array [object {2}]

optional

Discounts applied on the order.

is_rated

boolean

optional

Has the order been rated?

rating

object

optional

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.

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.

Example#

Variables#

Components#

JS Web Components#

Hooks#

Usage#

Example

Variables

Components

JS Web Components

Hooks

Usage