HamburgerHamburger Icon

Option Group

Option Group

SIZE 

<OptionGroup options={{
  "name": "Size",
  "values": [
    "Small",
    "Medium",
    "Large"
  ]
}} />
Copy
Option Group Properties

Name

Description

Type

Required

Default

options

Options info.

object

true

options sub properties

Name

Description

Type

Required

Default

name

Option name.

string

true

values

Option values.

array

true

activeIndex

0 based index of active option.

number

false

0

variants

List of variant data for options.

array

false

[]

activeVariant

Variant info for active option.

object

false

{}

activeVariant sub properties

Name

Description

Type

Required

Default

id

Variant ID.

string

false

title

Variant title.

string

false

setActiveVariant

Event handler when option is selected.

function

false

()=>{}

setActiveParams

Event handlers when option URL parameter is updated.

object

false

{"quantity":null,"size":null,"firmness":null,"color":null,"value":null}

setActiveParams sub properties

Name

Description

Type

Required

Default

quantity

Quantity event handler.

function

false

null

size

Size event handler.

function

false

null

firmness

Firmness event handler.

function

false

null

color

Color event handler.

function

false

null

value

Value event handler.

function

false

null

oosQty

Minimum quantity to determine if option is out of stock.

number

false

null

noInventory

True if option is from a product that carries no inventory (i.e. gift card)

boolean

false

false

summary

Option summary display text.

string

false

null

hideOptions

List of options that will be hidden.

array

false

[]