FlightSearchBar

Search bar component that allows you to search for flights through the entering of departure airport, arrival airport, departure date, return date (not required if making one way flight), number of adults, number of children and the ages of those children.

FlightSearchBar

Link

The placeholder you can use in a link:

e.g https://www.tuifly.be/flight/#lang#/search?flyingFrom%5B%5D=#origin#&flyingTo%5B%5D=#destination#&depDate=#depDate#&adults=#adults#&children=#children#&childAge=#childAge#&choiceSearch=true&searchType=pricegrid&nearByAirports=true&currency=EUR

Screenshots

Flight Search Bar. Tui light themed component in EN.

Flight Search Bar. Tui themed departure airport selection in NL.

Flight Search Bar. Tui light themed reduced version component in NL.

Flight Search Bar. Tui light themed departure airport multiselect enabled in EN.

Flight Search Bar. Tui themed departure date selection in EN.

Flight Search Bar. Tui light themed passenger selection with one passenger and three children selected in EN.

Usage

Add the following script tag to your web page to load the microfrontend. Note: This is required only once per webpage, even when you embed multiple instances of the microfrontend.

<script src="https://nonprod.cloud.tui.com/osp/fo/flight-search-bar/master/main.js" defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the microfrontend to show. You can create multiple instances of the microfrontend.

<tui-flight-search-bar
	lang="VALUE"
	link="VALUE"
	oneway="VALUE"
	additionalonewayparameters="VALUE"
	additionalreturnparameters="VALUE"
	market="VALUE"
	dataenv="VALUE"
	currency="VALUE">
</tui-flight-search-bar>

Examples

Blank Search Bar Example

<tui-flight-search-bar
	lang="en-GB"
	link="https://www.tuifly.be/flight/#lang#/search?flyingFrom%5B%5D=#origin#&flyingTo%5B%5D=#destination#&depDate=#depDate#&adults=#adults#&children=#children#&childAge=#childAge#&choiceSearch=true&searchType=pricegrid&nearByAirports=true&currency="
	additionalonewayparameters="&isOneWay=true"
	additionalreturnparameters="&isOneWay=false&returnDate=#retDate#"
	oneway="false"
	theme="tui-light"
	market="BE"
	refactoredversion="true"
	twocalendarsabtest="true"
	multiselect="true">
</tui-flight-search-bar>

Blank Search Bar Example one calendar

<tui-flight-search-bar
	lang="en-GB"
	link="https://www.tuifly.be/flight/#lang#/search?flyingFrom%5B%5D=#origin#&flyingTo%5B%5D=#destination#&depDate=#depDate#&adults=#adults#&children=#children#&childAge=#childAge#&choiceSearch=true&searchType=pricegrid&nearByAirports=true&currency="
	additionalonewayparameters="&isOneWay=true"
	additionalreturnparameters="&isOneWay=false&returnDate=#retDate#"
	oneway="false"
	theme="tui-light"
	market="BE"
	refactoredversion="false"
	multiselect="false">
</tui-flight-search-bar>

Pre-filled Search Bar Example

<tui-flight-search-bar
	lang="en-GB"
	link="https://www.tuifly.be/flight/#lang#/search?flyingFrom%5B%5D=#origin#&flyingTo%5B%5D=#destination#&depDate=#depDate#&adults=#adults#&children=#children#&childAge=#childAge#&choiceSearch=true&searchType=pricegrid&nearByAirports=true&currency="
	additionalonewayparameters="&isOneWay=true"
	additionalreturnparameters="&isOneWay=false&returnDate=#retDate#"
	oneway="false"
	theme="tui-light"
	market="BE"
	origin="BRU"
	destination="PMI"
	depdate="2022-11-15"
	retdate="2022-11-22"
	adults="2"
	childs="3,5,6"
	refactoredversion="true"
	twocalendarsabtest="true"
	multiselect="true">
</tui-flight-search-bar>

MMB Change Type Outbound Example

