nuxt-x-affiliate
Related Products
You might also like
Related Products
The XAFRelatedProducts component renders a "You might also like" section at the bottom of a product review. Wraps multiple <XAFProductCard> components in a grid (default) or stacked list. The first item is automatically tagged "Top pick" as a badge.
Components
<XAFRelatedProducts />
<XAFRelatedProducts
title="You might also like"
layout="grid"
:items="[
{ name: 'Keychron K3', image: '/img/k3.jpg', rating: 4.3, price: 89.99, href: '/reviews/keychron-k3', reason: 'Best low-profile mechanical' },
{ name: 'Apple Magic', image: '/img/magic.jpg', rating: 4.1, price: 99, href: '/reviews/apple-magic', reason: 'Best for Mac users' },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | RelatedProduct[] | required | Each item: { name, image?, rating?, price?, href, buyLink?, reason? }. |
title | string | "You might also like" | Section heading. |
layout | 'grid' | 'list' | 'grid' | 4-column grid or stacked rows. |
Related product shape
interface RelatedProduct {
name: string
image?: string
rating?: number
price?: number
href: string
buyLink?: AffiliateLink // Renders inline XAFBuyButton when set
reason?: string // One-line teaser shown as description
}
The first item gets a "Top pick" badge. Pass a buyLink to render an inline <XAFBuyButton> on each card.
AI Context
component: XAFRelatedProducts
package: "@xenterprises/nuxt-x-affiliate"
use-when: "You might also like" section in grid or list of XAFProductCards with optional inline buy buttons.