useWishlist

Features

useWishlist composable is responsible, for integrating with wishlist from Spryker. It allows to:

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

API

• wishlist: Wishlist - a main data object.

interface Wishlist extends WishlistAttributes {
  id: string;
  products: Product[];
}

interface Product extends ProductVariant {
  type: string;
  stock?: number;
  images?: ProductImages[];
  price?: number;
  prices?: ProductPrice[];
  reviews?: ProductReview[];
  labels?: ProductLabel[];
  categoryNodes?: Category[];
  concreteProducts?: Product[];
}

---

• load - 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:

load(): Promise<void>;

---

• addItem - function used to add new product to 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: Product

interface Product extends ProductVariant {
  type: string;
  stock?: number;
  images?: ProductImages[];
  price?: number;
  prices?: ProductPrice[];
  reviews?: ProductReview[];
  labels?: ProductLabel[];
  categoryNodes?: Category[];
  concreteProducts?: Product[];
}

addItem(product: Product): Promise<void>;

---

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

  • product: Product

interface Product extends ProductVariant {
  type: string;
  stock?: number;
  images?: ProductImages[];
  price?: number;
  prices?: ProductPrice[];
  reviews?: ProductReview[];
  labels?: ProductLabel[];
  categoryNodes?: Category[];
  concreteProducts?: Product[];
}

removeItem(product: Product): Promise<void>;

---

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

clear(): Promise<void>;

---

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

  • product: Product

interface Product extends ProductVariant {
  type: string;
  stock?: number;
  images?: ProductImages[];
  price?: number;
  prices?: ProductPrice[];
  reviews?: ProductReview[];
  labels?: ProductLabel[];
  categoryNodes?: Category[];
  concreteProducts?: Product[];
}

isOnWishlist({ product: Product }): boolean;

---

• 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 wishlist

• getItemName - returns product's name from wishlist.

• getItemImage - returns product's image from wishlist.

• getItemPrice - returns product's price from wishlist.

• getItemQty - returns quantity of product which is on wishlist.

• getItemAttributes - returns product variant attribute chosen by its name.

• getItemSku - returns product's SKU code.

• getTotals - returns price of products.

• getTotalItems - returns amount of all items that are currently on wishlist.

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

interface WishlistGetters {
  getTotals: (wishlist: Wishlist) => AgnosticTotals;
  getItems: (wishlist: Wishlist) => Product[];
  getItemName: (product: Product) => string;
  getItemImage: (product: Product) => string;
  getItemPrice: (product: Product) => AgnosticPrice;
  getItemQty: (product: Product) => number;
  getItemAttributes: (product: Product, filterByAttributeName?: string[]) => {};
  getItemSku: (product: Product) => 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;
}

interface Wishlist extends WishlistAttributes {
  id: string;
  products: Product[];
}

interface Product extends ProductVariant {
  type: string;
  stock?: number;
  images?: ProductImages[];
  price?: number;
  prices?: ProductPrice[];
  reviews?: ProductReview[];
  labels?: ProductLabel[];
  categoryNodes?: Category[];
  concreteProducts?: Product[];
}

Example

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

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

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

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

    return {
      loadWishlist,
      wishlistItems,
    };
  },
};