FlightSearchResults

Displays search results as a series of flight cards that display the relevant flight information on them (times, flight duration, luggage details, price, etc). Also includes an alernative flights bar and sorting bar that allows user to sort flight cards by cheapest or fastest.

FlightSearchResults

Screenshots

Flight Search Results. Basic example of departure and return flight with default parameters in EN.

Flight Search Results. Example of departure and return flight with detailed view in EN.

Flight Search Results. Example of departure flight for other airlines 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-results/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.

<tfm-search-results-ui></tfm-search-results-ui>

Examples

• Central Region Example

  <tfm-search-results-ui
  	locale="de-DE"
  	scope="*"
  	currency="EUR"
  	tenant="cr"
  	theme="tui-light"
  	market="de"
  	eurorate="1"
  	initial-sort="price-asc"
  	environment="production">
  </tfm-search-results-ui>

• Western Region Segment View Example

  <tfm-search-results-ui
  	locale="nl-BE"
  	scope="*"
  	currency="EUR"
  	tenant="wr"
  	theme="tui-light"
  	market="be"
  	eurorate="1"
  	initial-sort="price-asc"
  	environment="production"
  	segmentview="true">
  </tfm-search-results-ui>

• Moroccan Example

  <tfm-search-results-ui
  	locale="en-GB"
  	scope="*"
  	currency="MAD"
  	tenant="wr"
  	theme="tui-light"
  	market="MA"
  	eurorate="11"
  	initial-sort="price-asc"
  	environment="production">
  </tfm-search-results-ui>

Attributes

This microfrontend accepts the following attributes: