Choose a version:

CartForm

Creates a form for managing cart operations. Use CartActionInput to accept form inputs of known type.

Anchor to propsProps

CartActionInputProps & CartFormCommonProps

Anchor to CartActionInputProps

CartActionInputProps

| | | | | | | | | | | | | | | | | |

Anchor to CartFormCommonProps

CartFormCommonProps

Anchor to children children ReactNode | ((fetcher: FetcherWithComponents<any>) => ReactNode) required: Children nodes of CartForm. Children can be a render prop that receives the fetcher.
Anchor to fetcherKey fetcherKey string: Optional key to use for the fetcher.
Anchor to route route string: The route to submit the form to. Defaults to the current route.

CartActionInputProps

CartAttributesUpdateProps | CartBuyerIdentityUpdateProps | CartCreateProps | CartDiscountCodesUpdateProps | CartGiftCardCodesUpdateProps | CartGiftCardCodesAddProps | CartGiftCardCodesRemoveProps | CartLinesAddProps | CartLinesUpdateProps | CartLinesRemoveProps | CartNoteUpdateProps | CartSelectedDeliveryOptionsUpdateProps | CartMetafieldsSetProps | CartMetafieldDeleteProps | CartDeliveryAddressesAddProps | CartDeliveryAddressesRemoveProps | CartDeliveryAddressesUpdateProps | CartDeliveryAddressesReplaceProps | CartCustomProps

CartAttributesUpdateProps

action
```
'AttributesUpdateInput'
```

inputs

{ attributes: AttributeInput[]; } & OtherFormData

AttributeInput

OtherFormData

CartBuyerIdentityUpdateProps

action
```
'BuyerIdentityUpdate'
```

inputs

{ buyerIdentity: CartBuyerIdentityInput; } & OtherFormData

CartBuyerIdentityInput

CartCreateProps

action
```
'Create'
```
inputs
```
{ input: CartInput; } & OtherFormData
```

CartInput

CartDiscountCodesUpdateProps

action
```
'DiscountCodesUpdate'
```

inputs

{ discountCodes: string[]; } & OtherFormData

CartGiftCardCodesUpdateProps

action
```
'GiftCardCodesUpdate'
```

inputs

{ giftCardCodes: string[]; } & OtherFormData

CartGiftCardCodesAddProps

action
```
'GiftCardCodesAdd'
```

inputs

{ giftCardCodes: string[]; } & OtherFormData

CartGiftCardCodesRemoveProps

action
```
'GiftCardCodesRemove'
```

inputs

{ giftCardCodes: string[]; } & OtherFormData

CartLinesAddProps

action
```
'LinesAdd'
```

inputs

{ lines: OptimisticCartLineInput[]; } & OtherFormData

OptimisticCartLineInput

CartLineInput & {
  selectedVariant?: unknown;
}

CartLineInput

CartLinesUpdateProps

action
```
'LinesUpdate'
```

inputs

{ lines: CartLineUpdateInput[]; } & OtherFormData

CartLineUpdateInput

CartLinesRemoveProps

action
```
'LinesRemove'
```
inputs
```
{ lineIds: string[]; } & OtherFormData
```

CartNoteUpdateProps

action
```
'NoteUpdate'
```
inputs
```
{ note: string; } & OtherFormData
```

CartSelectedDeliveryOptionsUpdateProps

action
```
'SelectedDeliveryOptionsUpdate'
```

inputs

{ selectedDeliveryOptions: CartSelectedDeliveryOptionInput[]; } & OtherFormData

CartSelectedDeliveryOptionInput

CartMetafieldsSetProps

action
```
'MetafieldsSet'
```

inputs

{ metafields: MetafieldWithoutOwnerId[]; } & OtherFormData

MetafieldWithoutOwnerId

CartMetafieldDeleteProps

action
```
'MetafieldsDelete'
```
inputs
```
{ key: string; } & OtherFormData
```

CartDeliveryAddressesAddProps

action
```
'DeliveryAddressesAdd'
```

inputs

{ addresses: CartSelectableAddressInput[]; } & OtherFormData

