hotel-offers
Component displaying hotel offers. Source could be from latest search stored in local storage. Or ML call with a list of giataIds.
Hotel Offers component displays hotel cards as offers.
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/hotel-offers/current/hotel-offers.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-ao-hotel-offers
giata-ids="VALUE"
hotel-id="VALUE"
locale="VALUE"
market="VALUE"
show-price-per-night="VALUE">
</tui-ao-hotel-offers>Examples
Basic example
<tui-ao-hotel-offers
hotel-id="94325"
market="se"
locale="sv-SE"
category-icon="tui">
</tui-ao-hotel-offers>
Attributes
This microfrontend accepts the following attributes:
| Name | Description | Values | Default | Required |
|---|---|---|---|---|
category-icon | Icon that should be used for TUI rating | star, sun, tui | no | |
giata-ids | Hotel id to be used within UI | 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 | Locale to be used within UI | at, be, ch, de, dk, fc, fi, ie, nl, no, se, uk | yes | |
mode | Cards view mode | COMPACT, DEFAULT | no | |
price-format | Show total price or price per person | pricePerPerson, totalPrice | no | |
show-price-per-night | Show price per night as an A/B test | yes | ||
theme | Theme to be used within UI | firstchoice, tui-light | no | |
use-swipe | Toggle between swipe | no |
Events
This microfrontend emits the following events:
| Event | Schema |
|---|---|
Emitted when component initialization is finished. | |
Emitted when component encountered an error. | |