Skip to main content

Manage items in a cart

This guide shows you how to use the cart handler to add, update, and remove items from the cart.

Anchor to RequirementsRequirements

Anchor to Create a Remix action to handle different form requestsCreate a Remix action to handle different form requests

Create a Remix action to handle the different cart actions. We suggest using a single cart route, and switching on the different actions. Use the cart handler, which is available on the action context, to send cart mutation requests to the Storefront API.

File

/app/routes/cart.jsx

import {CartForm} from '@shopify/hydrogen';
import invariant from 'tiny-invariant';

export async function action({request, context}) {
const {cart} = context;

const formData = await request.formData();
const {action, inputs} = CartForm.getFormInput(formData);

let result;

switch(action) {
case CartForm.ACTIONS.LinesAdd:
result = await cart.addLines(inputs.lines);
break;
case CartForm.ACTIONS.LinesUpdate:
result = await cart.updateLines(inputs.lines);
break;
case CartForm.ACTIONS.LinesRemove:
result = await cart.removeLines(inputs.lineIds);
break;
default:
invariant(false, `${action} cart action is not defined`);
}

// The Cart ID might change after each mutation, so update it each time.
const headers = cart.setCartId(result.cart.id);

return json(
result,
{status: 200, headers},
);
}
import {
type CartQueryData,
CartForm,
} from '@shopify/hydrogen';
import invariant from 'tiny-invariant';

export async function action({request, context}: ActionArgs) {
const {cart} = context;

const formData = await request.formData();
const {action, inputs} = CartForm.getFormInput(formData);

let result: CartQueryData;

switch(action) {
case CartForm.ACTIONS.LinesAdd:
result = await cart.addLines(inputs.lines);
break;
case CartForm.ACTIONS.LinesUpdate:
result = await cart.updateLines(inputs.lines);
break;
case CartForm.ACTIONS.LinesRemove:
result = await cart.removeLines(inputs.lineIds);
break;
default:
invariant(false, `${action} cart action is not defined`);
}

// The Cart ID might change after each mutation, so update it each time.
const headers = cart.setCartId(result.cart.id);

return json(
result,
{status: 200, headers},
);
}

Anchor to Add cart itemsAdd cart items

Use the CartForm component to create an add to cart button. You can add any fields defined by CartLineInput for each cart lines. The component submits a form request to the /cart route's action when users interact with the button. You can use this component anywhere in the app.

File

/app/components/AddToCartButton.jsx

import {CartForm} from '@shopify/hydrogen';

export default function AddToCartButton({lines}) {
return (
<CartForm
route="/cart"
action={CartForm.ACTIONS.LinesAdd}
inputs={
{lines}
}
>
<button>
Add to cart
</button>
</CartForm>
);
}
import {CartForm} from '@shopify/hydrogen';
import type {CartLineInput} from '@shopify/hydrogen/storefront-api-types';

export default function AddToCartButton({lines}: {lines: CartLineInput[]}) {
return (
<CartForm
route="/cart"
action={CartForm.ACTIONS.LinesAdd}
inputs={
{lines}
}
>
<button>
Add to cart
</button>
</CartForm>
);
}

Anchor to Update cart itemsUpdate cart items

Use the CartForm component to create an update cart button. You can update any fields in CartLineUpdateInput. The component submits a form request to the /cart route's action when users interact with the button. You can use this component anywhere in the app.

File

/app/components/UpdateCartItemsButton.jsx

import {CartForm} from '@shopify/hydrogen';

export default function UpdateCartItemsButton({lines}) {
return (
<CartForm
route="/cart"
action={CartForm.ACTIONS.LinesUpdate}
inputs={
{lines}
}
>
<button>
Update cart
</button>
</CartForm>
);
}
import {CartForm} from '@shopify/hydrogen';
import type {CartLineUpdateInput} from '@shopify/hydrogen/storefront-api-types';

export default function UpdateCartItemsButton({lines}: {lines: CartLineUpdateInput[]}) {
return (
<CartForm
route="/cart"
action={CartForm.ACTIONS.LinesUpdate}
inputs={
{lines}
}
>
<button>
Update cart
</button>
</CartForm>
);
}

Anchor to Remove cart itemsRemove cart items

Use the CartForm component to remove an item from a cart. The component submits a form request to the /cart route's action when users interact with the button. You can use this component anywhere in the app.

File

/app/components/RemoveCartItemButton.jsx

import {CartForm} from '@shopify/hydrogen';

export default function RemoveCartItemButton({lineIds}) {
return (
<CartForm
route="/cart"
action={CartForm.ACTIONS.LinesRemove}
inputs={
{lineIds}
}
>
<button>
Remove items
</button>
</CartForm>
);
}
import {CartForm} from '@shopify/hydrogen';

export default function RemoveCartItemButton({lineIds}: {lineIds: string[]}) {
return (
<CartForm
route="/cart"
action={CartForm.ACTIONS.LinesRemove}
inputs={
{lineIds}
}
>
<button>
Remove items
</button>
</CartForm>
);
}

Anchor to Next stepsNext steps

Was this page helpful?