6.6 KiB
6.6 KiB
The useCart hook provides access to the cart object. It must be a descendent of a CartProvider component.
Example code
import {CartProvider, useCart} from '@shopify/hydrogen';
export function MyComponent() {
return (
<CartProvider>
<CartLineItems />
</CartProvider>
);
}
export function CartLineItems() {
const {lines} = useCart();
return (
<>
{lines.map((line) => {
return {
/* your JSX*/
};
})}
</>
);
}
Return value
The useCart hook returns an object with the following keys:
| Name | Description |
|---|---|
id |
The cart ID. |
lines |
The cart lines. |
checkoutUrl |
The URL for the checkout for this cart. |
note |
The cart note. |
buyerIdentity |
The cart's buyer identity. |
attributes |
The cart attributes. |
discountCodes |
The discount codes applied to the cart. |
estimatedCost |
The estimate cost for the cart, including the subtotal, total, taxes, and duties. |
status |
The status of the cart. This returns 'uninitialized' when the cart is not yet created, 'creating' when the cart is being created, 'updating' when the cart is updating, and 'idle' when the cart isn't being created or updated. |
error |
A string of an error from a cart action, such as adding or removing an item from the cart. |
createCart |
A callback that creates a cart. Expects the same input you would provide to the Storefront API's cartCreate mutation. |
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. |
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. |
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. |
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. |
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. |
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. |