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.
withSearch	boolean	No	Whether to show the order search box in the full-size view. Disabled by default.
searchScope	string	No	How far a search term reaches: within the selected date range (`selectedDate`, the default) or across all orders (`allOrders`).
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',
     withSearch: true,
     searchScope: 'allOrders',
     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);
 }
}

Order search

Set withSearch to true to add a search box above the order list in the full-size view. Customers use it to find their orders by order number, product name, or product SKU.

The search runs when the customer presses Enter or selects the search button, not as they type. An order lookup does not need the type-ahead behavior used for product search, so this avoids sending a request on every keystroke.

A search term must be between three and 100 characters. The container does not submit a term shorter than three characters.

Use searchScope to set how far a search reaches:

• selectedDate (default): the search stays within the date range the customer has selected.
• allOrders: the search covers the customer’s full order history, regardless of the selected date.

Most storefronts set searchScope to allOrders so a customer can find any order without first widening the date filter.

The search box appears in the full-size view only, not in the minified view.

Note

Order search filters by order number, historical product name, and historical product SKU. Historical values are the ones stored on the order when it was placed, so a search still matches after the catalog product is renamed or removed.

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.