Activity Editor (Deprecated)
This widget allows travelers to select a date and number of passengers for an activity. When loading the activity editor will look up the available dates for the activity. This prevents the travelers from selecting unavailable dates and times.
Attributes
| Attribute | Description | Required |
|---|---|---|
product-id | The id of the product to load. | Yes |
sales-channel-id | The id of the sales channel to load. | Yes |
Example
<blend-activity-editor product-id="542" sales-channel-id="1"></blend-activity-editor>
Demo
Query Parameters
The query parameters can be used to set default values to the widget on page load. All query parameters are optional and will be modified as the traveler is using the widgets.
bw-showActivityEditor
When this query parameter is set to true the activity editor will be shown in expanded mode.
Examples:
?bw-showActivityEditor=true?bw-showActivityEditor=false
bw-date
Controls the selected date and time of the activity editor. If the date contains a time matching an activity instance the time will be selected as well. Otherwise only the date will be selected, and the editor will default to the first available time.
Examples:
?bw-date=2022-11-11T20%3A00%3A00.000%2B01%3A00?bw-date=2022-11-11
bw-adults
Controls the number of adults for the activity editor traveler group.
If not set 1 adult is used as default.
Examples:
?bw-adults=2?bw-adults=0
bw-childrenAges
Controls the number and ages of children for the activity editor traveler group. If not set no children are used as default.
Examples:
?bw-childrenAges=5%2C10?bw-childrenAges=
Custom styling
There is some freedom in customizing how the activity editor looks. Through these variables certain properties can be altered:
General
| Name | Description |
|---|---|
--bw-activity-editor-background-color | The activity editor’s background color |
--bw-activity-editor-color | The color of the text in the activity editor. This does not apply to buttons, input fields and other interactive elements, nor text inside dialogs |
--bw-activity-editor-lg-border-radius | The top left and top right border radius on larger (wider than or equal to 758px) screens |
--bw-activity-editor-sm-border-radius | The top left and top right border radius on smaller (narrower than 758px) screens |
Main action button
| Name | Description |
|---|---|
--bw-activity-editor-button-background-color | Background color |
--bw-activity-editor-button-color | Text color |
--bw-activity-editor-button-border-color | Border color |
Input fields
| Name | Description |
|---|---|
--bw-activity-editor-input-label-color | Label text color |
--bw-activity-editor-input-color | Input field text color |
--bw-activity-editor-input-border | The color of the input fields’ borders |
--bw-activity-editor-input-background-color | Input field background color |