Storefront primitive pack
Fourteen reusable e-commerce surfaces for Oak Flats Mufflermen — product grid, PDP, cart drawer, mini cart, checkout stepper, AU address form, payment methods (card / Apple Pay / Google Pay / Afterpay / BPay), order summary rail, search, faceted filters, wishlist, out-of-stock notify, coupon entry, and order confirmation. Bonus: a full shop composition route.
Storefront primitive pack is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Storefront primitive pack: Fourteen reusable e-commerce surfaces for Oak Flats Mufflermen — product grid, PDP, cart drawer, mini cart, checkout stepper, AU address form, payment methods (card / Apple Pay / Google Pay / Afterpay / BPay), order summary rail, search, faceted filters, wishlist, out-of-stock notify, coupon entry, and order confirmation. Bonus: a full shop composition route.
Product list grid
Product cards with quick-view hover, inline qty stepper, and add-to-cart for the catalogue grid surface.
Product detail page
PDP with media gallery, variant picker, fitment chip, spec sheet and verified-buyer reviews.
Cart drawer
Slide-out cart with line edit, swipe-to-remove, free shipping progress and postcode estimate.
Mini cart badge
Header cart icon with count badge, pulse on add, and optional total label.
Checkout stepper
Cart → Shipping → Payment → Review with status, captions and segmented progress.
Address form card
Shipping address with autocomplete, AU state/territory picker and validation surface.
Payment method card
Card · Apple Pay · Google Pay · Afterpay (4×$322.50) · BPay biller code picker with declined state.
Order summary rail
Sticky right rail with items, shipping, GST, coupon discount, total and trust badges.
Product search bar
Search with autocomplete suggestions, trending, recent searches and ⌘K shortcut.
Faceted filter panel
Left-rail filters — brand, category, price range, finish swatches and rego-based fitment match.
Wishlist card
Saved-item card with stock alert toggle, move-to-cart and quick remove.
Out-of-stock row
OOS row with ETA, alternate suggestion CTA and inline notify-me capture.
Coupon input card
Promo entry with apply/error/applied states, auto-applied chip and inline suggestion.
Order confirmation card
Thank-you card with order #, ETA blocks, copy, share, track and email-again actions.
Full shop
Composes search, faceted filters, product grid, cart drawer, coupon card and order rail into a live storefront surface.