Use Wishlist provider

Learn how to use the wishlist provider to manage wishlist related queries.

info

This documentation describes the legacy WishlistProvider implementation that was introduced in version 2 of Front-Commerce. This approach will be updated in future versions of Front-Commerce to provide a more streamlined wishlist usage. While the current implementation is still functional, we recommend being mindful that the API and usage patterns described here may change in upcoming releases.

The wishlist provider was introduced in Front-Commerce to unify, simplify and optimise wishlist related queries. 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 including either loading, 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 including either loading, error, or isInWishlist and wishlistItem depending on the query status. A common usage example:

const MyComponent = ({ sku }: { sku: string }) => {
  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>;
};