The Option Selector feature, along with its sub-features, lets you customise how product options and tour commentary languages are presented. With various settings, you can create a highly tailored layout. While the default states provide a standard display, we recommend using all sub-features together when changes to ensure optimal customisation.
Option Selector Feature List
The Option Selector feature contains several sub-features. Add the below piece of code to your Ventrata checkout by doing one of two things:
To be able to customise the ways options are displayed follow this syntax:
the
optionSelectorfeature is placed in thefeaturesobjectall of its sub-features are then recorded under the
optionSelectorobject
Update Data-Config Attribute - by adding the below piece of code in the data-config attribute of your checkout script, see the Implementation Guide for more information.
"features": {
"optionSelector": {
"preselectFirstOption": true / false, (default: true)
"placement": "above-tickets" / "separate-step", (default: "separate-step")
"type": "expandable" / "fixed" (default: "fixed")
}
}
📒 NOTE
Simply adding the feature in the data-config enables the input on all products in the checkout. We recommend limiting this feature to specific products by specifying the product ID in the data-config attribute.
Add feature to Script or Button - add the feature to your data-config for script or button in the following format:
<script src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" type="module" data-config='{"apiKey":"<YOUR_API_TOKEN>", "features":{"optionSelector": {"preselectFirstOption": true, "placement": "above-tickets", "type": "expandable" }}}'></script>
📒 NOTE
Option Selector changes will not be displayed if an option ID is specified in the data-config as an option has already been selected.
The Option Selector feature supports the following sub-features:
Sub-feature | Default | Available Values | Description |
|
|
| when enabled, if the product contains multiple options, the first one in the list is preselected |
|
|
| by default, options are selected in a separate step, i.e. page; when options are placed above the tickets, options are selected on the same page as tickets and tour dates |
|
|
| the default fixed setting manifests on both placements by displaying all of the available options; the expandable type can be used with above-tickets only, where options are collapsed and only the selected option is visible |
Option Selector Flow
The customer selects a product. Based on the settings in the Option Selector, the following scenarios may occur:
Default Settings
The tour commentary languages and options are on a separate page. The tour commentary is collapsed and all available product options are listed on the page.
📗 TIP
All of the default settings are standard option selection behaviours and therefore do not need to be stated in the data-config.
Default Settings
Non-Standard Feature Settings
You can use variations of the settings:
The tour commentary languages and all available product options are listed on the Tickets page, above the ticket selection. The first option in the list is preselected.
Sub-Feature | Setting |
|
|
|
|
|
|
Preselect Option, Above Tickets, Fixed
The tour commentary languages and all available product options are listed on the Tickets page, above the ticket selection. No option is preselected.
Sub-Feature | Setting |
|
|
|
|
|
|
Preselect False, Above Tickets, Fixed
The tour commentary languages and all available product options are listed on the Tickets page, above the ticket selection. The first option is preselected, while other available options remain collapsed. To view and select different options, toggle the currently selected one.
Sub-Feature | Setting |
|
|
|
|
|
|
Preselect Option, Above Tickets, Expandable
Unintended Application
If a product ID is not specified in the data-config, the Option Selector settings are applied to all products, even those without options. To avoid unwanted application of these settings, make sure to include the product ID of specific product(s).
Default Settings (left) & Above-Ticket, Expandable (right)