CartDeliveryAddressesRemoveProps

action
```
'DeliveryAddressesRemove'
```

inputs

{ addressIds: string[]; } & OtherFormData

CartDeliveryAddressesUpdateProps

action
```
'DeliveryAddressesUpdate'
```

inputs

{ addresses: CartSelectableAddressUpdateInput[]; } & OtherFormData

CartDeliveryAddressesReplaceProps

action
```
'DeliveryAddressesReplace'
```

inputs

{ addresses: CartSelectableAddressInput[]; } & OtherFormData

CartCustomProps

action
```
`Custom${string}`
```
inputs
Construct a type with a set of properties K of type T
```
Record<string, unknown>
```

CartFormCommonProps

children
Children nodes of CartForm. Children can be a render prop that receives the fetcher.
```
ReactNode | ((fetcher: FetcherWithComponents<any>) => ReactNode)
```
fetcherKey
Optional key to use for the fetcher.
```
string
```
route
The route to submit the form to. Defaults to the current route.
```
string
```

Examples

import {data} from 'react-router';

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

import invariant from 'tiny-invariant';

export default function Cart() {

return (

<CartForm

action={CartForm.ACTIONS.LinesUpdate}

inputs={{

lines: [

{

id: 'gid://shopify/CartLine/123456789',

quantity: 3,

other: 'data',

}}

<button>Quantity up</button>

</CartForm>

);

}

export async function action({request, context}) {

const {cart} = context;

const formData = await request.formData();

const {action, inputs} = CartForm.getFormInput(formData);

let status = 200;

let result;

if (action === CartForm.ACTIONS.LinesUpdate) {

result = await cart.updateLines(inputs.lines);

} else {

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

}

const headers = cart.setCartId(result.cart.id);

return data(result, {status, headers});

}

Examples

Example

JavaScript

import {data} from 'react-router';
import {CartForm} from '@shopify/hydrogen';
import invariant from 'tiny-invariant';

export default function Cart() {
  return (
    <CartForm
      action={CartForm.ACTIONS.LinesUpdate}
      inputs={{
        lines: [
          {
            id: 'gid://shopify/CartLine/123456789',
            quantity: 3,
          },
        ],
        other: 'data',
      }}
    >
      <button>Quantity up</button>
    </CartForm>
  );
}

export async function action({request, context}) {
  const {cart} = context;

  const formData = await request.formData();
  const {action, inputs} = CartForm.getFormInput(formData);

  let status = 200;
  let result;

  if (action === CartForm.ACTIONS.LinesUpdate) {
    result = await cart.updateLines(inputs.lines);
  } else {
    invariant(false, `${action} cart action is not defined`);
  }

  const headers = cart.setCartId(result.cart.id);

  return data(result, {status, headers});
}

TypeScript

import {type ActionFunctionArgs, data} from 'react-router';
import {
  type CartQueryDataReturn,
  type HydrogenCart,
  CartForm,
} from '@shopify/hydrogen';
import invariant from 'tiny-invariant';

export default function Cart() {
  return (
    <CartForm
      action={CartForm.ACTIONS.LinesUpdate}
      inputs={{
        lines: [
          {
            id: 'gid://shopify/CartLine/123456789',
            quantity: 3,
          },
        ],
        other: 'data',
      }}
    >
      <button>Quantity up</button>
    </CartForm>
  );
}

export async function action({request, context}: ActionFunctionArgs) {
  const cart = context.cart as HydrogenCart;
  // cart is type HydrogenCart or HydrogenCartCustom
  // Declare cart type in remix.env.d.ts for interface AppLoadContext to avoid type casting
  // const {cart} = context;

  const formData = await request.formData();
  const {action, inputs} = CartForm.getFormInput(formData);

  let status = 200;
  let result: CartQueryDataReturn;

  if (action === CartForm.ACTIONS.LinesUpdate) {
    result = await cart.updateLines(inputs.lines);
  } else {
    invariant(false, `${action} cart action is not defined`);
  }

  const headers = cart.setCartId(result.cart.id);

  return data(result, {status, headers});
}

Was this page helpful?