Vue Storefront Next

# Cart

# Features

useCart composition function can be used to:

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

# API

useCart contains following properties:

  • cart - a main data object that contains cart structure in platform specific structure 
    export interface BasketResponseData<P = BapiProduct, V = Variant> {
    key: BasketKey;
    cost: BasketTotalPrice;
    currencyCode: "EUR";
    items: BasketItem<P, V>[];
    packages: BasketPackageInformation[];
}
export interface BasketItem<P = BapiProduct, V = Variant> {
    key: string;
    customData: unknown;
    packageId: number;
    price: {
        total: BasketItemPrice;
        unit: BasketItemPrice;
    };
    quantity: number;
    availableQuantity?: number;
    deliveryForecast?: {
        deliverable?: {
            quantity: number;
            key: string;
        };
        subsequentDelivery?: {
            quantity: number;
            key: string;
        };
    };
    status: "available" | "unavailable" | "deliverable" | "undeliverable" | "cancelled";
    product: P;
    variant: V;
    displayData: BasketItemDisplayData;
}
  • load - function required to fetch cart from a server or create brand new if it doesn't exist.
  • addToCart - function for adding products to the cart
  • updateQuantity - function for updating quantity of a product that is already in the cart
  • removeFromCart - function for removing a product that currently is in the cart
  • isOnCart - function for checking if a product is currently in the cart
  • clearCart - function for removing all items currently stored in cart
  • coupon - reactive data object containing coupon details
  • applyCoupon - function for applying coupon to cart
  • removeCoupon - function for removing coupon applied to cart
  • loading - a reactive object containing information about loading state of the cart

# Usage

Cart composable is a service designed for supporting a single cart and access it everywhere with ease. Initialization of a cart requires using load() when calling useCart() for the first time. Keep in mind that upon execution of load, the cart will get loaded only once, if a wishlist has already been loaded, nothing happens.

import { onSSR } from '@vue-storefront/core';
import { useCart } from '@vue-storefront/about-you';

export default {
  setup() {
    const { cart, addToCart, removeFromCart, updateQuantity, loadCart } = useCart();

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

    return {
      cart,
      addToCart,
      removeFromCart,
      updateQuantity,
    };
  }
};

← useProduct →