Add to Cart State

Add-to-cart event and client-side cart state example.

What This Example Demonstrates

The example maps a selected product card into a local cart item and then into the props used by the cart modal. It is useful for testing the transition from product discovery to a reviewable cart before any server-side checkout operation occurs.

How to Use It

Store stable product, variant, and SKU identifiers with the display fields. Recalculate totals and validate inventory on the backend when the customer confirms. isCartConfirmed is a UI state flag, not proof that a server-side cart or order exists.

{
  "description": "Client-side add-to-cart event and cart modal state. This mirrors the reference frontend CartItem shape.",
  "addToCartEvent": {
    "type": "ADD_TO_CART",
    "source": "ProductCard",
    "product": {
      "id": "10012",
      "productId": "1234567890",
      "sku": "JACKET-BLK-M",
      "name": "Black Waterproof Hiking Jacket / Medium",
      "brand": "Example Brand",
      "price": 129.9,
      "original_price": 159.9,
      "price_text": "$129.90",
      "url": "https://store.example.com/products/black-waterproof-hiking-jacket?variant=medium",
      "image": "https://cdn.example.com/products/jacket-black-main.jpg",
      "description": "Lightweight waterproof shell with adjustable hood and sealed seams.",
      "in_stock": true,
      "storeName": "Example Brand Store",
      "selectedOptions": {
        "color": "black",
        "size": "M"
      }
    }
  },
  "cartState": {
    "cartType": "product",
    "activeCartMerchant": "Example Brand Store",
    "items": [
      {
        "id": "10012",
        "productId": "1234567890",
        "sku": "JACKET-BLK-M",
        "name": "Black Waterproof Hiking Jacket / Medium",
        "price": "$129.90",
        "image": "https://cdn.example.com/products/jacket-black-main.jpg",
        "url": "https://store.example.com/products/black-waterproof-hiking-jacket?variant=medium",
        "storeName": "Example Brand Store"
      }
    ],
    "reservations": [],
    "isCartConfirmed": false
  },
  "CartModalProps": {
    "isOpen": true,
    "items": "{{cartState.items}}",
    "reservations": [],
    "cartType": "product",
    "isConfirming": false,
    "isCartConfirmed": false
  }
}