# `useWishlist`

# Features

useWishlist composable is responsible for integrating with a wishlist from commercetools. It allows to:

fetch products from the wishlist
add products to the wishlist
remove products from the wishlist
check if a product is on the wishlist

# API

wishlist: Wishlist - a main data object.

type ShoppingList = {
  __typename?: "ShoppingList";
  key?: Maybe<Scalars["String"]>;
  name?: Maybe<Scalars["String"]>;
  nameAllLocales: Array<LocalizedString>;
  description?: Maybe<Scalars["String"]>;
  descriptionAllLocales?: Maybe<Array<LocalizedString>>;
  slug?: Maybe<Scalars["String"]>;
  slugAllLocales?: Maybe<Array<LocalizedString>>;
  customerRef?: Maybe<Reference>;
  customer?: Maybe<Customer>;
  anonymousId?: Maybe<Scalars["String"]>;
  lineItems: Array<ShoppingListLineItem>;
  textLineItems: Array<TextLineItem>;
  custom?: Maybe<CustomFieldsType>;
  deleteDaysAfterLastModification?: Maybe<Scalars["Int"]>;
  id: Scalars["String"];
  version: Scalars["Long"];
  createdAt: Scalars["DateTime"];
  lastModifiedAt: Scalars["DateTime"];
  createdBy?: Maybe<Initiator>;
  lastModifiedBy?: Maybe<Initiator>;
}

type Wishlist = ShoppingList;

load - a function used to retrieve wishlist products. When invoked, it requests data from the API and populates wishlist property. This method accepts a single params object. The params has the following option:
- customQuery?: CustomQuery
```
type CustomQuery = {
  getMe: string
}
```

addItem - a function used to add a new product to the wishlist. When invoked, it submits data to the API and populates wishlist property with updated information. This method accepts a single params object. The params has the following options:

product: ProductVariant

customQuery?: customQuery

type ProductVariant = {
  __typename?: "ProductVariant";
  id: Scalars["Int"];
  key?: Maybe<Scalars["String"]>;
  sku?: Maybe<Scalars["String"]>;
  prices?: Maybe<Array<ProductPrice>>;
  price?: Maybe<ProductPrice>;
  images: Array<Image>;
  assets: Array<Asset>;
  availability?: Maybe<ProductVariantAvailabilityWithChannels>;
  attributesRaw: Array<RawProductAttribute>;
  attributes: ProductType;
  attributeList: Array<Attribute>;
}

type CustomQuery = {
  updateShoppingList: string
}

removeItem - a function that removes products from the wishlist. It submits data to the API and populates the updated wishlist property. This method accepts a single params object. The params has the following options:

product: LineItem

customQuery?: customQuery

type LineItem = {
  __typename?: "LineItem";
  id: Scalars["String"];
  productId: Scalars["String"];
  name?: Maybe<Scalars["String"]>;
  nameAllLocales: Array<LocalizedString>;
  productSlug?: Maybe<Scalars["String"]>;
  productType?: Maybe<ProductTypeDefinition>;
  productTypeRef?: Maybe<Reference>;
  variant?: Maybe<ProductVariant>;
  price: ProductPrice;
  taxedPrice?: Maybe<TaxedItemPrice>;
  totalPrice?: Maybe<Money>;
  quantity: Scalars["Long"];
  state: Array<ItemState>;
  taxRate?: Maybe<TaxRate>;
  supplyChannel?: Maybe<Channel>;
  supplyChannelRef?: Maybe<Reference>;
  distributionChannel?: Maybe<Channel>;
  distributionChannelRef?: Maybe<Reference>;
  discountedPricePerQuantity: Array<DiscountedLineItemPriceForQuantity>;
  lineItemMode: LineItemMode;
  priceMode: LineItemPriceMode;
  customFieldsRaw?: Maybe<Array<RawCustomField>>;
  customFields?: Maybe<Type>;
  custom?: Maybe<CustomFieldsType>;
  shippingDetails?: Maybe<ItemShippingDetails>;
  inventoryMode?: Maybe<ItemShippingDetails>;
  customFieldList?: Maybe<Array<CustomField>>;
}

type CustomQuery = {
  updateShoppingList: string
}

clear - a function that removes all products from the wishlist and populates clear wishlist property.

isInWishlist - a function that checks if a product is on the wishlist. It returns boolean value. This method accepts a single params object. The params has the following option:

product: ProductVariant

