Skip to content

Product recommendations

Preview Available in release assets

Present server-selected related products without making recommendation logic or product truth a browser concern.

Product recommendations in context

Show code
<section class="thin-product-recommendations" aria-labelledby="related-title">
  <header class="thin-cluster">
    <h2 id="related-title">You may also like</h2>
    <a href="/collections/bags">View all bags</a>
  </header>
  <div class="thin-product-grid">
    <article class="thin-product-card">
      <div class="thin-product-media-fallback" role="img" aria-label="Product image unavailable">
        <svg aria-hidden="true" data-icon>
          <use href="/icons/sprite.svg#image">
          </use>
        </svg>
      </div>
      <div class="thin-product-card-body">
        <h3><a href="/products/field-pouch">Field pouch with an intentionally long localized product name</a></h3>
        <p class="thin-product-price">CHF 1’234.50</p>
      </div>
    </article>
  </div>
</section>

Anatomy

  • Named section
  • Product grid or reel
  • Durable product links
  • Optional collection 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.

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

  • Results
  • Empty
  • Loading
  • Error
  • Missing media
  • Long localized content

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Links and forms own navigation and submission. Optional dialog, media, toast, confirm, or Datastar enhancement may coordinate mechanics but must render returned server truth.

Accessibility

Preserve landmarks, headings, labels, native controls, status text, focus order, image alternatives, and non-color state. Announce only server-confirmed changes.

Contract
COMPOSE
Basis
Native links, headings, forms, lists, and status content; no product-specific APG widget
Evidence
  • tests/unit/library/ecommerce-patterns.test.ts

API

Use semantic HTML with .thin-product-recommendations. Keep price, inventory, variants, cart lines, totals, and errors in server-rendered markup.

Behavior tier: datastar-optional

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

Fallback

Products, prices, inventory messages, variant choices, and cart actions remain server-authored links, forms, and content without optional enhancement.

Assets and dependencies

  • /foundation.css
  • /layouts.css
  • /components.css
  • /patterns/ecommerce.css
  • /behaviors.js
  • /icons/sprite.svg

Dependencies: quantity-input, rating, toast, confirm-dialog, drawer, product-gallery, lightbox

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

Composition

Derived from the examples and style specs, not authored.

Composes