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 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},
);
}

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>
);
}

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>
);
}

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>
);
}


Was this page helpful?