Build a cart

You want to build functionality into your Hydrogen storefront so customers can add items to their cart that they want to purchase. When a customer is ready to purchase their items, they can proceed to checkout.

In this tutorial, you’ll learn how to do the following tasks:

• Define the context for interacting with a cart, including keeping track of the cart’s open and closed states
• Build a cart section that renders on any page in your Hydrogen storefront
• Update the product details page to include an Add to cart option.

You’ve completed Build a product page.

If you want to quickly get started, then you can copy and paste the following code from each file into the corresponding files in your Hydrogen app. If the file doesn’t yet exist, then you can create it in your Hydrogen app. This tutorial describes the sample code step by step:

You can make a cart context available to your entire Hydrogen app by wrapping your app in the CartProvider component.

The CartProvider component creates a cart object and callbacks that can be accessed by any descendent component using the useCart hook and related hooks. CartProvider also carries out any callback props when a relevant action is performed.

In /src/App.server.jsx, import the CartProvider component and make it a descendent of the ShopifyProvider component:

You want to display a cart section when a customer clicks the cart icon or adds an item to the cart. To display the cart as an overlay on a page, you can use a Dialog component from @headlessui/react.

1. Stop your development server.

2. Install the @headlessui/react package. This package includes unstyled and fully-accessible UI components for React, and integrates well with Tailwind:

1. Restart your developer server.

2. In your project, create a Drawer client component in /src/components/Drawer.client.jsx with the following contents:

In this step, you'll add a cart icon to the header to trigger a cart drawer. To implement this behavior, you'll need a client-side state.

1. In your project, create a Header client component and add the Drawer component to it. Then, add a cart button to toggle the drawer along with a bag icon (IconBag) and cart badge counter (CartBadge).

1. Import the Header component into your Layout component:

The cart now renders on any page in your app:

In this step, you'll build different UI components within your cart. You'll centrally locate all of the UI components within a new CartDetails component.

1. Create a CartDetails client component in /src/components/CartDetails.client.jsx with the following contents:

2. In /src/components/CartDetails.client.jsx, add each of the following functions:

• CartEmpty
• CartCheckoutActions
• OrderSummary
• CartLineItem
• CartLineQuantityAdjust

Add the CartEmpty function to /src/components/CartDetails.client.jsx to render the UI when a cart doesn't contain any products:

Add the CartCheckoutActions function to /src/components/CartDetails.client.jsx to render checkout and Shop Pay buttons:

Add the OrderSummary function to /src/components/CartDetails.client.jsx to render order summary information, which includes a subtotal and a shipping estimate:

Add the CartLineItem function to /src/components/CartDetails.client.jsx to render cart line items that include an image, product details, and a price:

Add the CartLineQuantityAdjust function to /src/components/CartDetails.client.jsx to render the quantity of each cart line item and a plus + and minus - adjustor function:

After you’ve finished building the different sections of your CartDetails component, you’re ready to render the cart in your app.

In your Header component, add the CartDetails component to the Drawer component:

Now that you’ve built a cart context with a functioning cart, you can update the product details page to offer an Add to cart button.

Replace the BuyNowButton logic with a PurchaseMarkup component and add an Add to cart button:

The product details page now includes an Add to cart button:

If you add a product to your cart, and click the cart icon, then the product displays in the cart section:

• Explore the source code of the example Hydrogen demo store in GitHub.
• Get familiar with React Server Components.
• Learn more about the Shopify-specific commerce components, hooks, and utilities included in Hydrogen.
• Build your own API using API routes.