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 disabled. The system prompts users to select a variant first by navigating to the product details page. Its behavior is driven by configuration options such as routeEmptyWishlistCTA, routeEmptyWishlistCTA and routing via routeProdDetailPage callbacks.

Wishlist container

Configurations

The WishlistItem container provides the following configuration options:

Options	Type	Req?	Description
initialData	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.

Example

The following example demonstrates how to render the WishlistItem container:

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