Spryker VSF

# useCart

# Features

useCart composable can be used to:

  • load cart information,
  • add, update and remove items in the cart,
  • applying and removing coupons,
  • checking if product is already added to the cart.

# API

  • cart: Cart - a main data object.
type Cart = {
  data: Partial<GuestCartData | UserCartData>;
  products: CartItem[];
  vouchers: Voucher[];
  giftCards: GiftCard[];
};
  • load - function required to fetch cart from a server or create brand new if it doesn't exist.
load(): Promise<void>;

  • addItem - function for adding products to the cart. This method accepts a single params object. The params has the following options:

    • product: ProductVariant

    • quantity: any

addItem(params: {
    product: Product;
    quantity: number;
}): Promise<void>;

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

  • updateItemQty - function for updating quantity of a product that is already in the cart. This method accepts a single params object. The params has the following options:

    • product: LineItem

    • quantity: number

updateItemQty(params: {
    product: CartItem;
    quantity?: number;
}): Promise<void>;

type CartItem = {
  meta: CartItemInclude;
  data: CartConcreteProductAttributes;
  image: string;
  price: Record<'current', number> & Record<string, CartConcreteProductPrice>;
};

  • removeItem - function for removing a product that currently is in the cart. This method accepts a single params object. The params has the following options:

    • product: LineItem
removeItem(params: {
    product: CartItem;
}): Promise<void>;

type CartItem = {
  meta: CartItemInclude;
  data: CartConcreteProductAttributes;
  image: string;
  price: Record<'current', number> & Record<string, CartConcreteProductPrice>;
};

  • isOnCart - function for checking if a product is currently in the cart. This method accepts a single params object. The params has the following option:

    • product: Product
isOnCart: ({ product: PRODUCT }: { product: Product }) => boolean;

interface Product extends ProductVariant {
  type: string;
  stock?: number;
  images?: ProductImages[];
  price?: number;
  prices?: ProductPrice[];
  reviews?: ProductReview[];
  labels?: ProductLabel[];
  categoryNodes?: Category[];
  concreteProducts?: Product[];
}
  • clear - function for removing all items currently stored in cart.
clear(): Promise<void>;

  • applyCoupon - function for applying coupon to cart. This method accepts a single params object. The params has the following options:

    • couponCode: string
applyCoupon(params: {
    couponCode: string;
}): Promise<void>;

  • removeCoupon - function for removing coupon applied to cart. This method accepts a single params object. The params has the following options:

    • coupon: Voucher
removeCoupon(params: {
    coupon: Voucher;
}): Promise<void>;
  • loading: boolean - a reactive object containing information about loading state of the cart.
  • error: UseCartErrors - reactive object containing the error message, if some properties failed for any reason.
interface UseCartErrors {
  addItem: Error;
  removeItem: Error;
  updateItemQty: Error;
  load: Error;
  clear: Error;
  applyCoupon: Error;
  removeCoupon: Error;
}

# Getters

  • getTotals - returns cart totals.

  • getShippingPrice - returns current shipping price.

  • getItems - returns all items from cart.

  • getItemName - returns product name.

  • getItemImage - returns product image.

  • getItemPrice - returns product price.

  • getItemQty - returns product quantity.

  • getItemAttributes - returns product attribute.

  • getItemSku - returns product SKU.

  • getTotalItems - returns products amount.

  • getFormattedPrice - returns product price with currency sign.

interface CartGetters {
  getTotals: (cart: Cart) => AgnosticTotals;
  getItems: (cart: Cart) => CartItem[];
  getItemName: (product: CartItem) => string;
  getItemImage: (product: CartItem) => string;
  getItemPrice: (product: CartItem) => AgnosticPrice;
  getItemQty: (product: CartItem) => number;
  getItemAttributes: (
    product: CartItem,
    filterByAttributeName?: Array<string>,
  ) => Record<string, string>;
  getItemSku: (product: CartItem) => string;
  getTotalItems: (cart: Cart) => number;
  getFormattedPrice: (price: number) => string;
  getCoupons: (cart: Cart) => AgnosticCoupon[];
}

type CartItem = {
  meta: CartItemInclude;
  data: CartConcreteProductAttributes;
  image: string;
  price: Record<'current', number> & Record<string, CartConcreteProductPrice>;
};

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

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

interface AgnosticCoupon {
  id: string;
  name: string;
  code: string;
  value: number;
}

# Example

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

export default {
  setup() {
    const { cart, removeItem, updateItemQty, load } = useCart();

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

    return {
      removeItem,
      updateItemQty,
      products: computed(() => cartGetters.getItems(cart.value)),
      totals: computed(() => cartGetters.getTotals(cart.value)),
      totalItems: computed(() => cartGetters.getTotalItems(cart.value)),
    };
  },
};

← useCategory →