OrdersList container

The OrdersList container is a standalone component designed to provide access to a customer’s order history and detailed order information. It can be rendered in a full-size or minified view.

Use the full-size view when the OrdersList component functions as a standalone page. This view displays the complete list of orders, includes a filter for filtering by the date placed. It also features pagination, which is visible if the number of orders exceeds one page.

Full-size view with no order list items

Full-size view with multiple items

The minified view can be usef when the container is part of a page alongside other components, such as a user account dashboard. In this view, only a few of the most recent orders are displayed (the number is configurable). A View all orders button is rendered at the bottom, which navigates the customer to the full order history page.

Minified view with no items

Minified view with multiple items

OrdersList configurations

The OrdersList container provides the following configuration options:

Options	Type	Req?	Description
className	string	No	Allows custom CSS classes to be applied to the address container.
withHeader	boolean	No	Whether to show/hide container header.
minifiedView	boolean	No	Whether to enable/disable minified view.
withThumbnails	boolean	No	Whether to enable/disable product thumbnails on order cards.
withFilter	boolean	No	Whether to enable/disable filter dropdown.
ordersInMinifiedView	number	No	Used only in minified view. Defines how many orders are visible in a minified view (default: 1).
pageSize	number	No	Sets the pagination size (default: 10).
routeOrdersList	function	No	Used only in minified view. Determines where the “View all orders” button redirects the customer.
routeOrderDetails	function	No	Determines where a click on the order card button (a chevron icon to the right of the order card) redirects the customer.
routeReturnDetails	function	No	Determines where the return number link redirects the customer.
routeTracking	function	No	Determines where the tracking number link redirects the customer.
routeOrderProduct	function	No	Determines where the product thumbnail link redirects the customer.
slots.OrdersListAction	slot	No	Overrides or extends order actions (right side of the order card).
slots.OrdersListCard	slot	No	Overrides or extends order card details.
slots.OrderItemImage	slot	No	Overrides the product thumbnail image rendered on each order item. Receives `data` (OrderItem) and `defaultImageProps` (ImageProps) as context.

Example

The following example demonstrates how to use the OrdersList container:

export default async function decorate(block) {
 const { 'minified-view': minifiedViewConfig = 'false' } = readBlockConfig(block);

 if (!checkIsAuthenticated()) {
   window.location.href = CUSTOMER_LOGIN_PATH;
 } else {
   await accountRenderer.render(OrdersList, {
     minifiedView: minifiedViewConfig === 'true',
     routeOrdersList: () => CUSTOMER_ORDERS_PATH,
     routeOrderDetails: (orderNumber) => `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`,
     routeReturnDetails: ({ orderNumber, returnNumber }) => `${CUSTOMER_RETURN_DETAILS_PATH}?orderRef=${orderNumber}&returnRef=${returnNumber}`,
     routeOrderProduct: (productData) => (productData ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
   })(block);
 }
}

Administrator-assisted orders

When the seller-assisted buying feature is in use, the OrdersList container shows a “Placed by an administrator” label on any order where adminAssistedOrder > 0. The label appears automatically in both the minified and full-size views. No configuration is required.

Order card showing the administrator label in the orders list

To customize the label text, override the dictionary key in the account initializer:

• Minified view: Account.minifiedView.OrdersList.OrdersListCard.placedByAdministrator
• Full-size view: Account.fullSizeView.OrdersList.OrdersListCard.placedByAdministrator

For the end-to-end flow, see Seller-assisted buying.