FlightOfferList

Displays a list of flight offers with origin, destination, departure date, return date, price and a link to show all prices. A sun animation is shown whilst the component is loading.

This MFE component shows a list of flights consisting of the origin, destination and a price in different languages and currencies. The length and content of the list is customizable.

There are 2 ways to implement this MFE. Standard Pre-rendered

Screenshots

Flight Offe List. Basic example with default parameters in EN.

Flight Offe List. Tui light theme loading animation.

Flight Offe List. Example with promo list enabled in EN.

Flight Offe List. Promo list airport selection in EN.

Flight Offe List. Promo list loading animation.

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-offer-list/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-offer-list
	locale="VALUE"
	market="VALUE"
	theme="VALUE">
</tui-flight-offer-list>

Examples

Example for tuifly.be

<tui-flight-offer-list
	origin="BE"
	locale="nl-BE"
	market="BE"
	limit="30"
	currency="EUR"
	scope="*"
	tenant="tuifly"
	link="https://www.tuifly.be/#language#/last-minute/#departureSlug#/#destinationSlug#"
	carrier="TB"
	is-fallback-hidden="true"
	show-origin-select="true"
	euro-rate="1"
	triptype="oneway"
	theme="tui-light">
</tui-flight-offer-list>

Specific route example - Hannover to Palma de Mallorca

<tui-flight-offer-list
	origin="HAJ"
	destination="PMI"
	locale="nl-BE"
	market="DE"
	limit="30"
	currency="EUR"
	scope="*"
	tenant="tuifly"
	link="https://www.tuifly.be/#language#/last-minute/#departureSlug#/#destinationSlug#"
	carrier="TB"
	is-fallback-hidden="true"
	show-origin-select="true"
	euro-rate="1"
	triptype="oneway"
	theme="tui-light">
</tui-flight-offer-list>

Attributes

This microfrontend accepts the following attributes:

Name	Description	Values	Required
`origin`	Add an IATA code(s) or/and the 2 letter ISO code for the country. It's possible to add multiple divided by a ,		no
`destination`	Add an IATA code(s) or/and the 2 letter ISO code for the country. It's possible to add multiple divided by a ,		no
`start`	Start of date range for searched flights, e.g. 2021-07-31. Without it shows the cheapest flight within 6 months.		no
`end`	End of date range for searched flights, e.g. 2021-08-15. Without it shows the cheapest flight within 6 months.		no
`locale`	language for localization (e.g. de-DE, en-GB...)	`de-DE`, `en-GB`, `es-ES`, `nl-NL`, `fr-BE`	yes
`market`	market for delivery.	`DE`, `BE`, `MA`, `NL`, `FR`, `UK`, `IE`, `SE`, `DK`, `FI`, `NO`	yes
`limit`	Limit the size of the list, e.g. 5 flights. Default max is 10, depending on the availability.		no
`currency`	currency to display prices (ISO)	`EUR`, `MAD`, `GBP`, `ANG`	no
`groupby`	Groups by destinations or origins to show one result per destination	`destination`, `origin`	no
`carrier`	Filter for flights with the given carrier identifier. E.g. X3		no
`brand`	Flight brand by default all, for UK can be FIRST_CHOICE (FC)		no
`fallback-destinations`	Adds possibility to show unpriced links to these Locations - e.g. PMI,FUE (fixed in middlelayer from FRA,MUC)		no
`is-fallback-hidden`	If set to true, the whole component will be invisible if no flights were found for the given origin and destination attributes.		no
`is-alternative-origin`	If set to true and a single airport is set as the origin, only alternative departure airports will be shown in the list. The origin airport will be not in the list. The alternative departure airports will be in the same country.		no
`is-promo-list`	Changes the layout of the list to promo style.		no
`more-results-for-multiple-destinations`	When there is a request which includes multiple destination airports, but only one record in response -- we will show more results with this airport		no
`show-origin-select`	show a dropdown with origins		no
`triptype`	Adds possibility switch between oneway or rountrip flight offers. Defaults to roundtrip if not set	`roundtrip`, `oneway`	no
`link`	The link pattern where the list will redirect to if a flight from the list is clicked, e.g. https://tui.com/flugbuchungen. You can use the four placeholders.		no
`theme`	Add an theme to component		yes
`dataenv`	Environment to connect to	`prod`, `test`	no