The product-variants component (Vvveb\Component\Product\Variants) lists the variants of a product (combinations of option values, e.g. size × color) with variant-specific prices, images and URLs.
Activate the component by adding:
data-v-component-product-variants
Component Options
Add options as HTML attributes using the data-v-* syntax.
| Option | Attribute | Description | Default |
|---|---|---|---|
| start | data-v-start |
Starting offset | 0 |
| limit | data-v-limit |
Number of variants (null = all) |
null |
| site_id | data-v-site_id |
Site ID | Current site |
| language_id | data-v-language_id |
Language ID | Current language |
| product_id | data-v-product_id |
Product ID, from URL by default | url |
| parent_id | data-v-parent_id |
Filter by parent | null |
| search | data-v-search |
Filter by text | null |
| name | data-v-name |
Filter by variant name | null |
| url | data-v-url |
Filter by variant URL | null |
Component Properties
Variants render inside data-v-variant repeatables with nested data-v-value entries for the option-value combination. Fields include variant name, sku, price / price_formatted (tax-aware), image, url / full-url and stock data. The component also exposes count and the product_variant list.
HTML Example
<div data-v-component-product-variants>
<div data-v-variant>
<span data-v-variant-name></span>
<span data-v-variant-price_formatted></span>
</div>
</div>