Product editor

This widget allows travelers to select a date and number of passengers for an product. When loading the product editor will look up the available dates for the product. This prevents the travelers from selecting unavailable dates and times.

There are two types of product editors: fixed and inline each with their own presentation and placement behavior. The fixed type is the original and default variant of the editor. inline is a new variant that is intended to be used inside your own page layout.

Attributes

Attribute	Description	Required
`product-id`	The id of the product to load.	Yes
`type`	The type of widget (e.g. fixed or inline)	No
`room-id`	For accommodation only. Which room to show price for.	No

Example

<blend-product-editor product-id="542" type="fixed"></blend-product-editor>

Demo

Query Parameters

`bw-ticket`

`activeModal`

Controls which modal is shown and can be used to open the product editor in expanded mode.

Examples:

?bw-activeModal=product-editor

`bw-date`

Controls the selected date and time of the product editor. If the date contains a time matching an product 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 product 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 product editor traveler group. If not set no children are used as default.

Examples:

?bw-childrenAges=5%2C10
?bw-childrenAges=

`bw-showProductEditor`

When this query parameter is set to true the product editor will be shown in expanded mode.

Examples:

?bw-showProductEditor=true
?bw-showProductEditor=false

Custom styling

There is some freedom in customizing how the product editor looks. Through these variables certain properties can be altered:

General

Name	Description
`--bw-product-editor-background-color`	The product editor’s background color
`--bw-product-editor-color`	The color of the text in the product editor. This does not apply to buttons, input fields and other interactive elements, nor text inside dialogs
`--bw-product-editor-lg-border-radius`	The top left and top right border radius on larger (wider than or equal to 758px) screens
`--bw-product-editor-sm-border-radius`	The top left and top right border radius on smaller (narrower than 758px) screens

Main action button

Name	Description
`--bw-product-editor-button-background-color`	Background color
`--bw-product-editor-button-color`	Text color
`--bw-product-editor-button-border-color`	Border color

Input fields

Name	Description
`--bw-product-editor-input-label-color`	Label text color
`--bw-product-editor-input-color`	Input field text color
`--bw-product-editor-input-border`	The color of the input fields’ borders
`--bw-product-editor-input-background-color`	Input field background color

Inline

Demo

Example

<blend-product-editor product-id="542" type="inline"></blend-product-editor>