CartItemRow

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

Preview

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

​CartItemRow

​Preview

​Import

​Usage

​Props

​Behavior

CartItemRow

Preview

Import

Usage

Props

Behavior