nuxt-x-marketing
AffiliateProductGrid
Ranked product grid or list with automatic
AffiliateProductGrid
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.
Components
<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' |
AI Context
category: Affiliate
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkAffiliateProductGrid
use-when: >
Building the main product section of affiliate "best of" round-up articles.
Automatically ranks the first three products with pick badges and includes
an optional disclosure notice.
typical-page-section: Main content section of affiliate round-up articles.