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 
    type Cart = Versioned & {
  __typename?: "Cart";
  customerId?: Maybe<Scalars["String"]>;
  customer?: Maybe<Customer>;
  customerEmail?: Maybe<Scalars["String"]>;
  anonymousId?: Maybe<Scalars["String"]>;
  lineItems: Array<LineItem>;
  customLineItems: Array<CustomLineItem>;
  totalPrice: Money;
  taxedPrice?: Maybe<TaxedPrice>;
  shippingAddress?: Maybe<Address>;
  billingAddress?: Maybe<Address>;
  inventoryMode: InventoryMode;
  taxMode: TaxMode;
  taxRoundingMode: RoundingMode;
  taxCalculationMode: TaxCalculationMode;
  customerGroup?: Maybe<CustomerGroup>;
  customerGroupRef?: Maybe<Reference>;
  country?: Maybe<Scalars["Country"]>;
  shippingInfo?: Maybe<ShippingInfo>;
  discountCodes: Array<DiscountCodeInfo>;
  refusedGifts: Array<CartDiscount>;
  refusedGiftsRefs: Array<Reference>;
  paymentInfo?: Maybe<PaymentInfo>;
  locale?: Maybe<Scalars["Locale"]>;
  shippingRateInput?: Maybe<ShippingRateInput>;
  origin: CartOrigin;
  storeRef?: Maybe<KeyReference>;
  store?: Maybe<Store>;
  itemShippingAddresses: Array<Address>;
  cartState: CartState;
  customFieldsRaw?: Maybe<Array<RawCustomField>>;
  customFields?: Maybe<Type>;
  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>;
  customFieldList?: Maybe<Array<CustomField>>;
};
  • 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.

TIP

Because in commercetools each interaction with the cart (such as adding or removing items) triggers token recreation, cart is loaded only when it's really needed. For more information please visit commercetools documentation (opens new window).

← Wishlist →