nuxt-x-marketing

Affiliate

Affiliate marketing components for product showcases — individual product cards in multiple layouts, a ranked product grid, a spec comparison table, a detailed product review page, and a compliance disclosure component.

Affiliate

The Affiliate suite provides everything needed for a compliant, conversion-optimized affiliate content site. All components follow responsible disclosure patterns — XMarkAffiliateDisclosure is integrated directly into XMarkAffiliateProductGrid, XMarkAffiliateComparisonTable, and XMarkAffiliateProductDetail via the disclosure prop.

Components

`<XMarkAffiliateProductCard />`

A versatile product card with three layout modes. The card layout is a vertical portrait card suitable for grids. The row layout is a wider horizontal card. The compact layout is a minimal single-row item for "also consider" lists.

<XMarkAffiliateProductCard
  :product="{
    name: 'Sony WH-1000XM5',
    image: '/products/sony-xm5.jpg',
    price: '$349.99',
    originalPrice: '$399.99',
    rating: 4.8,
    reviewCount: 24500,
    pros: ['Best-in-class ANC', '30-hour battery', 'Foldable design'],
    cons: ['Premium price', 'No IP rating'],
    affiliateUrl: 'https://amazon.com/dp/B09XS7JWHH?tag=mysite-20',
    badge: '#1 Pick',
  }"
  layout="card"
  :show-pros="true"
  :show-cons="false"
  :show-rating="true"
  :show-price="true"
  button-label="Check Price on Amazon"
  button-icon="i-lucide-external-link"
/>

Props

Prop	Type	Default	Description
`product`	`Object`	Example product	Product object `{ name, image?, price?, originalPrice?, rating?, reviewCount?, pros?, cons?, affiliateUrl, badge? }`
`layout`	`String`	`'card'`	Display layout: `'card'`, `'row'`, `'compact'`
`showPros`	`Boolean`	`true`	Show pros list
`showCons`	`Boolean`	`false`	Show cons list
`showRating`	`Boolean`	`true`	Show star rating
`showPrice`	`Boolean`	`true`	Show price
`buttonLabel`	`String`	`'Check Price on Amazon'`	CTA button label
`buttonIcon`	`String`	`'i-lucide-external-link'`	CTA button trailing icon
`disclosure`	`String`	`''`	Per-card small disclosure text

`<XMarkAffiliateProductGrid />`

A full product grid that ranks items automatically — the first three receive #1 Pick, #2 Pick, #3 Pick badges. Optionally shows a disclosure notice at the top. Delegates card rendering to XMarkAffiliateProductCard.

<XMarkAffiliateProductGrid
  :products="topHeadphones"
  layout="grid"
  :columns="3"
  :show-ranking="true"
  disclosure="This page contains affiliate links. We earn a commission on qualifying purchases."
  button-label="Check Price on Amazon"
  card-layout="card"
/>

List layout for a "best of" article:

<XMarkAffiliateProductGrid
  :products="products"
  layout="list"
  card-layout="row"
  :show-ranking="true"
/>

Props

Prop	Type	Default	Description
`products`	`Array`	`[]`	Array of product objects
`layout`	`String`	`'grid'`	Grid or list: `'grid'`, `'list'`
`columns`	`Number`	`3`	Columns in grid mode: `2`, `3`
`showRanking`	`Boolean`	`true`	Auto-apply rank badges to first 3 products
`disclosure`	`String`	`''`	Disclosure text shown at the top of the grid
`buttonLabel`	`String`	`'Check Price on Amazon'`	CTA label passed to each card
`cardLayout`	`String`	`'card'`	Card layout passed to each card: `'card'`, `'row'`, `'compact'`

`<XMarkAffiliateComparisonTable />`

A desktop table comparing products across a list of specs. Optionally highlights the "best" value per row. Shows buy buttons in the last row. On mobile, collapses to a single-product view with previous/next navigation.

<XMarkAffiliateComparisonTable
  :products="[
    { name: 'Sony XM5', image: '/sony.jpg', price: '$349', affiliateUrl: '...', specs: { 'Battery': '30h', 'ANC': 'Yes', 'Weight': '250g' } },
    { name: 'Bose QC45', image: '/bose.jpg', price: '$279', affiliateUrl: '...', specs: { 'Battery': '24h', 'ANC': 'Yes', 'Weight': '238g' } },
    { name: 'Apple AirPods Max', image: '/airpods.jpg', price: '$549', affiliateUrl: '...', specs: { 'Battery': '20h', 'ANC': 'Yes', 'Weight': '385g' } },
  ]"
  :specs="[
    { key: 'Battery', label: 'Battery Life' },
    { key: 'ANC', label: 'Active Noise Cancellation' },
    { key: 'Weight', label: 'Weight' },
  ]"
  :show-buy-buttons="true"
  :highlight-best="true"
  button-label="Buy on Amazon"
  disclosure="Affiliate disclosure: we earn from qualifying purchases."
