Skip to main content

​
CartItemRow

Renders a single line item in the cart, showing the product name, selected modifiers, special instructions, quantity stepper, and line total.

​
Preview

View in Storybook

​
Import

import { CartItemRow } from '@/components/CartItemRow'

​
Usage

<CartItemRow
  item={cartItem}
  onUpdateQuantity={(qty) => updateItem(cartItem.id, qty)}
  onRemove={() => removeItem(cartItem.id)}
  onEdit={() => editItem(cartItem.id)}
/>

​
Props

​
item
CartItem
required
The cart item object with product details, modifiers, quantity, and price.
​
onUpdateQuantity
(quantity: number) => void
required
Callback fired when quantity is changed via the stepper.
​
onRemove
() => void
required
Callback fired when the item is removed (quantity reaches 0 or delete is clicked).
​
onEdit
() => void
Optional callback to re-open the product customization screen.

​
Behavior

  • Displays modifier selections as comma-separated tags
  • Shows special instructions in italics below modifiers
  • Swipe-to-delete gesture on mobile
  • Tap on item opens edit mode via onEdit