Wishlist container

This container manages and displays the list of products on a user’s wishlist. A container’s behavior is controlled by configuration options like moveProdToCart, getProductData, and refineProduct, and routing via routeEmptyWishlistCTA, routeProdDetailPage, and routeToWishlist.

Wishlist container

Configurations

The Wishlist container provides the following configuration options:

Options	Type	Req?	Description
routeEmptyWishlistCTA	function	No	Specifies the URL to show when the wishlist is empty.
routeToWishlist	string	No	Specifies the URL to show when the wishlist has products.
moveProdToCart	function	Yes	A function that is executed when the user clicks the "move product to cart" button.
routeProdDetailPage	function	Yes	A function that returns the URL for the product details page.
getProductData	function	No	A function that is executed to retrieve product information when rendering the wishlist.
getRefinedProduct	function	No	A function that is executed to retrieve complex product information (such as product options) when rendering the wishlist.

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}`),
    getProductData: pdpApi.getProductData,
    getRefinedProduct: pdpApi.getRefinedProduct,
  });