Build a cart in Hydrogen

Previously, you created a Hydrogen app and began building product pages. You're now ready to build a cart in your app.

In this tutorial, you'll accomplish a series of tasks to add some specific functionality to your app. Your final app will be simple, but you'll learn where to find resources to build more complex features on your own.

What you'll learn

After you've finished this tutorial, you'll be able to do the following:

  • Add a layout component to define the structure of a page
  • Create a cart component
  • Define the context for interacting with a cart
  • Build a cart section and display it on the product list and product details pages
A GIF showing an example cart built in Hydrogen
A cart built in Hydrogen

Requirements

Step 1: Add a layout component

You can start building a cart by adding a Layout component to your Hydrogen app. A layout component defines a structure and organization of a page. By defining your layout logic in one place, you can use it in different parts of your app.

When you create a Hydrogen app, a Layout.server.jsx server component is automatically scaffolded in src/components. This is a server component because it doesn't include any client-side interactivity and makes a call to the Storefront API.

  1. In Layout.server.jsx, replace the code with the following:

  2. Import the Layout component to the src/pages/products/[handle].server.jsx file, and wrap the component around the ProductDetails component.

    The src/pages/products/[handle].server.jsx file contains the routing logic for product pages.

Step 2: Create a cart

A cart contains the merchandise that a customer intends to purchase, and the estimated cost associated with the cart. When a customer is ready to purchase their items, they can proceed to checkout.

When you create a Hydrogen app, a Cart client component is automatically scaffolded in src/components. For the purposes of this tutorial, you'll modify the existing scaffolded code.

  1. In src/components/Cart.client.jsx, replace the code with the following:

  2. In src/pages, add a file called cart.server.jsx to contain the routing logic for the cart. Import the Layout and Cart components, and return both components.

Step 3: Define the context for the cart

After you've created your Cart component, you need to define the context for the cart. You'll do this by creating a CartContext component that contains the different states of the cart. For example, a user that's interacting with the cart might open or close it.

  1. Create a new file under src/components called CartContext.client.jsx:

  2. In src/components/CartProvider.client.jsx file, replace the code with the following:

    The CartProvider component creates a cart object and provides callbacks that can be accessed by any descendent component using the useCart hook and related hooks. It also executes 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.

Step 4: Build the cart section

You've created a layout and cart, and defined the context for the cart. Now, you're ready to build the cart section to add specific styling. To do this, you'll define a new CartSection client component and import that to your Layout server component.

  1. Create a new file under src/components called CartSection.client.jsx:

  2. In src/components/Layout.server.jsx, import the CartSection component.

    The cart section now renders on both the product list and product details pages. You can also interact with the cart by adding products to the cart.

    A GIF showing an example cart built in Hydrogen
    A cart built in Hydrogen

Next steps