← Back to Examples

Product Catalog

E-commerce product browser powered by html★ + Vanilla Breeze

Product Catalog Demo

Browse products by category, sort and filter results, view details in modals, and manage a cart — all with html★ hypermedia patterns and Vanilla Breeze styling.

Launch Demo →

What's Included

Shop Features

  • Category Navigation — Browse by category with instant loading
  • Product Grid — Responsive grid with sort dropdown
  • Infinite Scroll — Load more products as you scroll
  • Product Modals — Detail view with reviews tab
  • Cart Updates — OOB swaps update cart badge without page reload
  • Skeleton Loading — Animated loading states during fetches

html★ Patterns Used

Performance

  • data-cache="swr:10m" — Cache product pages for 10 minutes
  • data-prefetch="hover" — Preload categories on hover
  • data-instant — Fire on mousedown for faster navigation
  • data-loading-class="skeleton" — Animated skeleton loading

Dynamic Content

  • data-trigger="visible" — Infinite scroll via IntersectionObserver
  • data-swap="beforeend" — Append new products to grid
  • data-oob — Out-of-band cart badge updates
  • data-queue="last" — Only keep the latest sort/filter request

Why This Matters

Product browsing with prefetch + SWR caching feels as fast as a React SPA. OOB swaps update the cart badge without touching the product grid. Infinite scroll with skeleton loading states provides a polished UX — all without a build step or JavaScript framework.