WishlistItem container

The WishlistItem container manages and displays a single product from a wishlist. It allows users to interact with the product, such as moving it to the cart or navigating to the product details page.

For complex products that have no variant selected in the wishlist, the Move To Cart button becomes a Customize button. Users must select a variant first by navigating to the product details page. Its behavior is driven by configuration options such as moveProdToCart, getProductData, getRefinedProduct and routing via routeProdDetailPage callbacks.

WishlistItem container

Configurations

The WishlistItem container provides the following configuration options:

Options	Type	Req?	Description
item	Item	Yes	The wishlisted item.
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 item.
getRefinedProduct	function	No	A function that is executed to retrieve complex product information (such as product options) when rendering the wishlist item.

Example

The following example demonstrates how to render the WishlistItem container:

provider.render(WishlistItem, {
    item: sampleWishlistItem,
    moveProdToCart: cartApi.addProductsToCart,
    routeProdDetailPage: (product) => rootLink(`/products/${product.urlKey}/${product.sku}`),
    getProductData: pdpApi.getProductData,
    getRefinedProduct: pdpApi.getRefinedProduct
  });