type ProductVariant = {
  __typename?: "ProductVariant";
  id: Scalars["Int"];
  key?: Maybe<Scalars["String"]>;
  sku?: Maybe<Scalars["String"]>;
  prices?: Maybe<Array<ProductPrice>>;
  price?: Maybe<ProductPrice>;
  images: Array<Image>;
  assets: Array<Asset>;
  availability?: Maybe<ProductVariantAvailabilityWithChannels>;
  attributesRaw: Array<RawProductAttribute>;
  attributes: ProductType;
  attributeList: Array<Attribute>;
}

loading: boolean - a reactive object containing information about loading state of the cart.

error: UseWishlistErrors - reactive object containing the error message, if some properties failed for any reason.

interface UseWishlistErrors {
  addItem: Error;
  removeItem: Error;
  load: Error;
  clear: Error;
}

# Getters

getItems - returns list of products on the wishlist
getItemName - returns product's name from the wishlist.
getItemImage - returns product's image from the wishlist.
getItemPrice - returns product's price from the wishlist.
getItemQty - returns a quantity of product which is on the wishlist.
getItemAttributes - returns product variant attribute chosen by its name.
getItemSku - returns product's SKU code.
getTotals - returns price of products.
getTotalItems - returns an amount of all items that are currently on the wishlist.

getFormattedPrice - returns price in a formatted manner, taking into account local specifics.

interface WishlistGetters {
  getTotals: (wishlist: Wishlist) => AgnosticTotals;
  getItems: (wishlist: Wishlist) => ShoppingListLineItem[];
  getItemName: (product: ShoppingListLineItem) => string;
  getItemImage: (product: ShoppingListLineItem) => string;
  getItemPrice: (product: ShoppingListLineItem) => AgnosticPrice;
  getItemQty: (product: ShoppingListLineItem) => number;
  getItemAttributes: (product: ShoppingListLineItem, filterByAttributeName?: string[]) => ({});
  getItemSku: (product: ShoppingListLineItem) => string;
  getTotalItems: (wishlist: Wishlist) => number;
  getFormattedPrice: (price: number) => string;
};

interface AgnosticTotals {
  total: number;
  subtotal: number;
  special?: number;
  [x: string]: unknown;
}

interface AgnosticPrice {
  regular: number | null;
  special?: number | null;
}

type Wishlist = {
  __typename?: "ShoppingList";
  key?: Maybe<Scalars["String"]>;
  name?: Maybe<Scalars["String"]>;
  nameAllLocales: Array<LocalizedString>;
  description?: Maybe<Scalars["String"]>;
  descriptionAllLocales?: Maybe<Array<LocalizedString>>;
  slug?: Maybe<Scalars["String"]>;
  slugAllLocales?: Maybe<Array<LocalizedString>>;
  customerRef?: Maybe<Reference>;
  customer?: Maybe<Customer>;
  anonymousId?: Maybe<Scalars["String"]>;
  lineItems: Array<ShoppingListLineItem>;
  textLineItems: Array<TextLineItem>;
  custom?: Maybe<CustomFieldsType>;
  deleteDaysAfterLastModification?: Maybe<Scalars["Int"]>;
  id: Scalars["String"];
  version: Scalars["Long"];
  createdAt: Scalars["DateTime"];
  lastModifiedAt: Scalars["DateTime"];
  createdBy?: Maybe<Initiator>;
  lastModifiedBy?: Maybe<Initiator>;
}

type ShoppingListLineItem = {
  __typename?: "ShoppingListLineItem";
  id: Scalars["String"];
  productId: Scalars["String"];
  variantId?: Maybe<Scalars["Int"]>;
  productTypeRef: Reference;
  productType: ProductTypeDefinition;
  quantity: Scalars["Int"];
  addedAt: Scalars["DateTime"];
  name?: Maybe<Scalars["String"]>;
  nameAllLocales: Array<LocalizedString>;
  deactivatedAt?: Maybe<Scalars["DateTime"]>;
  custom?: Maybe<CustomFieldsType>;
  productSlug?: Maybe<Scalars["String"]>;
  variant?: Maybe<ProductVariant>;
}

# Example

import { onSSR } from '@vue-storefront/core';
import { useWishlist, wishlistGetters } from '@vsf-enterprise/commercetools';

export default {
  setup() {
    const { load: loadWishlist } = useWishlist();

    const wishlistItems = computed(() => wishlistGetters.getItems());

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

    return {
      loadWishlist,
      wishlistItems
    };
  }
};

← useUserShipping

Optimizing Bundle Size →

# useWishlist

# Features

# API

# Getters

# Example

# `useWishlist`