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

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

Variables

color

option

object (ProductOption)

optional

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

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

Variables

datatime

option

object (ProductOption)

optional

Detailed structure of the product option model object showing its fields and data types.

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', allowing certain choices or attributes to be shown or hidden based on specific criteria.

Allowed values:

alwayson_condition

visibility_condition_type

enum<string>

required

Product option visiblity condition type

Allowed values:

><=!=

visibility_condition_option

integer | null

required

Product option visiblity

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

Variables

donation

option

object (ProductOption)

optional

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 condition or state of availability of a particular item within a product catalog or inventory.

Allowed values:

hiddensaleout

product_type

enum<string>

required

Product type classifies items by shared attributes or characteristics, streamlining inventory organization and improving search and categorization efficiency.

Allowed values:

productservicegroup_productscodesdigitalfooddonatingbooking

quantity

number

required

The numerical 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.

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

Variables

image

option

object (ProductOption)

optional

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

Variables

multiple-options

option

object (ProductOption)

optional

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

Variables

number

option

object (ProductOption)

optional

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}

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

Variables

single-option

option

object (ProductOption)

optional

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

Variables

splitter

option

object (ProductOption)

optional

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

Variables

text

option

object (ProductOption)

optional

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

Variables

textarea

option

object (ProductOption)

optional

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

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

Variables

thumbnail

option

object (ProductOption)

optional

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

Variables

time

option

object (ProductOption)

optional

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.

Color#

Example#

Variables#

Usage#

Date#

Example#

Variables#

Usage#

Datetime#

Example#

Variables#

Usage#

Donation#

Example#

Variables#

Usage#

Image#

Example#

Variables#

Usage#

Multiple Options#

Example#

Variables#

Usage#

Number#

Example#

Variables#

Usage#

Single Option#

Example#

Variables#

Usage#

Splitter#

Example#

Variables#

Usage#

Text#

Example#

Variables#

Usage#

Textarea#

Example#

Variables#

Usage#

Thumbnail#

Example#

Variables#

Usage#

Time#

Example#

Variables#

Usage#

Color

Example

Variables

Usage

Date

Example

Variables

Usage

Datetime

Example

Variables

Usage

Donation

Example

Variables

Usage

Image

Example

Variables

Usage

Multiple Options

Example

Variables

Usage

Number

Example

Variables

Usage

Single Option

Example

Variables

Usage

Splitter

Example

Variables

Usage

Text

Example

Variables

Usage

Textarea

Example

Variables

Usage

Thumbnail

Example

Variables

Usage

Time

Example

Variables

Usage