<tui-flight-search-bar
	lang="en-GB"
	link="https://www.tuifly.be/flight/#lang#/search?flyingFrom%5B%5D=#origin#&flyingTo%5B%5D=#destination#&depDate=#depDate#&adults=#adults#&children=#children#&childAge=#childAge#&choiceSearch=true&searchType=pricegrid&nearByAirports=true&currency="
	additionalonewayparameters="&isOneWay=true"
	additionalreturnparameters="&isOneWay=false&returnDate=#retDate#"
	oneway="false"
	theme="tui-light"
	market="BE"
	origin="CRL"
	destination="ALC"
	depdate="2022-11-21"
	retdate="2022-11-28"
	adults="1"
	childs="6,7"
	changetype="outbound"
	refactoredversion="true"
	multiselect="true">
</tui-flight-search-bar>

MMB Change Type All (Outbound and Inbound) Example

<tui-flight-search-bar
	lang="en-GB"
	link="https://www.tuifly.be/flight/#lang#/search?flyingFrom%5B%5D=#origin#&flyingTo%5B%5D=#destination#&depDate=#depDate#&adults=#adults#&children=#children#&childAge=#childAge#&choiceSearch=true&searchType=pricegrid&nearByAirports=true&currency="
	additionalonewayparameters="&isOneWay=true"
	additionalreturnparameters="&isOneWay=false&returnDate=#retDate#"
	oneway="false"
	theme="tui-light"
	market="BE"
	origin="CRL"
	destination="ALC"
	depdate="2022-11-22"
	retdate="2022-11-29"
	adults="3"
	childs="7,9,3"
	changetype="outbound"
	refactoredversion="true"
	multiselect="true">
</tui-flight-search-bar>

Reduced View Example

<tui-flight-search-bar
	lang="en-GB"
	link="https://www.tuifly.be/flight/#lang#/search?flyingFrom%5B%5D=#origin#&flyingTo%5B%5D=#destination#&depDate=#depDate#&adults=#adults#&children=#children#&childAge=#childAge#&choiceSearch=true&searchType=pricegrid&nearByAirports=true&currency="
	additionalonewayparameters="&isOneWay=true"
	additionalreturnparameters="&isOneWay=false&returnDate=#retDate#"
	oneway="false"
	theme="tui-light"
	market="BE"
	origin="CRL"
	destination="ALC"
	depdate="2022-11-21"
	retdate="2022-11-28"
	adults="1"
	childs="6,7"
	reducedview="true"
	refactoredversion="true"
	multiselect="true">
</tui-flight-search-bar>

Compact View Example

<tui-flight-search-bar
	lang="en-GB"
	link="https://www.tuifly.be/flight/#lang#/search?flyingFrom%5B%5D=#origin#&flyingTo%5B%5D=#destination#&depDate=#depDate#&adults=#adults#&children=#children#&childAge=#childAge#&choiceSearch=true&searchType=pricegrid&nearByAirports=true&currency="
	additionalonewayparameters="&isOneWay=true"
	additionalreturnparameters="&isOneWay=false&returnDate=#retDate#"
	oneway="false"
	theme="tui-light"
	market="BE"
	origin="CRL"
	destination="ALC"
	depdate="2022-11-22"
	retdate="2022-11-29"
	adults="3"
	childs="7,9,3"
	changetype="outbound"
	compactview="true"
	refactoredversion="true"
	multiselect="true">
</tui-flight-search-bar>

Attributes

This microfrontend accepts the following attributes:

