Commerce UI Catalog
14 interactive sections for e-commerce interfaces. All components follow the dh-co-* class convention, are fully dark-themed, and require no external dependencies.
Products
Product Cards
Grid display for browsable product listings. Hover reveals wishlist toggle. "Add to Cart" fires dh:co-cart-add and briefly flips to "✓ Added!".
Products
Product Detail
Full product page layout: gallery + thumbnails, colour swatches, quantity stepper, add-to-cart, and meta trust badges. Swatch/thumbnail clicks fire dh:co-swatch-select / dh:co-gallery-change.
WH-1000XM6 Noise Cancelling Headphones
Products
Ratings & Reviews
Aggregate score box, 5-bar breakdown chart, filter pills, and individual review items with avatar, stars, verified badge, and helpful count.
The noise cancellation is absolutely incredible. I use these on daily commutes and long flights — total silence. Sound quality is rich and detailed without being over-boosted.
Sound is phenomenal and the ANC is top-tier. Only minor gripe is it feels a touch heavy after 4+ hours. The touch controls are intuitive once you learn them.
Upgraded from the XM5 and the improvements are real. Clearer call quality, better fit, and the quick-attention mode is super useful. 30hr battery is accurate too.
Products
Inventory
Stock-level table with per-product progress bars, SKU codes, pricing, and colour-coded status badges. Low-stock rows pulse in terra.
| Product | SKU | Stock | Price | Status |
|---|---|---|---|---|
|
Geranium Leaf Body Cleanser
Aesop · 200ml
|
AES-GLC-200 |
47/100
|
$38.00 | In Stock |
|
WH-1000XM6 Headphones
Sony · Midnight Black
|
SNY-WH6-BLK |
12/50
|
$349.00 | Low Stock |
|
Nano Puff Insulated Vest
Patagonia · Forest Green
|
PAT-NPV-FGM |
28/80
|
$189.00 | In Stock |
Cart & Promotions
Shopping Cart
Full cart panel with line items, qty steppers, remove buttons, coupon input, and order-total summary. Checkout button fires dh:co-checkout.
Cart & Promotions
Discounts & Coupons
Standalone coupon input and promo card grid. Applied cards show accent border. Clicking a card auto-fills the input and fires dh:co-coupon-apply.
Cart & Promotions
Promo Banner
Layered promotional banners: hero gradient banner with deal callout + dismissible strip. Data fetched from MockMe on load.
Checkout & Payments
Payment Methods
Selectable payment options with expanding card form. Selecting an option fires dh:co-payment-select. Place Order fires dh:co-place-order.
Checkout & Payments
Order Confirmation
Post-checkout success state with animated icon, order number, and fulfilment progress steps.
Thank you, Jamie. Your order has been confirmed and is being prepared for dispatch.
Orders
Order History
Paginated order history table with emoji product previews, dates, totals, and status badges. Rows are clickable to open order detail.
Orders
Order Detail
Expanded single-order view with shipping address, payment info, line items, and action buttons (cancel, return, support, review).
247 West 35th Street, Apt 8B
New York, NY 10001
United States
Charged $663.12 · Mar 15
Orders
Invoice
Printable invoice with dark header, Bill To / Order Ref parties, dates row, line-item table, discount row, and Paid in Full footer.
Paid in full
| Description | Qty | Unit | Amount |
|---|---|---|---|
| Sony WH-1000XM6 Headphones — Midnight Black | 1 | $349.00 | $349.00 |
| Aesop Geranium Leaf Body Cleanser 200ml | 2 | $38.00 | $76.00 |
| Patagonia Nano Puff Vest — Forest Green, M | 1 | $189.00 | $189.00 |
| Standard Shipping | — | — | Free |
Shipping
Shipping Methods
Selectable shipping tier list with icons, ETAs, pricing, and optional badges. Selection fires dh:co-shipping-select. Free options highlighted in accent.
Shipping
Shipment Tracking
Live tracking header, animated progress bar, milestone steps, and chronological event timeline. Live dot pulses when data-dh-co-live is set.