Chapter 19 — Storefront Patterns

Compose customer-facing ecommerce layouts without Bootstrap, reusing forms, tables, and admin chrome tools.

New concepts

Store shells, product card grids, filter catalogs, product detail buy boxes, cart and checkout summaries, account hubs, and print-friendly invoices.

Read the Storefront gauge

What changes after Admin UI?

Chapter 18 focused on operator dashboards. This chapter applies the same native-control discipline to a buyer-facing store: merchandising grids, sticky order summaries, and account tables. Interactive search, sort, and bulk actions wait for JavaScript Phase 9.

Lessons

  1. 1. Store shell
  2. 2. Product card grid
  3. 3. Filter catalog
  4. 4. Product detail
  5. 5. Cart and summary
  6. 6. Checkout compose
  7. 7. Account hub
  8. 8. Lists and invoice

Checkpoint

Build a mini storefront page that includes a store shell, a short product card grid, and a cart or order-summary fragment. Keep every control labelled and every data table semantic.