View account order details

This widget displays the contents of the order, including order items, shipping details payment details and other items.

You could customize this widget by adding widgets for loyalty information, price overrides and split shipping.

Note that this widget can be used in both account-based and storefront environments.

Widget Name: agentAcountOrderDetails

Display Name: Order Details - Agent

Supported Page Types: agentOrderDetails page

Layouts: Order Details Layout - Agent

Elements: To understand how these elements are used, refer to the widget’s code view:

• add-to-purchase-list
• agent-email-order-details
• agent-order-payment-details
• agent-order-price-details
• agent-order-refresh
• agent-order-summary
• agent-promotion-summary
• copy-order
• dynamic-property
• return-order
• scheduled-order-actions
• scheduled-order-executionList
• scheduled-order-instruction
• shopping-cart-details

Add an image to an account detail page example

The following is an example of a customization that you could make to the account detail page. This example shows you how to add an image of a company logo to the account’s page.

Note that the example code in this section is for illustrative purposes only; it is not intended to be production-ready, and may not adequately handle all possible use cases or implement the exact behavior you want.

1. Download the agentAccountOrderDetails element.
2. Copy the element to change. For example, the agent-order-summary element.
3. Edit the template code. Access the $parent.user().organizations array can access the organizationLogo.

   Note: When editing this code, ensure that you have a check for an array index. The organizationLogo is returned in response to the getOrganization endpoint. Organization details are stored in the user view model by default, which can be accessed from the widget using widget.user().

4. Upload the element as an extension.
5. Drag and drop the new element and remove the existing agent-order-summary element from the Design page.
6. Publish the changes.

Display shipping tracking information

The following is an example of a customization that you could make to the account detail page. This example shows you how to display shipping tracking information for each line item of the order, or for each shipping group.

1. Download the agentAccountOrderDetails element.
2. Copy the shopping-carts-details element.
3. Edit the template code where trackingInfo is read from $data.trackingInfo.
4. Upload the edited element as an extension.
5. Drag and drop the new element and remove the existing shopping-carts-details element from the design studio.
6. Publish the changes.