Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Product Components
  • Getting Started
    • Create a theme
    • Develop a theme
    • Setup a theme
    • Publish a theme
  • Requirements & Review
    • Overview
    • Main Requirements
    • Review Process
      • UI / UX Review
      • Technical Review
      • Metadata Review
      • Pre-Launch Review
  • Files and Folders Structure
    • Directory structure
    • Twilight.json
  • Twig Template Engine
    • Basic syntax
    • Twilight flavoured twig
  • Theme Architecture
    • Layouts
      • Overview
      • Master Layout
      • Global Variables
      • CSS Variables
      • Salla Icons
      • Custom Fonts
      • Hooks
      • Localizations
    • Pages
      • Overview
      • Home Page
      • Product Pages
        • Products listing
        • Single product
      • Customer Pages
        • Profile
        • Orders list
        • Order details
        • Wishlist
        • Notifications
      • Blog Pages
        • Blog listing
        • Single blog
      • Brand Pages
        • Brands listing
        • Single brand
      • Common Pages
        • Cart
        • Loyalty
        • Thank you
        • Single page
        • Landing Page
    • Componenets
      • Overview
      • Home Components
        • Youtube
        • Fixed banner
        • Testimonials
        • Parallax background
        • Photos slider
        • Store features
        • Square photos
        • Fixed products
        • Products slider
        • Featured products - Style 1
        • Featured Products - Style 2
        • Featured Products - Style 3
        • Brands
        • Enhanced Square Banners
        • Main Links
        • Enhanced Slider
        • Slider Products with Headers
        • Latest Products
        • Vertical Menu with Slider
      • Product Components
        • Essentials
        • Options
      • Common Components
        • Header Components
        • Footer Components
        • Comments component
  • Change Log
  1. Product Components

Options

In this article, we will list the group components in order to create the options related to the product. For example, the product's colors and size, which we need some special text components to display them.
Following is the location of a product's options components:
Following are the option components which can be used to create a product's options :
Color
Date
Datetime
Donation
Image
Multiple Options
Number
Single Option
Splitter
Text
Textarea
Thumbnail
Time

Color#

This component is a set of options rendered as colors, in which the customer can select the color they want. It can be useful to present a product's color.

Example#

Color Options Components

Variables#

