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
- You've completed the quickstart guide.
- You've set up a cart handler.
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
- Learn how to show product variants.