Update discount codes
This guide shows you how to use a cart handler to apply discount codes to a cart.
Anchor to RequirementsRequirements
- You've completed the quickstart guide.
- You've set up a cart handler.
Anchor to Step 1: Create a discount code formStep 1: Create a discount code form
Use the CartForm
to create a discount code form. You can use this component anywhere in the app. It will submit a form request to the /cart
route's action when a visitor submits a discount code.
File
/app/components/DiscountCodeForm.jsx
import {CartForm} from '@shopify/hydrogen';
export default function DiscountCodeForm({discountCodes}) {
const codes: string[] = discountCodes
?.filter((discount) => discount.applicable)
?.map(({code}) => code) || []
return (
<CartForm
route="/cart"
action={CartForm.ACTIONS.DiscountCodesUpdate}
inputs={
{discountCodes: codes || []}
}
>
<input
type="text"
name="discountCode"
placeholder="Discount code"
/>
<button>
Apply Discount
</button>
</CartForm>
);
}
import {CartForm} from '@shopify/hydrogen';
import type {Cart} from '@shopify/hydrogen/storefront-api-types';
export default function DiscountCodeForm({discountCodes}: {
discountCodes: Cart['discountCodes'];
}) {
const codes: string[] = discountCodes
?.filter((discount) => discount.applicable)
?.map(({code}) => code) || []
return (
<CartForm
route="/cart"
action={CartForm.ACTIONS.DiscountCodesUpdate}
inputs={
{discountCodes: codes}
}
>
<input
type="text"
name="discountCode"
placeholder="Discount code"
/>
<button>
Apply Discount
</button>
</CartForm>
);
}
import {CartForm} from '@shopify/hydrogen';
export default function DiscountCodeForm({discountCodes}) {
const codes: string[] = discountCodes
?.filter((discount) => discount.applicable)
?.map(({code}) => code) || []
return (
<CartForm
route="/cart"
action={CartForm.ACTIONS.DiscountCodesUpdate}
inputs={
{discountCodes: codes || []}
}
>
<input
type="text"
name="discountCode"
placeholder="Discount code"
/>
<button>
Apply Discount
</button>
</CartForm>
);
}
import {CartForm} from '@shopify/hydrogen';
import type {Cart} from '@shopify/hydrogen/storefront-api-types';
export default function DiscountCodeForm({discountCodes}: {
discountCodes: Cart['discountCodes'];
}) {
const codes: string[] = discountCodes
?.filter((discount) => discount.applicable)
?.map(({code}) => code) || []
return (
<CartForm
route="/cart"
action={CartForm.ACTIONS.DiscountCodesUpdate}
inputs={
{discountCodes: codes}
}
>
<input
type="text"
name="discountCode"
placeholder="Discount code"
/>
<button>
Apply Discount
</button>
</CartForm>
);
}
Anchor to Step 2: Handle the discount code form requestStep 2: Handle the discount code form request
Handle the discount code form request in an action
. Use the cart
, created from createCartHandler
, to handle 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.DiscountCodesUpdate:
const formDiscountCode = formData.get('discountCode');
// User inputted discount code
const discountCodes = (
formDiscountCode ? [formDiscountCode] : []
) as string[];
// Combine with discount codes already applied on cart
discountCodes.push(...inputs.discountCodes);
result = await cart.updateDiscountCodes(discountCodes);
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.DiscountCodesUpdate:
const formDiscountCode = formData.get('discountCode');
// User inputted discount code
const discountCodes = (
formDiscountCode ? [formDiscountCode] : []
) as string[];
// Combine with discount codes already applied on cart
discountCodes.push(...inputs.discountCodes);
result = await cart.updateDiscountCodes(discountCodes);
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 {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.DiscountCodesUpdate:
const formDiscountCode = formData.get('discountCode');
// User inputted discount code
const discountCodes = (
formDiscountCode ? [formDiscountCode] : []
) as string[];
// Combine with discount codes already applied on cart
discountCodes.push(...inputs.discountCodes);
result = await cart.updateDiscountCodes(discountCodes);
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.DiscountCodesUpdate:
const formDiscountCode = formData.get('discountCode');
// User inputted discount code
const discountCodes = (
formDiscountCode ? [formDiscountCode] : []
) as string[];
// Combine with discount codes already applied on cart
discountCodes.push(...inputs.discountCodes);
result = await cart.updateDiscountCodes(discountCodes);
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 Next stepsNext steps
- Learn how to apply selected delivery options.
Was this page helpful?