Update cart attributes

This guide shows you how to use the cart handler to update cart attributes.

Anchor to RequirementsRequirements

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

Anchor to Step 1: Create a form that will interact with a cart attributeStep 1: Create a form that will interact with a cart attribute

Cart attributes are a list of key/value string pairs. The values can be anything you want to represent but they must be stored as strings. For example, you can add attributes that enable to add personalized messages to an order, such as requesting gift wrapping.

Use the CartForm to create a cart attribute form. The component submits a form request to the /cart route's action when a visitor submits an attribute key/value pair. You can use this component anywhere in the app.

File

/app/components/AttributeUpdateForm.jsx

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

export default function AttributeUpdateForm({attributes}) {

return (

<CartForm

route="/cart"

action={CartForm.ACTIONS.AttributesUpdateInput}

inputs={

{attributes}

}

<button>Update attribute</button>

</CartForm>

);

}

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

import type {AttributeInput} from '@shopify/hydrogen/storefront-api-types';

export default function AttributeUpdateForm({attributes}: {

attributes: AttributeInput[];

}) {

return (

<CartForm

route="/cart"

action={CartForm.ACTIONS.AttributesUpdateInput}

inputs={

{attributes}

}

<button>Update attribute</button>

</CartForm>

);

}

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

export default function AttributeUpdateForm({attributes}) {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.AttributesUpdateInput}
      inputs={
        {attributes}
      }
    >
      <button>Update attribute</button>
    </CartForm>
  );
}

import {CartForm} from '@shopify/hydrogen';
import type {AttributeInput} from '@shopify/hydrogen/storefront-api-types';

export default function AttributeUpdateForm({attributes}: {
  attributes: AttributeInput[];
}) {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.AttributesUpdateInput}
      inputs={
        {attributes}
      }
    >
      <button>Update attribute</button>
    </CartForm>
  );
}

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

Handle the cart attribute form request in an action. Use the cart that's 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.AttributesUpdateInput:

result = await cart.updateAttributes(inputs.attributes);

break;

default:

invariant(false, `${action} cart action is not defined`);

}

// The Cart ID might change after each mutation, so the following code updates 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.AttributesUpdateInput:

result = await cart.updateAttributes(inputs.attributes);

break;

default:

invariant(false, `${action} cart action is not defined`);

}

// The Cart ID might change after each mutation, so the following code updates 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.AttributesUpdateInput:
      result = await cart.updateAttributes(inputs.attributes);
      break;
    default:
      invariant(false, `${action} cart action is not defined`);
  }

  // The Cart ID might change after each mutation, so the following code updates 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.AttributesUpdateInput:
      result = await cart.updateAttributes(inputs.attributes);
      break;
    default:
      invariant(false, `${action} cart action is not defined`);
  }

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

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

Note

Cart attributes are visible to the user at checkout by default. To hide an attribute at checkout, prefix the attribute with an underscore.

Anchor to Next stepsNext steps

Learn how to apply discount codes.

Was this page helpful?