Cart

Preview Available in release assets

Present server-owned cart lines and totals with durable update, removal, product, and checkout destinations.

Server contract

GET or POST /api/advanced/cart-checkout?view=cart renders the complete server-owned cart view for native navigation; a Datastar request to the same action returns the stable fragment only. Never embed payment controls or treat browser state as commerce truth.

Cart lines, checkout forms, discounts, availability notices, totals, errors, and order progress remain server-rendered and usable without JavaScript.

Cart primary example

<main class="thin-cart" aria-labelledby="cart-title">
  <header>
    <h1 id="cart-title">Your cart</h1>
    <p role="status">Two items reserved while you check out.</p>
  </header>
  <div class="thin-cart-layout">
    <section aria-labelledby="cart-items-title">
      <h2 id="cart-items-title" class="thin-visually-hidden">Cart items</h2>
      <ul class="thin-cart-items">
        <li>
          <img src="/products/tote-thumb.jpg" alt="">
          <div>
            <h3><a href="/products/tote">Everyday canvas tote</a></h3>
            <p>Blue</p>
            <p>$68.00 each</p>
            <form action="/cart/items/tote" method="post">
              <label for="cart-tote-quantity">Quantity</label>
              <input class="thin-input" id="cart-tote-quantity" name="quantity" type="number" min="1" max="3" value="2" required />
              <button class="thin-button">Update</button>
            </form>
            <form action="/cart/items/tote/remove" method="post">
              <button class="thin-button" data-variant="quiet">Remove <span class="thin-visually-hidden">Everyday canvas tote</span>
            </button>
          </form>
        </div>
      </li>
    </ul>
  </section>
  <aside class="thin-order-summary" aria-labelledby="cart-summary-title">
    <h2 id="cart-summary-title">Summary</h2>
    <dl>
      <div>
        <dt>Subtotal</dt>
        <dd>$136.00</dd>
      </div>
      <div>
        <dt>Shipping</dt>
        <dd>Calculated at checkout</dd>
      </div>
      <div data-total>
        <dt>Estimated total</dt>
        <dd>$136.00</dd>
      </div>
    </dl>
    <p>Prices, availability, discounts, shipping, and tax are confirmed by the server at checkout.</p>
    <a href="/checkout" >Continue to checkout</a>
  </aside>
</div>
</main>

Show code

<main class="thin-cart" aria-labelledby="cart-title">
  <header>
    <h1 id="cart-title">Your cart</h1>
    <p role="status">Two items reserved while you check out.</p>
  </header>
  <div class="thin-cart-layout">
    <section aria-labelledby="cart-items-title">
      <h2 id="cart-items-title" class="thin-visually-hidden">Cart items</h2>
      <ul class="thin-cart-items">
        <li>
          <img src="/products/tote-thumb.jpg" alt="">
          <div>
            <h3><a href="/products/tote">Everyday canvas tote</a></h3>
            <p>Blue</p>
            <p>$68.00 each</p>
            <form action="/cart/items/tote" method="post">
              <label for="cart-tote-quantity">Quantity</label>
              <input class="thin-input" id="cart-tote-quantity" name="quantity" type="number" min="1" max="3" value="2" required />
              <button class="thin-button">Update</button>
            </form>
            <form action="/cart/items/tote/remove" method="post">
              <button class="thin-button" data-variant="quiet">Remove <span class="thin-visually-hidden">Everyday canvas tote</span>
            </button>
          </form>
        </div>
      </li>
    </ul>
  </section>
  <aside class="thin-order-summary" aria-labelledby="cart-summary-title">
    <h2 id="cart-summary-title">Summary</h2>
    <dl>
      <div>
        <dt>Subtotal</dt>
        <dd>$136.00</dd>
      </div>
      <div>
        <dt>Shipping</dt>
        <dd>Calculated at checkout</dd>
      </div>
      <div data-total>
        <dt>Estimated total</dt>
        <dd>$136.00</dd>
      </div>
    </dl>
    <p>Prices, availability, discounts, shipping, and tax are confirmed by the server at checkout.</p>
    <a href="/checkout" >Continue to checkout</a>
  </aside>
</div>
</main>

Anatomy

Cart heading and status
Server-rendered line items
Update and remove forms
Order summary
Checkout link

Variants and sizes

Neutral theme
Thin-Sky theme
Intrinsic narrow and wide containers

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Populated
Empty
Updating
Line error
Price changed
Availability changed
Long localized content

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Normal links and forms navigate and submit to server routes. Returned HTML owns prices, inventory, discounts, validation, totals, and order state.

Accessibility

Use landmarks, headings, labelled native controls, linked error summaries, visible status text, logical reading order, and non-color state cues. Move focus on server navigation, not speculative client updates.

Contract

COMPOSE

Basis

Native forms, tables/lists, headings, links, and status content; no APG widget

Evidence

tests/unit/library/cart-checkout.test.ts

API

Behavior tier: dependency-free

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Cart lines, checkout forms, discounts, availability notices, totals, errors, and order progress remain server-rendered and usable without JavaScript.

Assets and dependencies

/foundation.css
/layouts.css
/components.css
/patterns/ecommerce.css

Dependencies: field, quantity-input, alert, status, steps

Source: packages/ui/src/style/ecommerce.ts

Composition

Derived from the examples and style specs, not authored.