Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Customer Pages
  • Getting Started
    • Create a theme
    • Develop a theme
    • Setup a theme
    • Publish a theme
  • Requirements & Review
    • Overview
    • Main Requirements
    • Review Process
      • UI / UX Review
      • Technical Review
      • Metadata Review
      • Pre-Launch Review
  • Files and Folders Structure
    • Directory structure
    • Twilight.json
  • Twig Template Engine
    • Basic syntax
    • Twilight flavoured twig
  • Theme Architecture
    • Layouts
      • Overview
      • Master Layout
      • Global Variables
      • CSS Variables
      • Salla Icons
      • Custom Fonts
      • Hooks
      • Localizations
    • Pages
      • Overview
      • Home Page
      • Product Pages
        • Products listing
        • Single product
      • Customer Pages
        • Profile
        • Orders list
        • Order details
        • Wishlist
        • Notifications
      • Blog Pages
        • Blog listing
        • Single blog
      • Brand Pages
        • Brands listing
        • Single brand
      • Common Pages
        • Cart
        • Loyalty
        • Thank you
        • Single page
        • Landing Page
    • Componenets
      • Overview
      • Home Components
        • Youtube
        • Fixed banner
        • Testimonials
        • Parallax background
        • Photos slider
        • Store features
        • Square photos
        • Fixed products
        • Products slider
        • Featured products - Style 1
        • Featured Products - Style 2
        • Featured Products - Style 3
        • Brands
        • Enhanced Square Banners
        • Main Links
        • Enhanced Slider
        • Slider Products with Headers
        • Latest Products
        • Vertical Menu with Slider
      • Product Components
        • Essentials
        • Options
      • Common Components
        • Header Components
        • Footer Components
        • Comments component
  • Change Log
  1. Customer Pages

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#

Orders list

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
id
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.
Modified at 2025-03-04 12:54:02
Previous
Profile
Next
Order details