Skip to content
Adobe Commerce Storefront
Docs Playgrounds Videos

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

ReturnsList container

The ReturnsList container displays a complete list of all created returns available to the user. Each return card follows the same structure as the OrderReturns container, allowing consistent presentation of return details. It provides an overview of all return requests, enabling users to manage and track their status in one place.

ReturnsList container

ReturnsList container

Configurations

The ReturnsList container provides the following configuration options:

OptionsTypeReq?Description
slot.ReturnItemsDetailsslotNoProvides the ability to expand information for a specific return card. Allows adding additional data or attributes to make the card more detailed and customizableto specific requirements.
slot.DetailsActionParamsslotNoEnables customization of actions by adding elements, buttons, or links to replace the default setup. This allows for tailored functionality to meet specific user tasks or requirements.
withReturnsListButtonbooleanNoDetermines whether the button at the bottom of the container is visible (applies only in minified view).
classNamestringNoAllows custom CSS classes to be applied to the form for styling.
minifiedViewbooleanNoEnables or disables the minified view of the container.
withHeaderbooleanNoControls the visibility of the container header.
withThumbnailsbooleanNoEnables or disables the display of product thumbnails on order cards.
returnPageSizenumberNoSpecifies the number of items displayed on a single page of the returns list.
returnsInMinifiedViewnumberNoDefines the number of returns visible in the minified view (default is 1).
routeReturnDetailsfunctionNoSpecifies the URL where the return number link redirects the customer.
routeOrderDetailsfunctionNoSpecifies the URL where the customer should be redirected when clicking the order number link (number and token).
routeTrackingfunctionNoSpecifies the URL where the tracking number link redirects the customer.
routeReturnsListfunctionNoDefines the URL for the button click at the bottom of the container.
routeProductDetailsfunctionNoA function that returns the URL for the product details page.

Example

The following example demonstrates how to render the ReturnsList container:

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


  if (!checkIsAuthenticated()) {
    window.location.href = CUSTOMER_LOGIN_PATH;
  } else {
    await orderRenderer.render(ReturnsList, {
      minifiedView: minifiedViewConfig === 'true',
      routeTracking: ({ carrier, number }) => {
        if (carrier?.toLowerCase() === 'ups') {
          return `${UPS_TRACKING_URL}?tracknum=${number}`;
        }
        return '';
      },
      routeReturnDetails: ({ orderNumber, returnNumber }) => `${CUSTOMER_RETURN_DETAILS_PATH}?orderRef=${orderNumber}&returnRef=${returnNumber}`,
      routeOrderDetails: ({ orderNumber }) => `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`,
      routeReturnsList: () => CUSTOMER_RETURNS_PATH,
      routeProductDetails: (productData) => (productData ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
    })(block);
  }
}