Add products to a cart

• You've completed the read data from a cart guide.

The cart route handles all cart mutations using the Storefront API client. The route action listens for POST requests from multiple forms, including the add to cart button.

Create a cart route with an exported Remix action handler.

From the action request, read formData to obtain the passed cartAction and countryCode attributes. Also read the request session cookie to obtain the persisted cartId and customerAccessToken (if available).

Using the cartAction value received from the form in Step 2 you can route different cart requests to different Cart API mutation handlers. You can use the cartCreate mutation to create an add a cart, and the cartLinesAdd mutation to add products to an existing cart.

In this step, add the following GraphQL mutation definitions:

• CREATE_CART_MUTATION: Creates and adds line if no cart exists
• ADD_LINES_MUTATION: Adds lines to an existing cart if a cartId is available in the session

Add two mutation Storefront API handlers (cartCreate and cartLinesAdd) to interact with the Storefront API. Finally, add an add_to_cart condition to route requests to the relevant mutation handler.

Now that you've created or updated the cart, persist the cartId in the session:

Define an add to cart button that uses a Remix fetcher form to POST a request to the cart action.

First, define a simple <AddToCarButton /> component with a fetcher.Form from Remix useFetcher. Then set the form method to POST and the action to /cart to ensure that the request goes to the route action defined in Step 1.

Finally, add these hidden input fields to pass data to your action as formData:

• cartAction: A hidden field that specifies the cart mutation handler that you want to use for the requests
• countryCode: A hidden field that specifies the active country code for the @inContext attribute of your Storefront API mutations
• lines: The lines that you want to add to the cart

• Learn how to read data from a cart in Hydrogen.
• Learn how to remove line items from a cart on the server-side, using a form element and a Remix route action that handles Storefront API requests.