Skip to content
Adobe Commerce Storefront

Wishlist container

This container manages and displays the list of products on a user’s wishlist. Configuration options such as routeEmptyWishlistCTA, routeEmptyWishlistCTA and routing via routeProdDetailPage callbacks drive the container’s behavior.

Wishlist container

Wishlist container

Configurations

The Wishlist container provides the following configuration options:

OptionsTypeReq?Description
routeEmptyWishlistCTAfunctionNoSpecifies the URL to show when the wishlist is empty.
routeToWishliststringNoSpecifies the URL to show when the wishlist has products.
moveProdToCartfunctionYesA function that is executed when the user clicks the "move product to cart" button.
routeProdDetailPagefunctionYesA function that returns the URL for the product details page.

Example

The following example demonstrates how to render the Wishlist container:

provider.render(Wishlist, {
    moveProdToCart: cartApi.addProductsToCart,
    routeProdDetailPage: (product) => rootLink(`/products/${product.urlKey}/${product.sku}`),
  });