Product Options
<salla-product-options> web component is used to show to the Merchant all the fields that are customizable to curate the experience of personalizing a product prior to ordering it. Read more details on the proper use of each element of the component from here.Note
Example
Usage
HTML
SASS
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| Options | options | Product detail information. | string | undefined |
| Product ID | product-id | The Product ID to which the all options will be fetched for. | number | salla.config.get('page.id') |
Events
| Event | Description | Type |
|---|---|---|
changed | This event will be fired when the product options is changed. | CustomEvent<any> |
Information
changed event in the salla-product-options component, contains some data about the changed options, which is explained in the following structure and example.Methods
methods allow for calling functions built by Salla to carry out certain actvities, such as getOption which gets a specific option by its ID.| Method | Description | Return Type |
|---|---|---|
getOption(option_id: any) | Gets a specific option by its ID. | Promise<Option> |
getSelectedOptions() | Gets all selected options. | Promise<any[]> |
getSelectedOptionsData() | Gets the IDs of the selected options. | Promise<{}> |
hasOutOfStockOption() | Returns a true value if there is any out of stock options that are selected and vise versa. | Promise<boolean> |
reportValidty() | Reports the options' form validty. | Promise<boolean> |
JSON Code Structure
Structure
| Name | Description |
|---|---|
event | The native change event for each option . |
option | The entire changed option data . |
detail | The specific item that has been selected in the option. |
Example
detail
{id: 123456789, name: 'XL', additional price: 0, option_value: null, image: null, ...}event
{isTrusted: true, type: 'change', target: select.s-form-control, currentTarget: null, eventPhase: 0 ...}option
{id: 1234567899, name: "المقاس", required: true, type: 'single-option', placeholder: 'اختر' ...}Modified at 2025-03-04 12:54:02