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

AttributeDescriptionRequired
product-idThe id of the product to load.Yes
typeThe type of widget (e.g. fixed or inline)No
room-idFor accommodation only. Which room to show price for.No

Example

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

Demo

Custom styling

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

General

NameDescription
--bw-product-editor-background-colorThe product editor’s background color
--bw-product-editor-colorThe 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-radiusThe top left and top right border radius on larger (wider than or equal to 758px) screens
--bw-product-editor-sm-border-radiusThe top left and top right border radius on smaller (narrower than 758px) screens

Main action button

NameDescription
--bw-product-editor-button-background-colorBackground color
--bw-product-editor-button-colorText color
--bw-product-editor-button-border-colorBorder color

Input fields

NameDescription
--bw-product-editor-input-label-colorLabel text color
--bw-product-editor-input-colorInput field text color
--bw-product-editor-input-borderThe color of the input fields’ borders
--bw-product-editor-input-background-colorInput field background color

Inline

Demo

Example

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