/>

Props

Prop	Type	Default	Description
`products`	`Array`	`[]`	Product objects with `specs` map `{ [specKey]: value }`
`specs`	`Array`	`[]`	Spec row definitions `[{ key, label }]`
`showBuyButtons`	`Boolean`	`true`	Show a Buy row at the bottom of the table
`highlightBest`	`Boolean`	`true`	Highlight the best value cell per row
`buttonLabel`	`String`	`'Buy Now'`	Buy button label
`disclosure`	`String`	`''`	Disclosure text shown above the table

`<XMarkAffiliateProductDetail />`

A full editorial product review page. Includes an image gallery with thumbnail navigation, a pros/cons table, a specifications table (from product.specs), an editorial verdict blockquote, and an editorial score badge. A sticky sidebar shows a buy box with affiliate CTA.

<XMarkAffiliateProductDetail
  :product="{
    name: 'Sony WH-1000XM5',
    image: '/products/sony-xm5.jpg',
    images: ['/products/sony-1.jpg', '/products/sony-2.jpg'],
    price: '$349.99',
    originalPrice: '$399.99',
    rating: 4.8,
    reviewCount: 24500,
    description: 'The Sony WH-1000XM5 is the best noise-canceling headphone...',
    pros: ['Best-in-class ANC', '30h battery', 'Lightweight'],
    cons: ['No IP rating', 'No 3.5mm jack on USB-C charging'],
    specs: { 'Driver Size': '30mm', 'Frequency': '4Hz–40kHz', 'Weight': '250g' },
    verdict: 'The XM5 is the benchmark for wireless ANC headphones in 2025.',
    score: 9.2,
    affiliateUrl: 'https://amazon.com/dp/B09XS7JWHH?tag=mysite-20',
  }"
  :has-buy-box="true"
  :has-pros-cons-table="true"
  :has-specs="true"
  disclosure="Affiliate disclosure text."
/>

Props

Prop	Type	Default	Description
`product`	`Object`	Required	Full product object including `name`, `image?`, `images?`, `price?`, `originalPrice?`, `rating?`, `reviewCount?`, `description?`, `pros?`, `cons?`, `specs?`, `verdict?`, `score?`, `affiliateUrl`
`hasBuyBox`	`Boolean`	`true`	Show sticky sidebar buy box
`hasProsConsTable`	`Boolean`	`true`	Show formatted pros/cons section
`hasSpecs`	`Boolean`	`true`	Show specifications table
`disclosure`	`String`	`''`	Disclosure text shown at the top

Slots

Slot	Description
`after-verdict`	Content inserted after the verdict section
`buy-box`	Override the default sticky sidebar buy box

`<XMarkAffiliateDisclosure />`

An FTC-compliant affiliate disclosure in three display modes. Persists dismiss state in-component (does not use localStorage by default). Use subtle for per-section disclosures, banner for a full-width site-level notice, and inline for inline text.

<!-- Subtle box (most common — used by ProductGrid and ComparisonTable) -->
<XMarkAffiliateDisclosure
  text="This page contains affiliate links. As an Amazon Associate, we earn from qualifying purchases at no extra cost to you."
  variant="subtle"
  :dismissible="true"
/>

<!-- Full-width banner -->
<XMarkAffiliateDisclosure
  text="Some links on this site are affiliate links."
  variant="banner"
/>

<!-- Inline sentence -->
<p>
  We recommend the Sony XM5
  <XMarkAffiliateDisclosure
    text="(affiliate link)"
    variant="inline"
    :dismissible="false"
  />
  for most users.
</p>

Props

Prop	Type	Default	Description
`text`	`String`	Default Amazon associate disclosure	Disclosure message text
`variant`	`String`	`'subtle'`	Display style: `'subtle'`, `'banner'`, `'inline'`
`icon`	`String`	`'i-lucide-info'`	Icon shown alongside the text
`dismissible`	`Boolean`	`true`	Show dismiss button

AI Context

category: Affiliate
package: "@xenterprises/nuxt-x-marketing"
components:
  - XMarkAffiliateProductCard
  - XMarkAffiliateProductGrid
  - XMarkAffiliateComparisonTable
  - XMarkAffiliateProductDetail
  - XMarkAffiliateDisclosure
use-when: >
  Building affiliate product content — "best of" round-ups, comparison
  articles, and individual product reviews. Always include a Disclosure
  component to maintain FTC compliance.
typical-page-section: >
  ProductGrid: main content of "best X" articles. ComparisonTable: after
  the product grid in comparison articles. ProductDetail: full-page product
  review. Disclosure: top of any page or section containing affiliate links.

Edit this pageorReport an issue

Modal

Modal components for video playback, image lightboxes, full-screen feature showcases, and floating chat prompts.

Layout

Site-wide layout components including a sticky transparent navbar, full-featured footer, compact legal footer, and dismissible announcement bar.