The product-options component (Vvveb\Component\Product\Options) lists the selectable options of a product (dropdowns, radios, checkboxes, file uploads) with their values and price modifiers. It is used on product pages to render the option selectors.

Activate the component by adding:

data-v-component-product-options

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 options (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
product_variant_id data-v-product_variant_id Pre-select values for a variant null
parent_id data-v-parent_id Filter by parent option null
search data-v-search Filter by text null
image_size data-v-image_size Option-value image size thumb

Component Properties

Options render inside data-v-option repeatables with nested data-v-value repeats for the selectable values. Fields include option name, type (select, radio, checkbox, …), required flag, and per-value name, price / price_formatted modifiers and images. The component also exposes count.

HTML Example

<div data-v-component-product-options>
	<div data-v-option>
		<label data-v-option-name></label>
		<div data-v-value>
			<span data-v-value-name></span>
			<span data-v-value-price_formatted></span>
		</div>
	</div>
</div>