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
    };
  }
};