# Wishlist

useWishlist composition API function is responsible, as its name suggests, for interactions with wishlist in your eCommerce. This function returns following values:

  • wishlist - a main data object that contains wishlist structure in platform specific structure
export interface WishlistResponseData {
    key: string;
    items: WishlistItem[];
}
export interface WishlistItem {
    key: string;
    product?: BapiProduct;
    variant?: Variant;
}
  • load - function required to fetch wishlist from a server or create brand new if it doesn't exist.
  • addToWishlist - function for adding products to the wishlist
  • removeFromWishlist - function for removing a product that currently is in the wishlist
  • isOnWishlist - function for checking if a product is currently in the wishlist
  • clearWishlist - function for removing all items currently stored in wishlist
  • loading - a reactive object containing information about loading state of the wishlist

# Wishlist initialization

Wishlist composable is a service designed for supporting a single wishlist and access it everywhere with ease. Initialization of a wishlist requires using load() when calling useWishlist() for the first time. Keep in mind that upon execution of load, the wishlist will get loaded only once, if a wishlist has already been loaded, nothing happens.

import { onSSR } from '@vue-storefront/core';
import { useWishlist } from '@vue-storefront/about-you';

export default {
  setup() {
    const { wishlist, addToWishlist, loadWishlist } = useWishlist();

    onSSR(async () => {
      await loadWishlist();
    });

    return {
      wishlist,
      addToWishlist
    };
  }
};