useCart

Provides access to the cart object.

Example code

import {CartProvider, useCart} from '@shopify/hydrogen-react';

export function App() {
  <CartProvider
    onLineAdd={() => {
      console.log('a line is being added');
    }}
    onLineAddComplete={() => {
      console.log('a line has been added');
    }}
  >
    <CartComponent />
  </CartProvider>;
}

function CartComponent() {
  const {linesAdd, status} = useCart();

  const merchandise = {merchandiseId: '{id-here}'};

  return (
    <div>
      Cart Status: {status}
      <button onClick={() => linesAdd([merchandise])}>Add Line</button>
    </div>
  );
}

import {CartProvider, useCart} from '@shopify/hydrogen-react';
import type {CartLineInput} from '@shopify/hydrogen-react/storefront-api-types';

export function App() {
  <CartProvider
    onLineAdd={() => {
      console.log('a line is being added');
    }}
    onLineAddComplete={() => {
      console.log('a line has been added');
    }}
  >
    <CartComponent />
  </CartProvider>;
}

function CartComponent() {
  const {linesAdd, status} = useCart();

  const merchandise: CartLineInput = {merchandiseId: '{id-here}'};

  return (
    <div>
      Cart Status: {status}
      <button onClick={() => linesAdd([merchandise])}>Add Line</button>
    </div>
  );
}

Props

`useCart` hook must be a descendent of a `CartProvider` component.

UseCartDocs

Returns: CartWithActionsDocs

type UseCartDocs = () => CartWithActionsDocs;

CartWithActionsDocs

attributes

The cart's attributes.

buyerIdentity

The cart's buyer identity.

buyerIdentityUpdate

A callback that updates the buyer identity in the cart. Expects the same `buyerIdentity` input that you would provide to the Storefront API's `cartBuyerIdentityUpdate` mutation.

cartAttributesUpdate

A callback that updates the cart attributes. Expects the same `attributes` input that you would provide to the Storefront API's `cartAttributesUpdate` mutation.

cartCreate

A callback that creates a cart. Expects the same input you would provide to the Storefront API's `cartCreate` mutation.

cartFragment

The fragment used to query the cart object for all queries and mutations.

cartReady

A boolean indicating if the cart is ready to be interacted with.

checkoutUrl

The checkout URL for the cart, if the cart has been created in the Storefront API.

cost

The cost for the cart, including the subtotal, total, taxes, and duties.

discountCodes

The discount codes applied to the cart.

discountCodesUpdate

A callback that updates the cart's discount codes. Expects the same `codes` input that you would provide to the Storefront API's `cartDiscountCodesUpdate` mutation.

error

If an error occurred on the previous cart action, then `error` will exist and `cart` will be put back into the last valid status it was in.

id

The cart's ID if it has been created through the Storefront API.

lines

The cart lines.

linesAdd

A callback that adds lines to the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesAdd` mutation. If a cart doesn't already exist, then it will create the cart for you.

linesRemove

A callback that removes lines from the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesRemove` mutation. Only lines that are included in the `lines` parameter will be in the cart afterwards.

linesUpdate

A callback that updates lines in the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesUpdate` mutation. If a line item is not included in the `lines` parameter, it will still exist in the cart and will not be changed.

note

The cart's note.

noteUpdate

A callback that updates the note in the cart. Expects the same `note` input that you would provide to the Storefront API's `cartNoteUpdate` mutation.

status

The status of the cart. This returns `uninitialized` when the cart is not yet created, `creating` when the cart is being created, `fetching` when an existing cart is being fetched, `updating` when the cart is updating, and `idle` when the cart isn't being created or updated.

totalQuantity

The total number of items in the cart, across all lines. If there are no lines, then the value is 0.

CartStatus

CartState['status']

CartState

{status: 'uninitialized'; error?: string} | {status: 'fetching'} | {status: 'creating'} | {status: 'updating'; cart: Cart; lastValidCart: Cart} | {status: 'idle'; cart: Cart; error?: string}

Cart

PartialDeep<CartBase, {recurseIntoArrays: true}>

CartProvider