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 learn
Anchor 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.
Requirements
Anchor link to section titled "Requirements"You’ve completed Build a product page.
Sample code
Anchor 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 CartProvider
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.
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:
Step 2: Create a drawer
Anchor 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
Drawer
client component in/src/components/Drawer.client.jsx
with the following contents:
Step 3: Add a cart icon to the header
Anchor 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
Header
client component and add theDrawer
component to it. Then, add a cart button to toggle the drawer along with a bag icon (IconBag
) and cart badge counter (CartBadge
).
- Import the
Header
component into yourLayout
component:
The cart now renders on any page in your app:
Step 4: Build the cart
Anchor 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 CartDetails
component.
Create a
CartDetails
client component in/src/components/CartDetails.client.jsx
with the following contents:In
/src/components/CartDetails.client.jsx
, add each of the following functions:
Add the CartEmpty
function to /src/components/CartDetails.client.jsx
to render the UI when a cart doesn't contain any products:
CartCheckoutActions
Anchor link to section titled "CartCheckoutActions"Add the CartCheckoutActions
function to /src/components/CartDetails.client.jsx
to render checkout and Shop Pay buttons:
OrderSummary
Anchor link to section titled "OrderSummary"Add the OrderSummary
function to /src/components/CartDetails.client.jsx
to render order summary information, which includes a subtotal and a shipping estimate:
CartLineItem
Anchor link to section titled "CartLineItem"Add the CartLineItem
function to /src/components/CartDetails.client.jsx
to render cart line items that include an image, product details, and a price:
CartLineQuantityAdjust
Anchor link to section titled "CartLineQuantityAdjust"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:
Step 5: Add CartDetails
to Drawer
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.
In your Header
component, add the CartDetails
component to the Drawer
component:
Step 6: Add an "Add to cart" button to the product page
Anchor 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.
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.