Skip to main content
Version: 2.x

Wishlist provider

Since version 2.6

The WishlistProvider

The wishlist provider was introduced in Front-Commerce in version 2.6.0 to unify, simplify and optimise wishlist related queries. To enable the wishlist provider please refer to the migration guide. The wishlist provider supports the following functionalities:

Check if wishlist is enabled​

This is achieved by the use of the useIsWishlistEnabled hook. The hook will return a boolean indicating if the wishlist feature is enabled or not. A common usage example:

const MyComponent = () => {
const isWishlistEnabled = useIsWishlistEnabled();
if (isWishlistEnabled) {
return <div>Wishlist is enabled!</div>;
}
return <div>Wishlist is NOT enabled :(</div>;
};

Load wishlist​

This is achieved by the use of the useLoadWishlist hook. The hook will return an Object with the attributes loading or error or wishlist depending on the query status. A common usage example:

const MyComponent = () => {
const { loading, error, wishlist } = useLoadWishlist();
if (loading) {
return <div>Loading Wishlist...</div>;
}
if (error) {
return <div>Error Loading Wishlist :(</div>;
}
if (!wishlist) {
return <div>Wishlist feature is disabled</div>;
}
return <div>you have {wishlist.items.length} items in your wishlist</div>;
};

Load wishlist item by sku​

This is achieved by the use of the useLoadWishlistItem hook. The hook will return an Object with the attributes loading or error or isInWishlist, wishlistItem depending on the query status. A common usage example:

const MyComponent = ({ sku }) => {
const { loading, error, isInWishlist, wishlistItem } =
useLoadWishlistItem(sku);
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error Loading Wishlist :(</div>;
}
if (!isInWishlist) {
return <div>Product is NOT in your wishlist</div>;
}
return <div>Product is in your wishlist</div>;
};

The WishlistDecorator

When developing stories for components using the WishlistProvider's hooks you need to add the WishlistDecorator above the ApolloDecorator in your story as follows:

  ...
.addDecorator(WishlistDecorator)
.addDecorator(ApolloDecorator(mocks))
...

Providing fake values for your story​

The WishlistDecorator also exports a named export called wishlistMeFakeValues. You should use wishlistMeFakeValues to provide a mock for the me field in the ApolloDecorator mocks as follows:

  ...
.addDecorator(WishlistDecorator)
.addDecorator(
ApolloDecorator({
Query: () => ({
isFeatureActive: () => true,
me: wishlistMeFakeValues("sku1", "sku2", ...),
}),
})
)
...

wishlistMeFakeValues takes skus as input and will generate a wishlist with items corresponding to the skus sent. For example the following call wishlistMeFakeValues("sku1", "sku2") will generate:

{
id: 12, // user id
wishlist: {
id: "10",
items: [
{
id: 1, // item ids start at 1 and auto increment
product: {
sku: "sku1"
}
__typename: "WishlistItem",
},
{
id: 2,
product: {
sku: "sku2"
}
__typename: "WishlistItem",
}
]
itemsQuantity: 2,
isShareable: false,
}
}