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