search
Micro Frontend displaying dynamic accommodation only search results with filter and sorting possibilities.
The search component displays search results.
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/search/current/search.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-search
ab-test-board-type-on-image="VALUE"
ab-test-mobile-hotel-card="VALUE"
ab-test-show-category-image-first="VALUE"
ab-test-show-distance="VALUE"
locale="VALUE"
market="VALUE">
</tui-search>Examples
Basic example
<tui-search
market="se"
locale="sv-SE"
category-icon="star"
price-format="price">
</tui-search>
Attributes
This microfrontend accepts the following attributes:
| Name | Description | Values | Default | Required |
|---|---|---|---|---|
ab-test-board-type-on-image | Show board type on image and remove this information from the offer ACCOONLY-4423 | yes | ||
ab-test-csp-couple | Instructs NGS to do initial sorting of accommodations based on CSP 'couple' scores A/B test ACCOONLY-5303 | no | ||
ab-test-csp-family | Instructs NGS to do initial sorting of accommodations based on CSP 'family' scores A/B test ACCOONLY-5303 | no | ||
ab-test-csp-other | Instructs NGS to do initial sorting of accommodations based on CSP 'single' scores A/B test ACCOONLY-5303 | no | ||
ab-test-csp-plus-recommended | Instructs NGS to do initial sorting of accommodations based on CSP 'bookings' scores with a fallback to four-stars-first A/B test ACCOONLY-5303 | no | ||
ab-test-csp-single | Instructs NGS to do initial sorting of accommodations based on CSP 'single' scores A/B test ACCOONLY-5303 | no | ||
ab-test-mobile-hotel-card | Show smaller hotel card on mob devices ACCOONLY-4369 | yes | ||
ab-test-show-category-image-first | Should hotel card display pool image first if that filter is selected. | yes | ||
ab-test-show-distance | Should hotel card display distance information | yes | ||
ab-test-show-mini-map | Hide desktop searchmap and show map in the modal A/b test ACCOONLY-7487 | no | ||
ab-test-show-themed-filters | Show themed filters on search result page ACCOONLY-4012 | no | ||
category-icon | Icon that should be used for TUI rating | star, sun, tui | no | |
filter-alignment | Filter view alignment | horizontal, vertical | no | |
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, fc, fi, ie, nl, no, se, uk | yes | |
mode | Cards view mode | compact, default | no | |
price-format | Should component display total price or price per person | pricePerPerson, totalPrice | no | |
show-descriptive-rating | Should hotel card display descriptive rating | no | ||
show-distance-filter | Should show distance filter | no | ||
show-to-top-scrolling | Should component display a button for scrolling to top | no | ||
theme | The theme to be used internally | firstchoice, tui-light | no | |
tracking-id | The id to be used for click tracking | no |
Events
This microfrontend emits the following events:
| Event | Schema |
|---|---|
Clear all applyed filters | |
Indicates that the url needs to be updated | |
String for filters has been updated | |
The viewport for the map needs to be updated | |
When a search started | |
When a search result is recived | |
Notification that destination field should be in focus | |
Notifcation that calander should be in focus | |
Tells host page to set localstorage data | |
Emitted when datalayer should be updated. | |