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.

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.

OrdersList configurations

The OrdersList container provides the following configuration options:

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);
 }
}