nuxt-x-marketing
AffiliateComparisonTable
Side-by-side product spec comparison table with buy buttons, best-value highlighting, and mobile-friendly single-product view.
AffiliateComparisonTable
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.
Components
<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 |
AI Context
category: Affiliate
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkAffiliateComparisonTable
use-when: >
Adding a side-by-side spec comparison table to affiliate comparison
articles. Collapses to single-product view on mobile with prev/next
navigation.
typical-page-section: After the product grid in affiliate comparison articles.