nuxt-x-affiliate

Product Card

Product card for grids — image, badge, title, rating, price, optional inline buy button.

Product Card

The XAFProductCard component renders a single product card for use in product grids on category pages, "Best of" roundups, and search results. Includes the image, an optional badge, the product title, star rating, price, and an optional inline <XAFBuyButton>.

Components

`<XAFProductCard />`

<XAFProductCard
  name="Logitech MX Keys S"
  image="https://m.media-amazon.com/images/I/mx-keys.jpg"
  :rating="4.6"
  :price="99.99"
  href="/reviews/mx-keys-s"
  description="Best low-profile wireless keyboard for typists."
  badge="Editor's Pick"
  :show-buy-button="true"
  :buy-link="{ merchant: 'amazon', url: 'https://amazon.com/dp/B0CX123', price: 99.99 }"
/>

Props

Prop	Type	Default	Description
`name`	`string`	required	Product name.
`image`	`string`	—	Product image URL.
`rating`	`number`	—	Star rating 0–5.
`price`	`number`	—	Price in dollars.
`href`	`string`	—	Card link target. When set, the whole image + title become links.
`description`	`string`	—	Short 1-line description (line-clamped to 2 lines).
`showBuyButton`	`boolean`	`false`	Render an inline `<XAFBuyButton>` at the bottom.
`buyLink`	`AffiliateLink`	—	Buy button payload (only used when `showBuyButton` is true).
`badge`	`string`	—	Small badge in the corner (e.g. `"Best Value"`, `"Editor's Pick"`).

Events

Event	Payload	Description
`click`	`{ href? }`	Fired when the reader clicks the image or title link.

AI Context

component: XAFProductCard
package: "@xenterprises/nuxt-x-affiliate"
use-when: Product card for grids with image, badge, title, rating, price, and optional inline XAFBuyButton.