rooms-panel
This is a MFE that contains a panel that shows all rooms and offer combinations for a hotel that the customer can buy
TUI AO MFE Template
Screenshots
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/rooms-panel/current/rooms-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-rooms-panel
ab-test-show-updated-design="VALUE"
hotel-id="VALUE"
locale="VALUE"
market="VALUE"
show-price-per-night="VALUE"
show-room-filters="VALUE">
</tui-rooms-panel>
Examples
Basic example
<tui-rooms-panel
hotel-id="94325"
market="se"
locale="sv-SE"
category-icon="tui">
</tui-rooms-panel>
Attributes
This microfrontend accepts the following attributes:
Name | Description | Values | Default | Required |
---|---|---|---|---|
ab-test-show-updated-design | Show updated design (A/B test) | yes | ||
hotel-id | Hotel id to be used within UI | yes | ||
locale | Locale to be used within UI | da-DK , de-AT , de-CH , de-DE , en-GB , en-IE , fi-FI , fr-BE , fr-CH , nb-NO , nl-BE , nl-NL , sv-SE | yes | |
market | Market to which API calls would be sent | at , be , ch , de , dk , fi , ie , nl , no , se , uk | yes | |
price-format | Price format. Valid values 'totalPrice' and 'pricePerPerson' | pricePerPerson , totalPrice | no | |
show-price-per-night | Show price per night as an A/B test | yes | ||
show-room-filters | Show Room filters section(A/B test) | yes | ||
theme | Theme to be used within UI | firstchoice , tui-light | no |
Events
This microfrontend emits the following events:
Event | Schema |
---|---|
Emitted when component initialization is finished. |
|
Emitted when component encountered an error. |
|
Emitted when room offer has been selected. |
|
Emitted when room offer has been selected. |
|
Emitted when room offer has been selected. |
|
Emitted when room offer has been selected. |
|
Emitted when there are no offers to be displayed. |
|
Emitted when user entered without params |
|
Monitoring logs that would be send to DataDog. |
|