# Cart Items

> CartItems, cart item atoms, and cart attribute atoms as one hydrated row family.

<!-- Sources: src/Components/Woo/CartItems/CartItems.php; src/Components/Woo/CartItemImage/CartItemImage.php; src/Components/Woo/CartItemTitle/CartItemTitle.php; src/Components/Woo/CartItemPrice/CartItemPrice.php; src/Components/Woo/CartItemSubtotal/CartItemSubtotal.php; src/Components/Woo/CartItemQuantity/CartItemQuantity.php; src/Components/Woo/CartItemRemove/CartItemRemove.php; src/Components/Woo/CartAttributeList/CartAttributeList.php; src/Components/Woo/CartAttributeName/CartAttributeName.php; src/Components/Woo/CartAttributeValue/CartAttributeValue.php; src/Woo/CartItemsDynamicSource.php; src/Woo/CartItemAtomHydrator.php; client/src/domains/woo/components/cart-items.ts; src/Testing/E2E/Woo/WooScenarioProvider.php; tests/e2e/components/woo/behavior.spec.ts -->

# Cart Items

This family renders the editable cart line-item list. `CartItems` owns the row loop. The atoms inside the default slot read the current row.

## Components

| Component key | Role |
| --- | --- |
| `OmeWooCartItems` | Renders cart rows and an authored empty slot. |
| `OmeWooCartItemImage` | Displays line product image. |
| `OmeWooCartItemTitle` | Displays product title or composed variant title. |
| `OmeWooCartItemPrice` | Displays unit price. |
| `OmeWooCartItemSubtotal` | Displays line subtotal. |
| `OmeWooCartItemQuantity` | Interactive quantity input or display quantity. |
| `OmeWooCartItemRemove` | Removes the current cart item. |
| `OmeWooCartAttributeList` | Loops the selected variation attributes for the current line. |
| `OmeWooCartAttributeName` | Displays attribute name inside `CartAttributeList`. |
| `OmeWooCartAttributeValue` | Displays attribute value inside `CartAttributeList`. |

## Authoring Structure

```text
CartItems
  default slot
    CartItemImage
    CartItemTitle
    CartAttributeList
      CartAttributeName
      CartAttributeValue
    CartItemPrice
    CartItemQuantity
    CartItemSubtotal
    CartItemRemove
  empty slot
    authored empty-cart content
```

## CartItems Props

| Prop | Meaning |
| --- | --- |
| `structure.root_tag` | Root wrapper tag. |
| `structure.item_tag` | Row tag. |
| `structure.empty_tag` | Empty state wrapper tag. |
| `preview.rows` | Number of builder preview rows. |
| `preview.empty_state` | Shows the empty slot in builder preview. |

The runtime sets `data-ome-state` to `has-items` or `empty`.

## Cart Item Atom Props

| Component | Important props |
| --- | --- |
| `CartItemImage` | `content.alt_fallback` is used when Woo image alt text is empty. |
| `CartItemTitle` | `content.include_attributes` and `content.variant_separator` control composed variant title text. |
| `CartItemQuantity` | `configuration.mode` is `interactive` or `preview`; content and accessibility props control label text. |
| `CartItemRemove` | `content.label` and `accessibility.aria_label` control button text and accessible name. |

`CartItemPrice` and `CartItemSubtotal` display Store API formatted price text from the current row.

## Attribute Props

`CartAttributeList` exposes:

| Prop | Meaning |
| --- | --- |
| `structure.root_tag` | Attribute list wrapper tag. |
| `structure.item_tag` | Attribute row tag. |
| `preview.rows` | Number of builder preview attributes. |

`CartAttributeName` and `CartAttributeValue` are row atoms; they need the current attribute row from `CartAttributeList`.

## Hydration Rules

Server render uses `CartItemAtomHydrator` when current cart data exists. Runtime uses `cart-items.ts` after Store API responses. Both update:

- Row keys and indexes.
- Text fields.
- Image attributes.
- Quantity input values and cart item keys.
- Remove button cart item keys.
- Attribute rows cloned from the attribute row template.

Rows inside `<template>` elements are ignored until cloned.

## Scenario Coverage

| Scenario | Covered behavior |
| --- | --- |
| `cart_items_dynamic_source` | Etch loop can render `cartItems` source directly. |
| `cart_items_component_preview_contract` | `CartItems` renders seeded cart rows through cart item atoms. |
| `cart_totals_taxed_cart` | Quantity updates and item removal refresh rows and totals. |
| `cart_page_update_and_remove` | Cart page row actions update state and empty slot. |