Build a cart
Previously, you built a product page. Your Hydrogen storefront now renders detailed information about products and provides a purchasing option, Buy it now, to customers. You're now ready to build a cart in your app.
In this tutorial, you'll build a cart that contains the merchandise that a customer wants to buy, and the estimated cost that's associated with the 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.
What you’ll learnAnchor link to section titled "What you’ll learn"
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.
RequirementsAnchor link to section titled "Requirements"
You’ve completed Build a product page.
Sample codeAnchor link to section titled "Sample code"
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:
Step 1: Wrap your app in the Anchor link to section titled "Step 1: Wrap your app in the CartProvider"
You can make a cart context available to your entire Hydrogen app by wrapping your app in 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.
/src/App.server.jsx, import the
CartProvider component and make it a descendent of the
Step 2: Create a drawerAnchor link to section titled "Step 2: Create a drawer"
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.
Stop your development server.
Install the @headlessui/react package. This package includes unstyled and fully-accessible UI components for React, and integrates well with Tailwind:
Restart your developer server.
In your project, create a
Drawerclient component in
/src/components/Drawer.client.jsxwith the following contents:
Step 3: Add a cart icon to the headerAnchor link to section titled "Step 3: Add a cart icon to the header"
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.
- In your project, create a
Headerclient component and add the
Drawercomponent to it. Then, add a cart button to toggle the drawer along with a bag icon (
IconBag) and cart badge counter (
- Import the
Headercomponent into your
The cart now renders on any page in your app:
Step 4: Build the cartAnchor link to section titled "Step 4: Build the cart"
In this step, you'll build different UI components within your cart. You'll centrally locate all of the UI components within a new
CartDetailsclient component in
/src/components/CartDetails.client.jsxwith the following contents:
/src/components/CartDetails.client.jsx, add each of the following functions:
CartEmpty function to
/src/components/CartDetails.client.jsx to render the UI when a cart doesn't contain any products:
CartCheckoutActionsAnchor link to section titled "CartCheckoutActions"
CartCheckoutActions function to
/src/components/CartDetails.client.jsx to render checkout and Shop Pay buttons:
OrderSummaryAnchor link to section titled "OrderSummary"
OrderSummary function to
/src/components/CartDetails.client.jsx to render order summary information, which includes a subtotal and a shipping estimate:
CartLineItemAnchor link to section titled "CartLineItem"
CartLineItem function to
/src/components/CartDetails.client.jsx to render cart line items that include an image, product details, and a price:
CartLineQuantityAdjustAnchor link to section titled "CartLineQuantityAdjust"
CartLineQuantityAdjust function to
/src/components/CartDetails.client.jsx to render the quantity of each cart line item and a plus
+ and minus
- adjustor function:
Step 5: Add Anchor link to section titled "Step 5: Add CartDetails to Drawer"
After you’ve finished building the different sections of your
CartDetails component, you’re ready to render the cart in your app.
Header component, add the
CartDetails component to the
Step 6: Add an "Add to cart" button to the product pageAnchor link to section titled "Step 6: Add an "Add to cart" button to the product page"
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.
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.