Apply notes to carts

This guide shows you how to use a cart handler to apply a note to a cart. For example, you can enable users to apply a note that requests gift-wrapping.

Anchor to RequirementsRequirements

• You've completed the quickstart guide.
• You've set up a cart handler.

Anchor to Step 1: Create a cart note formStep 1: Create a cart note form

Use the CartForm component to create a cart note form. The component submits a form request to the /cart route's action when users submit an update to the note. You can use this component anywhere in the app.

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

export default function NoteForm() {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.NoteUpdate}
    >
      <p>Provide a short message for the gift tag:</p>
      <input type="text" name="note" />
      <button>Update note</button>
    </CartForm>
  );
}

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

export default function NoteForm() {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.NoteUpdate}
    >
      <p>Provide a short message for the gift tag:</p>
      <input type="text" name="note" />
      <button>Update note</button>
    </CartForm>
  );
}

Anchor to Step 2: Handle the cart note form requestStep 2: Handle the cart note form request

Handle the cart note form request in an action. Use the cart, created from createCartHandler, to handle cart mutation requests to the Storefront API.

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.NoteUpdate:
      const note = String(formData.get('note') || '');
      result = await cart.updateNote(note);
      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.NoteUpdate:
      const note = String(formData.get('note') || '');
      result = await cart.updateNote(note);
      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 cart attributes.