Cart

The Cart component takes a checkout URL to handle the checkout redirection, and optional properties to customize price formatting. It provides access to both UI behavior (like toggling the cart modal) and callback functions to manage a local cart object.

✨ View Component in Storybook

Installation

npm install @thoughtindustries/cart

Example Code

import { Cart } from '@thoughtindustries/cart';

export function MyComponent() {
  return <Cart checkoutUrl="/checkout">{/* Your JSX */}</Cart>;
}

Props

Name	Required	Type	Description
children	Yes	ReactNode	Any ReactNode elements.
checkoutUrl	Yes	string	The URL for the checkout for this cart.
priceFormat	No	(priceInCents: number) => string	Callback to format monetary values. Defaults to Intl.NumberFormat.
companyDefaultLocale	No	string	Locale for price formatting. Default: en-US.
currencyCode	No	string	Currency code for price formatting. Default: USD.

Sub-Components

CartButton

Displays the current item count and toggles the cart modal. Must be a descendant of Cart.

AddToCartButton

Adds a purchasable item to the cart. Can optionally open the cart modal or take the user to checkout. Must be a descendant of CartUIProvider.

import { CartUIProvider, AddToCartButton, EcommItemType } from '@thoughtindustries/cart';

<CartUIProvider checkoutUrl="/checkout">
  <AddToCartButton
    purchasableType={EcommItemType.Product}
    purchasable={{ id: 'product-uuid', priceInCents: 1000 }}
  >
    Add to Cart
  </AddToCartButton>
</CartUIProvider>

CartCheckoutButton

Redirects to the checkout URL. Must be a descendant of CartProvider.