CartProvider
The CartProvider component creates a context for using a cart. It creates a cart object and callbacks
that can be accessed by any descendent component using the useCart hook and related hooks. It also carries out
any callback props when a relevant action is performed. For example, if a onLineAdd callback is provided,
then the callback will be called when a new line item is successfully added to the cart.
The CartProvider component must be a descendent of the ShopifyProvider component.
You must use this component if you want to use the useCart hook or related hooks, or if you would like to use the AddToCartButton component.
Example code
Props
| Name | Required | Description |
|---|---|---|
children |
Yes | Any ReactNode elements. |
onCreate |
No | A callback that is run automatically when a cart is created. |
onLineAdd |
No | A callback that is run automatically when a new cart line is added. |
onLineRemove |
No | A callback that is run automatically when a cart line is removed. |
onLineUpdate |
No | A callback that is run automatically when a cart line is updated. |
onNoteUpdate |
No | A callback that is run automatically when the cart note is updated. |
onBuyerIdentityUpdate |
No | A callback that is run automatically when the cart's buyer identity is updated. |
onAttributesUpdate |
No | A callback that is run automatically when the cart's buyer identity is updated. |
onDiscountCodesUpdate |
No | A callback that is run automatically when the cart's discount codes are updated. |
Component type
The CartProvider component is a client component, which means that it renders on the client. For more information about component types, refer to React Server Components.