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.

Configurations

The OrderProductList container provides the following configuration options:

Options	Type	Req?	Description
className	string	No	Allows custom CSS classes to be applied to the form.
orderData	OrderDataModel	No	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.
withHeader	boolean	No	Controls the visibility of the container header, allowing it to be shown or hidden.
showConfigurableOptions	function	No	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);
}