color
option
object (ProductOption) 
optional
id
integer 
optional
The id of the product option.
name
string 
optional
Name of product option.
required
boolean 
optional
Is this product option 'required'?
type
enum<string> 
optional
Product option type.
Allowed values:
single-optiondatedatetimetimeimagetexttextareanumbermulti-optionssplittercolorthumbnaildonation
placeholder
string  | null 
optional
Placeholder of product option area.
not_same_day_order 
boolean 
optional
Availabililty for the same day order.
availability_range  
boolean 
optional
Availability of product option range.
from_date_time 
string <date-time> | null 
optional
Starting Date and time of the product option.
Example:
2021-12-21 21:21:21
to_date_time
string <date-time> | null 
optional
Ending date and time of the product option.
Example:
2021-12-21 21:21:21
visibility_condition
object  | null 
optional
Visibility condition objects.
condition_attributes
string 
optional
The condition related attributes
Example:
data-visibility-option="*" data-visibility-operator="=" data-visibility-value="*"
element
string 
optional
Contains HTML content that renders the file: views/components/product/elements/*.twig using type.
Example:
number.twig
details
array[object (ProductOptionDetails) {9}] 
optional
Products options details.
attirubtes
string 
optional
The color's attirubtes
disabled
boolean 
optional
The availability of the color as option.
required
boolean 
optional
Is the color option required?
value
string  | null 
optional
The color value.

Usage#

The HTML element input_radio is used to allow customers to select one item at a time. The details of the product's colors can be displayed using a for-loop statement through the details object.

Date#

This component works as a date picker to allow customers to select a date. It can be used as an input field for the delivery date, as an example.

Example#

Date

Variables#

Date
date
string <date-time>
required
A specific point in time, typically expressed in terms of a calendar system, including the day, month, year, hour, minutes, seconds and nano seconds. For example: "2020-10-14 14:28:03.000000"
timezone_type
number 
required
Timezone type of the date, for Middel East = 3
timezone
string 
required
Timezone value "Asia/Riyadh"

Usage#

The HTML element input is used to show this component with some predefined attributes.

Datetime#

This component works as a date-and-time picker to allow customers to select a date and time. It can be used as an input field for the delivery date and time, as an example.

Example#

Datetime

Variables#

datatime
option
object (ProductOption) 
optional
Detailed structure of the product option model object showing its fields and data types.
id
number 
required
A unique identifier assigned to a specific product configuration or variant.
name
string 
required
The label or title used to describe a specific choice or attribute associated with a product.
description
string  | null 
required
A text or content that provides detailed information about a product.
type
enum<string> 
required
Type of the product option, it can be a radio button or checkbox
Allowed values:
radiocheckboxbutton
required
boolean 
required
Whether or not the product option is obligatory.
associated_with_order_time
integer  | boolean 
required
The product option is only relevant to order receiving time when it pertains to date-time selections. ONLY for date time options.
sort
integer  | null 
required
Product option sort refers to the method or criteria used to arrange or order product options.
display_type
enum<string> 
required
The manner in which product choices or attributes are presented.
Allowed values:
textimagecolor
visibility
enum<string> 
required
Product option visibility based on condition is applied exclusively to products categorized as 'food' or 'service'.
Allowed values:
alwayson_condition
visibility_condition_type
enum<string> 
required
Product option visiblity condition type
Allowed values:
><=!=
visibility_condition_option
integer  | null 
required
Whether or not Product option is visible.
visibility_condition_value
integer  | null 
required
A unique identifier associated with a specific value or choice within a product option.
values
array[object (ProductValue) {12}] 
required
skus
array[object (ProductVariant) {21}] 
required
attirubtes
string 
optional
The attributes of datetime option.
Example:
id="field_1819067185_562106943
disabled
boolean 
optional
The availability of datetime as an option.
required
boolean 
optional
Is datetime option required?
value
string  | null 
optional
The value in the datetime option.
time_zone
string 
optional
The timezone of datetime option.
Example:
+0300
order_times
array[string]
optional
ex: ["saturday"=>["00:00-23:55"],"sunday"=>["00:00-23:55"]]
not_same_day_order
boolean 
optional
The availability of not-the-same-day-order in datetime option.
availability_range
boolean 
optional
The datetime option availability range.
from_date_time
string 
optional
Starting date and time of datetime option.
Example:
2021-12-21 21:21:21
to_date_time
string 
optional
Ending date and time of datetime option.
Example:
2021-12-21 21:21:21

Usage#

The HTML element input is used to show this component with some predefined attributes. Some of the main variables here are option.placeholder and order_times.

Donation#

The donation component is a track bar that allows customers to set or adjust a donation value. When the customer changes the value, the donation amount will take the value of this track bar.

Example#

Donation

Variables#

donation
option
object (ProductOption) 
optional
id
integer 
optional
The id of the product option.
name
string 
optional
Name of product option.
required
boolean 
optional
Is this product option 'required'?
type
enum<string> 
optional
Product option type.
Allowed values:
single-optiondatedatetimetimeimagetexttextareanumbermulti-optionssplittercolorthumbnaildonation
placeholder
string  | null 
optional
Placeholder of product option area.
not_same_day_order 
boolean 
optional
Availabililty for the same day order.
availability_range  
boolean 
optional
Availability of product option range.
from_date_time 
string <date-time> | null 
optional
Starting Date and time of the product option.
Example:
2021-12-21 21:21:21
to_date_time
string <date-time> | null 
optional
Ending date and time of the product option.
Example:
2021-12-21 21:21:21
visibility_condition
object  | null 
optional
Visibility condition objects.
condition_attributes
string 
optional
The condition related attributes
Example:
data-visibility-option="*" data-visibility-operator="=" data-visibility-value="*"
element
string 
optional
Contains HTML content that renders the file: views/components/product/elements/*.twig using type.
Example:
number.twig
details
array[object (ProductOptionDetails) {9}] 
optional
Products options details.
attirubtes
string  | null 
optional
The attributes of donation option.
Example:
id="field_1819067185_562106943"
disabled
boolean 
optional
The availability of donation option.
required
boolean 
optional
Is donation option required?
value
string  | null 
optional
The value of donation option.
Product
object (Product) 
optional
Detailed structure of the product model object showing its fields and data types.
name
string 
required
A label to identify and categoriz a product listing.
price
number 
required
The specified cost assigned to a particular item.
status
enum<string> 
required
The current state of availability of an item within a product inventory.
Allowed values:
hiddensaleout
product_type
enum<string> 
required
Type of the product.
Allowed values:
productservicegroup_productscodesdigitalfooddonatingbooking
quantity
number 
required
The count of an item in inventory.
unlimited_quantity
boolean 
required
Display whether this product has an infinite quantity or is limited.
description
string 
required
The detailed information about an item.
categories
array[string]
required
A group of category IDs that connect to the product.
min_amount_donating
number 
required
The minimum amount of donation.
max_amount_donating
number 
required
The maximum amount of donation.
sale_price
number 
required
The reduced cost assigned to an item for a limited period.
cost_price
number 
required
The cost of a produce before additional costs or profit margins.
sale_end
string 
required
The end of a period when an item is available at a discounted price.
require_shipping
boolean 
required
To specify if a product needs physical delivery or can be provided digitally.
maximum_quantity_per_order
number 
required
Maximum product quantity for a single order.
weight
number 
required
The weight of the order in numerical form.
sku
string 
required
Stock Keeping Unit is a unique alphanumeric code for identifying and managing products in inventory.
hide_quantity
boolean 
required
Whether or not to hide product quantity.
enable_upload_image
boolean 
required
Whether or not to allow uploading an image for a product when adding it to their cart.
enable_note
boolean 
required
Whether or not to add a note to a product when adding product to the cart.
pinned
boolean 
required
Whether or not the product is pinned in the categories page.
active_advance
boolean 
required
Whether or not to enable product active advance.
subtitle
string 
required
A brief additional description for a product.
promotion_title
string 
required
A concise label or heading used to highlight a specific promotion.
metadata_title
string 
required
Product SEO Metadata Title which is a label used to optimize search engine results and enhance the visibility of a product page.
metadata_description
string 
required
A succinct summary crafted to enhance search engine optimization .
brand_id
number 
required
A unique identifier assigned to a specific brand.
tags
array[number]
required
Labels used to categorize and identify products.

Usage#

In order for the customer to make a donation using the currently being viewed product, that product should allow donations. This can be checked by checking the variable product.can_donate. The price of that product can also be used as a default value by using <input type="text" value="{{ product.price }}" />.
To check if the donation target has been accomplished, the developer can use the variable product.donation.completed.

Image#

This component gives the user the ability to upload an image from the product page. It can be used in many ways, such as allowing customers to send more details about the product they require.

Example#

Image

Variables#

image
option
object (ProductOption) 
optional
id
integer 
optional
The id of the product option.
name
string 
optional
Name of product option.
required
boolean 
optional
Is this product option 'required'?
type
enum<string> 
optional
Product option type.
Allowed values:
single-optiondatedatetimetimeimagetexttextareanumbermulti-optionssplittercolorthumbnaildonation
placeholder
string  | null 
optional
Placeholder of product option area.
not_same_day_order 
boolean 
optional
Availabililty for the same day order.
availability_range  
boolean 
optional
Availability of product option range.
from_date_time 
string <date-time> | null 
optional
Starting Date and time of the product option.
Example:
2021-12-21 21:21:21
to_date_time
string <date-time> | null 
optional
Ending date and time of the product option.
Example:
2021-12-21 21:21:21
visibility_condition
object  | null 
optional
Visibility condition objects.
condition_attributes
string 
optional
The condition related attributes
Example:
data-visibility-option="*" data-visibility-operator="=" data-visibility-value="*"
element
string 
optional
Contains HTML content that renders the file: views/components/product/elements/*.twig using type.
Example:
number.twig
details
array[object (ProductOptionDetails) {9}] 
optional
Products options details.
attirubtes
string 
optional
The attributes of image option.
Example:
field_1819067185_562106943
disabled
boolean 
optional
The availability of image option.
required
boolean 
optional
Is image option required?
value
string  | null 
optional
The value of image option.

Usage#

The HTML element input is used to show this component with some predefined attributes.

Multiple Options#

This component works similarly to "checkboxes" to allow the user to select one or more options from a set. 

Example#

Multiple Options

Variables#

multiple-options
option
object (ProductOption) 
optional
id
integer 
optional
The id of the product option.
name
string 
optional
Name of product option.
required
boolean 
optional
Is this product option 'required'?
type
enum<string> 
optional
Product option type.
Allowed values:
single-optiondatedatetimetimeimagetexttextareanumbermulti-optionssplittercolorthumbnaildonation
placeholder
string  | null 
optional
Placeholder of product option area.
not_same_day_order 
boolean 
optional
Availabililty for the same day order.
availability_range  
boolean 
optional
Availability of product option range.
from_date_time 
string <date-time> | null 
optional
Starting Date and time of the product option.
Example:
2021-12-21 21:21:21
to_date_time
string <date-time> | null 
optional
Ending date and time of the product option.
Example:
2021-12-21 21:21:21
visibility_condition
object  | null 
optional
Visibility condition objects.
condition_attributes
string 
optional
The condition related attributes
Example:
data-visibility-option="*" data-visibility-operator="=" data-visibility-value="*"
element
string 
optional
Contains HTML content that renders the file: views/components/product/elements/*.twig using type.
Example:
number.twig
details
array[object (ProductOptionDetails) {9}] 
optional
Products options details.
attirubtes
string 
optional
The attributes of multiple-options option.
Example:
id="field_1819067185_562106943"
disabled
boolean 
optional
The availability of multiple-options option.
required
boolean 
optional
Is multiple-options option required?
value
array | null 
optional
The value of multiple-options option.

Usage#

The list of given options to the user can be retrieved and displayed using the for-loop statement through the option object. This list of options includes details such as full_name`.

Number#

This component gives the user the ability to enter numbers, which can be used in many cases, such as entering the required quantity for a product.

Example#

Number

Variables#

number
option
object (ProductOption) 
optional
id
integer 
optional
The id of the product option.
name
string 
optional
Name of product option.
required
boolean 
optional
Is this product option 'required'?
type
enum<string> 
optional
Product option type.
Allowed values:
single-optiondatedatetimetimeimagetexttextareanumbermulti-optionssplittercolorthumbnaildonation
placeholder
string  | null 
optional
Placeholder of product option area.
not_same_day_order 
boolean 
optional
Availabililty for the same day order.
availability_range  
boolean 
optional
Availability of product option range.
from_date_time 
string <date-time> | null 
optional
Starting Date and time of the product option.
Example:
2021-12-21 21:21:21
to_date_time
string <date-time> | null 
optional
Ending date and time of the product option.
Example:
2021-12-21 21:21:21
visibility_condition
object  | null 
optional
Visibility condition objects.
condition_attributes
string 
optional
The condition related attributes
Example:
data-visibility-option="*" data-visibility-operator="=" data-visibility-value="*"
element
string 
optional
Contains HTML content that renders the file: views/components/product/elements/*.twig using type.
Example:
number.twig
details
array[object (ProductOptionDetails) {9}] 
optional
Products options details.
attirubtes
string 
optional
The attributes of number option.
Example:
id="field_{item id}_{option id}
id
string 
optional
field_{item id}_{option id}
disabled
boolean 
optional
The availability of number option.
required
boolean 
optional
Is number option required?
value
string  | null 
optional
The value of number option.

Usage#

The HTML element input is used to show this component with some predefined attributes.

Single Option#

This component shows a list of options where the customer is allowed to select a single option at a time. The list is more compact and can support a longer list of options if needed.

Example#

Single Option

Variables#

single-option
option
object (ProductOption) 
optional
id
integer 
optional
The id of the product option.
name
string 
optional
Name of product option.
required
boolean 
optional
Is this product option 'required'?
type
enum<string> 
optional
Product option type.
Allowed values:
single-optiondatedatetimetimeimagetexttextareanumbermulti-optionssplittercolorthumbnaildonation
placeholder
string  | null 
optional
Placeholder of product option area.
not_same_day_order 
boolean 
optional
Availabililty for the same day order.
availability_range  
boolean 
optional
Availability of product option range.
from_date_time 
string <date-time> | null 
optional
Starting Date and time of the product option.
Example:
2021-12-21 21:21:21
to_date_time
string <date-time> | null 
optional
Ending date and time of the product option.
Example:
2021-12-21 21:21:21
visibility_condition
object  | null 
optional
Visibility condition objects.
condition_attributes
string 
optional
The condition related attributes
Example:
data-visibility-option="*" data-visibility-operator="=" data-visibility-value="*"
element
string 
optional
Contains HTML content that renders the file: views/components/product/elements/*.twig using type.
Example:
number.twig
details
array[object (ProductOptionDetails) {9}] 
optional
Products options details.
attirubtes 
string 
optional
The attributes of single-option option.
Example:
id="field_1819067185_562106943
disabled
boolean 
optional
The avilability of single-option option.
required
boolean 
optional
Is single-option required?
is_for_custom_form
boolean 
optional
Is it for Food or Custom Service product
value
string  | null 
optional
Value of single-option option.

Usage#

The HTML element select is used to show this component with some predefined attributes. Inside this element, a for-loop is used to iterate through the options which contains the list of the given options.

Splitter#

This component defines a thematic break in a product page. It works similarly to the hr HTML tag in order to create a splitter.

Example#

Splitter

Variables#

splitter
option
object (ProductOption) 
optional
id
integer 
optional
The id of the product option.
name
string 
optional
Name of product option.
required
boolean 
optional
Is this product option 'required'?
type
enum<string> 
optional
Product option type.
Allowed values:
single-optiondatedatetimetimeimagetexttextareanumbermulti-optionssplittercolorthumbnaildonation
placeholder
string  | null 
optional
Placeholder of product option area.
not_same_day_order 
boolean 
optional
Availabililty for the same day order.
availability_range  
boolean 
optional
Availability of product option range.
from_date_time 
string <date-time> | null 
optional
Starting Date and time of the product option.
Example:
2021-12-21 21:21:21
to_date_time
string <date-time> | null 
optional
Ending date and time of the product option.
Example:
2021-12-21 21:21:21
visibility_condition
object  | null 
optional
Visibility condition objects.
condition_attributes
string 
optional
The condition related attributes
Example:
data-visibility-option="*" data-visibility-operator="=" data-visibility-value="*"
element
string 
optional
Contains HTML content that renders the file: views/components/product/elements/*.twig using type.
Example:
number.twig
details
array[object (ProductOptionDetails) {9}] 
optional
Products options details.

Usage#

The developer has the ability to create a css class to style a break line. As shown below, we can apply this splitter class to any div element.

Text#

This component allows users to enter text. It can allow a single line and can be used to enter a product name, for example.

Example#

Text

Variables#

text
option
object (ProductOption) 
optional
id
integer 
optional
The id of the product option.
name
string 
optional
Name of product option.
required
boolean 
optional
Is this product option 'required'?
type
enum<string> 
optional
Product option type.
Allowed values:
single-optiondatedatetimetimeimagetexttextareanumbermulti-optionssplittercolorthumbnaildonation
placeholder
string  | null 
optional
Placeholder of product option area.
not_same_day_order 
boolean 
optional
Availabililty for the same day order.
availability_range  
boolean 
optional
Availability of product option range.
from_date_time 
string <date-time> | null 
optional
Starting Date and time of the product option.
Example:
2021-12-21 21:21:21
to_date_time
string <date-time> | null 
optional
Ending date and time of the product option.
Example:
2021-12-21 21:21:21
visibility_condition
object  | null 
optional
Visibility condition objects.
condition_attributes
string 
optional
The condition related attributes
Example:
data-visibility-option="*" data-visibility-operator="=" data-visibility-value="*"
element
string 
optional
Contains HTML content that renders the file: views/components/product/elements/*.twig using type.
Example:
number.twig
details
array[object (ProductOptionDetails) {9}] 
optional
Products options details.
attirubtes
string 
optional
The attributes of text option.
Example:
id="field_1819067185_562106943"
disabled
boolean 
optional
The availability of text option.
required
boolean 
optional
Is text option required.
value
string  | null 
optional
Value of text option.

Usage#

The HTML element input is used to show this component with some predefined attributes. The option object is used to show any detail related to the component, for example, option.placeholder to set a default text as a start.

Textarea#

This component allows users to enter multiple line text. It allows the user to enter multiple lines of text and can be used to enter a note about a product, for example.

Example#

Textarea

Variables#

textarea
option
object (ProductOption) 
optional
id
integer 
optional
The id of the product option.
name
string 
optional
Name of product option.
required
boolean 
optional
Is this product option 'required'?
type
enum<string> 
optional
Product option type.
Allowed values:
single-optiondatedatetimetimeimagetexttextareanumbermulti-optionssplittercolorthumbnaildonation
placeholder
string  | null 
optional
Placeholder of product option area.
not_same_day_order 
boolean 
optional
Availabililty for the same day order.
availability_range  
boolean 
optional
Availability of product option range.
from_date_time 
string <date-time> | null 
optional
Starting Date and time of the product option.
Example:
2021-12-21 21:21:21
to_date_time
string <date-time> | null 
optional
Ending date and time of the product option.
Example:
2021-12-21 21:21:21
visibility_condition
object  | null 
optional
Visibility condition objects.
condition_attributes
string 
optional
The condition related attributes
Example:
data-visibility-option="*" data-visibility-operator="=" data-visibility-value="*"
element
string 
optional
Contains HTML content that renders the file: views/components/product/elements/*.twig using type.
Example:
number.twig
details
array[object (ProductOptionDetails) {9}] 
optional
Products options details.
attirubtes
string 
optional
The attributes of textarea option.
Example:
id="field_1819067185_562106943"
disabled
boolean 
optional
The availability of textarea option.
required
boolean 
optional
Is textarea option required.
value
string  | null 
optional
The value of textarea option.

Usage#

The HTML element input is used to show this component with some predefined attributes. The option object is used to show any detail related to the component, for example, option.placeholder to set a default text as a start.

Thumbnail#

A thumbnail is a small image that represents a larger image when clicked on, and is commonly identified with a border around it. This component can be used to show example images of a product's options.

Example#

Thumbnail

Variables#

thumbnail
option
object (ProductOption) 
optional
id
integer 
optional
The id of the product option.
name
string 
optional
Name of product option.
required
boolean 
optional
Is this product option 'required'?
type
enum<string> 
optional
Product option type.
Allowed values:
single-optiondatedatetimetimeimagetexttextareanumbermulti-optionssplittercolorthumbnaildonation
placeholder
string  | null 
optional
Placeholder of product option area.
not_same_day_order 
boolean 
optional
Availabililty for the same day order.
availability_range  
boolean 
optional
Availability of product option range.
from_date_time 
string <date-time> | null 
optional
Starting Date and time of the product option.
Example:
2021-12-21 21:21:21
to_date_time
string <date-time> | null 
optional
Ending date and time of the product option.
Example:
2021-12-21 21:21:21
visibility_condition
object  | null 
optional
Visibility condition objects.
condition_attributes
string 
optional
The condition related attributes
Example:
data-visibility-option="*" data-visibility-operator="=" data-visibility-value="*"
element
string 
optional
Contains HTML content that renders the file: views/components/product/elements/*.twig using type.
Example:
number.twig
details
array[object (ProductOptionDetails) {9}] 
optional
Products options details.
attirubtes
string 
optional
The attributes of thumbnail option.
Example:
id="field_1819067185_562106943"
disabled
boolean 
optional
The availability of thumbnail option.
required
boolean 
optional
Is thumbnail option required?
value
string  | null 
optional
The value of thumbnail option.

Usage#

The list of given thumbnails for a product's options can be retrieved and displayed using the for-loop statement through the option object. This list of options includes details such as detail.image` to display the thumbnail's image. This component may use the  html input radio element in order to restrict the user to selecting one image, option, at a time.

Time#

This component works as a time picker to allow customers to enter a specific time. It can be used as an input field for the delivery time, as an example.

Example#

Time

Variables#

time
option
object (ProductOption) 
optional
id
integer 
optional
The id of the product option.
name
string 
optional
Name of product option.
required
boolean 
optional
Is this product option 'required'?
type
enum<string> 
optional
Product option type.
Allowed values:
single-optiondatedatetimetimeimagetexttextareanumbermulti-optionssplittercolorthumbnaildonation
placeholder
string  | null 
optional
Placeholder of product option area.
not_same_day_order 
boolean 
optional
Availabililty for the same day order.
availability_range  
boolean 
optional
Availability of product option range.
from_date_time 
string <date-time> | null 
optional
Starting Date and time of the product option.
Example:
2021-12-21 21:21:21
to_date_time
string <date-time> | null 
optional
Ending date and time of the product option.
Example:
2021-12-21 21:21:21
visibility_condition
object  | null 
optional
Visibility condition objects.
condition_attributes
string 
optional
The condition related attributes
Example:
data-visibility-option="*" data-visibility-operator="=" data-visibility-value="*"
element
string 
optional
Contains HTML content that renders the file: views/components/product/elements/*.twig using type.
Example:
number.twig
details
array[object (ProductOptionDetails) {9}] 
optional
Products options details.
attirubtes
string 
optional
The attributes of time option.
Example:
id="field_1819067185_562106943"
disabled
boolean 
optional
The availability of time option.
required
boolean 
optional
Is time option required?
value
string  | null 
optional
The value of time option.

Usage#

The HTML element input is used to show this component with some predefined attributes along with the option object.
Previous
Essentials
Next
Common Components