Name	Description	Values	Required
`origin`	Add the IATA Code of the airport here if you want to prefill the origin		no
`destination`	Add the IATA Code of the airport here if you want to prefill the destination		no
`adults`	number of adults for preselection		no
`childs`	comma separated list of childages. e.g. 2,5 for 2 childs with age 2 and 5		no
`depdate`	departure date in format YYYY-MM-DD	`^\d{4}-\d{2}-\d{2}$`	no
`retdate`	return date in format YYYY-MM-DD	`^\d{4}-\d{2}-\d{2}$`	no
`lang`	language for localization (e.g. de-DE, en-GB...)	`de-DE`, `en-GB`, `es-ES`, `nl-NL`, `fr-BE`	yes
`link`	link to the search results page with placeholders		yes
`oneway`	true indicates a one way flight selection whereas false indicates a return flight selection		yes
`additionalonewayparameters`	set oneway parameters (e.g. &isOneWay=true)		yes
`additionalreturnparameters`	set return parameters with placeholder (e.g. &isOneWay=false&returnDate=#retDate#)		yes
`theme`	theme for UI styling (e.g. TUI)	`tui-light`, `tui`, `ltur`	no
`market`	set the market (e.g. BE)	`NL`, `BE`, `FR`, `MA`, `AT`, `DE`, `CH`	yes
`dataenv`	underlying data environment	`sit`, `preprod`, `prod`	yes
`compactview`	show a folded version of the searchbar (used for search result page)		no
`showb2b`	if exists shows b2b behavour. This attribute does not get listned to it can only be set before first render.		no
`showv2sit`	if exists shows V2 SIT behavour. This attribute can only be set before first render.		no
`reducedview`	displays reduced version of searchbar without departure date and destination date for last-minute pages		no
`currency`	currency. currently only used as link placeholder.	`EUR`, `MAD`	yes
`changetype`	disable certain inputs depending on the changetype e.g. inbound disables outbound and pax inputs	`outbound`, `inbound`, `all`	no
`crossmarket`	include flights from other markets as well (search button will lead to other market site)		no
`multiselect`	Enable multiselectable airports		no
`nonearbyformultiselect`	A/B test attribute. Manipulates nearByAirport parameter in the redirect-link. If set to 'true' and a user selects multiple airports it changes nearbyAirport to false in the redirect-link		no
`upsellbutton`	A/B test attribute. Shows Flug + Hotels button along with the search button		no
`twocalendarsabtest`	A/B test attribute. Show two calendars		no

Events

This microfrontend emits the following events:

Event	Schema
`openmfe.analytics` Indicates that the search button was clicked.	`type: object properties: id: type: string description: tui-flight-search-bar. pattern: ^[a-z0-9]+$ name: type: string description: search button`
`openmfe.analytics` Indicates that the edit search button was clicked.	`type: object properties: id: type: string description: tui-flight-search-bar. pattern: ^[a-z0-9]+$ name: type: string description: edit search`
`openmfe.analytics` Indicates that the flight type was selected.	`type: object properties: id: type: string description: tui-flight-search-bar. pattern: ^[a-z0-9]+$ name: type: string description: flight type data: eventLabel: type: string description: One Way \| Return`
`openmfe.analytics` Indicates that the flight departure date was selected.	`type: object properties: id: type: string description: tui-flight-search-bar. pattern: ^[a-z0-9]+$ name: type: string description: departure date data: eventLabel: type: string description: the departure date`
`openmfe.analytics` Indicates that the flight returning date was selected.	`type: object properties: id: type: string description: tui-flight-search-bar. pattern: ^[a-z0-9]+$ name: type: string description: returning date data: eventLabel: type: string description: the returning date`
`openmfe.analytics` Indicates that the passengers were selected.	`type: object properties: id: type: string description: tui-flight-search-bar. pattern: ^[a-z0-9]+$ name: type: string description: passengers data: eventLabel: type: string description: the passangers selected divided in adults, children and infants`
`openmfe.analytics` Indicates that search form was reseted.	`type: object properties: id: type: string description: tui-flight-search-bar. pattern: ^[a-z0-9]+$ name: type: string description: clear search data: eventLabel: type: string description: reset`
`openmfe.analytics` Indicates that a country was selected	`type: object properties: id: type: string description: tui-flight-search-bar. pattern: ^[a-z0-9]+$ name: type: string data: eventLabel: type: string description: the country`
`openmfe.analytics` Indicates that an airport was selected	`type: object properties: id: type: string description: tui-flight-search-bar. pattern: ^[a-z0-9]+$ name: type: string description: departure airport \| arrival airport data: eventLabel: type: string description: airport code searchType: type: string description: text search \| field click typedSearch: type: string description: the text searched`
`openmfe.analytics` Indicates that an airport was deselected	`type: object properties: id: type: string description: tui-flight-search-bar. pattern: ^[a-z0-9]+$ name: type: string description: departure airport \| arrival airport data: eventLabel: type: string description: airport code`
`openmfe.analytics` Indicates that an user error was shown	`type: object properties: id: type: string description: tui-flight-search-bar. pattern: ^[a-z0-9]+$ name: type: string description: error data: eventLabel: type: string description: description of the error`
`openmfe.analytics` Indicates that a field was cleared	`type: object properties: id: type: string description: tui-flight-search-bar. pattern: ^[a-z0-9]+$ name: type: string description: the name of the field cleared data: eventLabel: type: string description: clear`