Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

OrderProductList container

The OrderProductList container displays a list of products associated with a specific order or return. Each item in the list is represented by a product card containing details such as the price, applied discounts, tax information, final amount, and product attributes.

The settings for displaying tax amounts can be configured at Stores > Configuration > Sales > Tax > Order, Invoices, Credit Memos Display Settings.

OrderProductList  container

OrderProductList container

Configurations

The OrderProductList container provides the following configuration options:

Options Type Req? Description
classNamestringNo Allows custom CSS classes to be applied to the form.
orderDataOrderDataModelNo A structured object containing transformed order data. It can be passed as an initial value and used as a fallback if data is not received from the backend.
withHeaderbooleanNo Controls the visibility of the container header, allowing it to be shown or hidden.
showConfigurableOptionsfunctionNo Allows rendering additional product parameters during container integration by defining key-value pairs for further customization.

Example

The following example demonstrates how to render the OrderProductList container:

export default async function decorate(block) {
await orderRenderer.render(OrderProductList, {
routeProductDetails: (product) => `/products/${product.productUrlKey}/${product.product.sku}`,
})(block);
}