Commerce Orders renderings
You can add the Commerce Orders renderings to your storefront to enable customers to see a list of their orders, and details for a single order. The order details and lists are only visible to customers who have logged into their account.
This topic describes the renderings accessible from the Commerce Orders section in the Toolbox.
The Order History rendering and the Recent Orders rendering
You use the Order History rendering and the Recent Orders rendering to provide order details for the customer to review. The Order History rendering contains all of the orders placed by the customer, while the Recent Orders rendering displays only orders placed by the customer within the last 30 days. When you add either rendering to a page in the Experience Editor, it looks like this:
Both lists contain the following information for each order:
-
Order Number – the order number assigned to the order by Sitecore Commerce.
-
Status – the order's current status in the commerce system.
-
Date –the date on which the order was placed.
-
Order details icon – a link to a page with order details.
In the Experience Editor, the list contains placeholder data, and links are disabled.
Configuration
You configure the Order History rendering and the Recent Orders rendering in the Control Properties dialog box. The following configuration properties are available in the Recent Orders Title section in the dialog box.
|
Property |
Use |
|---|---|
|
Display Title |
Configure the Recent Orders header. |
|
Display View All Orders Link |
Display or Hide the View all orders link. |
|
View All Orders Link |
Configure the View all orders link. |
For both renderings, you can configure text, tooltips, and the number of orders displayed. In the Experience Editor, click the rendering and, on the rendering toolbar, click Add or edit the associated content, Edit the related item.
The Order Header, Order Lines and Order Total renderings
In the Experience Editor, the Order Details page in the SXA Storefront template looks like this:
Order Header
The Order Header rendering contains general information about the order: the order number, date, and status. It contains placeholder data in the Experience Editor.
Order Lines
You use the Order Lines rendering to display one line per product in an order, with the following details on each line: a product image, title, unit price, discount type, quantity, total price and, if applicable, a free gift label. In the Experience Editor, the rendering displays placeholder data.
Images displayed for the Order Lines rendering are configured at the site level.
The following configuration properties are available in the Control Properties dialog box.
|
Property |
Use |
|---|---|
|
Styling - Commerce | |
|
Compact Cart |
Displays the Shopping Cart Lines component in smaller and compact view. |
|
Main Title |
Sets the font size to 30px for Shopping Cart Line content. |
|
No Margins |
Sets a narrower margin. |
|
Primary Button Filled |
Displays a solid primary button (if displayed). |
|
Primary Button Line |
Displays the primary button with a border. |
|
Rounded Corners Container |
Displays the Shopping Cart Lines container with rounded corners. |
|
Secondary Button Line |
Displays the secondary button (if displayed) with a border line. |
|
Secondary Title |
Sets the font size to 18px for Shopping Cart Lines content. |
You customize the Order Lines rendering by modifying the Scriban template.
Order Totals
You use the Order Totals rendering to display total amounts for an order. In the Experience Editor, no products are included in the order so the rendering displays 0 for all amounts.