nordic-search-panel

Search Panel component allows user to input search criteria and sync it with query parameters. User can control which fields are visible in the component.

Search Panel component allows user to input search criteria and sync it with query parameters. To get the production version of the script simply remove nonprod. in the example below.

Screenshots

AO Search Panel

AO Search Panel mobile view

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/ao/ui/nordic-search-panel/current/nordic-search-panel.esm.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-nordic-search-panel
	locale="VALUE"
	market="VALUE">
</tui-nordic-search-panel>

Examples

Basic example

<tui-nordic-search-panel
	locale="sv-SE"
	panels-to-show="date, pax, destination">
</tui-nordic-search-panel>

Integrated example without icon bar.

<tui-nordic-search-panel
	locale="sv-SE"
	panels-to-show="date, pax, destination"
	integrated="true"
	base-url="https://www.tui.co.uk">
</tui-nordic-search-panel>

Attributes

This microfrontend accepts the following attributes:

Name	Description	Values	Required
`ab-test-show-minimized-panel`	Displays the minimized version of the search panel		no
`base-url`	Override windows.location.origin with a custom base url		no
`exclude-locale`	Exclude locale in integrated mode		no
`google-location`	A Google location object		no
`integrated`	Integrated renders without icon bar and redirects to search page without integration layer		no
`locale`	Locale to be used within UI	`da-DK`, `en-GB`, `en-IE`, `fi-FI`, `nb-NO`, `sv-SE`	yes
`market`	Market to be used	`at`, `be`, `ch`, `de`, `dk`, `fc`, `fi`, `ie`, `nl`, `no`, `se`, `uk`	yes
`panels-to-show`	Which panel parts should be shown		no
`show-search-icons`	It renders the search panel icons		no
`theme`	Theme to be used within UI	`firstchoice`, `tui-light`	no
`tracking-id`	The id to be used for click event tracking		no
`use-tui-geo-search`	Use TUI Geo Search		no

Events

This microfrontend emits the following events:

Event Schema

Event	Schema
`tui.nordic-search-panel.initialized` Emitted when component initialization is finished.	`type: object`
`tui.nordic-search-panel.search-update` Updates searchData parameters in the internal state of the MFE.	`type: object required: - startDate - endDate - numberOfNights - passengers - destinations properties: startDate: type: string endDate: type: string numberOfNights: type: number passengers: type: string destinations: type: string`

tui.nordic-search-panel.initialized

Emitted when component initialization is finished.

type: object

tui.nordic-search-panel.search-update

Updates searchData parameters in the internal state of the MFE.

type: object
required:
  - startDate
  - endDate
  - numberOfNights
  - passengers
  - destinations
properties:
  startDate:
    type: string
  endDate:
    type: string
  numberOfNights:
    type: number
  passengers:
    type: string
  destinations:
    type: string