useCart

The useCart hook allows you to access cart data and perform mutations that will reflect on other entities within the Sales App data layer.

Note

This hook is not available for all extension points. Check the available list here.

Usage

src/index.tsx

import { useCart } from '@vtex/sales-app'

const TotalItems = () => {
const cart = useCart()

  return <div>Items: {cart.items.length}</div>

}

Additionally, you can use useCart to interact with the Sales App data layer by mutating the cart items list:

src/index.tsx

import { useCart } from '@vtex/sales-app'

const TotalItems = () => {
const cart = useCart()

  const addItem = () => cart.addItem({
    quantity: 1,
    seller: '1',
    id: '8392'
  })

  return <button onClick={addItem}>Add to cart</button>

}

Parameters

The useCart hook does not receive any parameters.

Returns

The useCart hook returns an object with the following properties:

orderFormId

• type orderFormId: string | undefined

value

• type value: number

items

• type: CartItem[]

totalizers

• type Totalizers[]

clientProfileData

• type: ClientProfileData

giftCards

• type: GiftCard[]

Gift cards currently attached to the cart.

addItem

• type: addItem: (data: UseCartAddItemData) => Promise<void>

The UseCartAddItemData type is an object with the following structure:

type UseCartAddItemData = {
  id: string;
  quantity: number;
  seller: string;
  attachments?: Attachment[];
};

removeItem

• type removeItem: (id: string, index: number) => Promise<void>

addCoupon

• type addCoupon: (coupon: string) => Promise<void>

addGiftCard

• type: addGiftCard: (redemptionCodeOrGiftCard: string | GiftCard, provider?: string) => Promise<void>

Adds a gift card to the cart payment data. You can pass either:

• a redemption code (string) and optionally a provider, or
• a GiftCard object (when you already have the gift card data).

The GiftCard type follows this structure:

export type GiftCard = {
  id: string
  redemptionCode?: string | null
  name: string
  caption: string
  value: number
  balance: number
  provider: string
  groupName?: string | null
  inUse: boolean
  isSpecialCard: boolean
}

Example using a redemption code:

src/index.tsx

import { useCart } from '@vtex/sales-app'

const AddGiftCard = () => {
const cart = useCart()

const add = async () => {
  await cart.addGiftCard('ABC-123', 'my-giftcard-provider')
  await cart.sync()
}

return <button onClick={add}>Add gift card</button>
}

sync

Syncs the cart with the latest data from the Order Form. This is useful to ensure that the cart reflects any changes made outside Sales App.

• type sync: () => Promise<void>

Extension Points

This hook is available in the following extension points:

• cart.cart-list.after
• cart.cart-item.after
• cart.order-summary.after
• pdp.sidebar.before
• pdp.sidebar.after
• pdp.content.after

For a full list of available extension points, refer to the ExtensionPoints page.