Skip to main content

Cart Modal States

Empty, populated, confirming, and confirmed cart modal state examples.

What This Example Demonstrates​

These fixtures cover the main visual states of the cart surface. They help teams verify that loading and confirmation feedback is explicit and that the customer cannot accidentally submit the same cart multiple times while a request is in progress.

State Meaning​

  • Empty shows that no purchasable items are selected.
  • Product cart displays current items and estimated totals.
  • Confirming disables repeated submission while the backend call is running.
  • Confirmed indicates that the server accepted the cart action.

Do not enter the confirmed state until the backend returns a successful cart identifier.

{
  "description": "Extended logical payloads for the reference commerce UI. These examples can be used as mock API responses, Storybook fixtures, or frontend integration test data.",
  "cartModalStates": {
    "emptyCart": {
      "CartModalProps": {
        "isOpen": true,
        "items": [],
        "reservations": [],
        "cartType": null,
        "isConfirming": false,
        "isCartConfirmed": false
      }
    },
    "productCart": {
      "CartModalProps": {
        "isOpen": true,
        "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": [],
        "cartType": "product",
        "isConfirming": false,
        "isCartConfirmed": false
      },
      "totals": {
        "itemCount": 1,
        "totalAmount": "$129.90",
        "currency": "USD"
      }
    },
    "confirmingCart": {
      "CartModalProps": {
        "isOpen": true,
        "items": [
          {
            "id": "10012",
            "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": [],
        "cartType": "product",
        "isConfirming": true,
        "isCartConfirmed": false
      }
    },
    "cartConfirmed": {
      "CartModalProps": {
        "isOpen": true,
        "items": [
          {
            "id": "10012",
            "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": [],
        "cartType": "product",
        "isConfirming": false,
        "isCartConfirmed": true
      },
      "checkoutData": {
        "cartId": "cart_01HX7WJVDGVK3Y9Q",
        "checkoutId": "chk_1234567890abcdef12345678",
        "status": "checkout_created",
        "totalAmount": "129.90",
        "currency": "USD"
      }
    }
  }
}