The hotel best offer Component

Description

The Hotel Cards component shows a set of hotel or package (i.e. hotel + flight) teasers, each containing an image, the hotel’s title and some additional information such as the price, hotel stars or a customer rating.

Screenshots

This is the default variant

This is the rounded variant

This is the compact rounded variant

Meta

Maintainer berlin-team-futurama@lists.tui.de
Locales de-DE, de-AT, de-CH, fr-CH

Usage

Add the following script tag (or something similar) to your web page to have the component load. Note: This is required only once per webpage, even when you embed multiple instances of the component.

<script src="https://api.tui.com/ml/hotel-best-offer/ui/hotel-best-offer.js" async defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the component to show. You can create multiple instances of the component. Remember to replace VALUE with actual valid values for the given attribute.

<tui-hotel-best-offer tenant="VALUE"></tui-hotel-best-offer>

Read more about using components ›

Attributes

This component can be configured with the following attributes:

Name Description Allowed Values Default Required
tenant

The tenant of the offers to retrieve.

 yes
locale

Controls the localization for the offers. Default value is de-DE.

 no
showBanderole

Controls whether the banderole for the hotel will be shown. Default value is true.

 no
showBrand

Controls whether the brand of the hotel will be shown. Default value is true.

 no
showCategory

Controls whether the category of the hotel will be shown. Default value is true.

 no
showHeart

Controls whether the heart for the hotel will be shown. Default value is true.

 no
showImageCarousel

Controls whether a carousel of the hotel images or just single image will be shown. Default value is false.

 no
showPriceAdvantage

Controls whether the price advantage of the offer will be shown. Default value is true.

 no
priceType

Controls the type of price to be displayed for the offer. Default value is &#39;total&#39;.

 total, per_person no
showRecommendation

Controls whether the recommendation of the hotel will be shown. Default value is true.

 no
showStructuredData

Controls whether the structured data will be rendered. Default value is false.

 no
openInNewTab

Controls whether the call to action url is opened in new browser tab. Default value is false.

 no
variant

Controls how the offers will be displayed. Default value is default.

 no
showCancellation

Controls whether the cancellation date for the hotel will be shown. Default value is true.

 no

Events

Event instance.initialized
Type publish
Description

Triggers when the instance is initialized.
Payload

The payload object of this event has the following properties:

Name setSearch
Description

Callback function to inform the instance about the search to be performed.
Type object
Event instance.rendered
Type publish
Description

Triggers when the instance is rendered with hotel offers.
Payload

The payload object of this event has the following properties:

Name hotelOffers
Description

The array of rendered hotel offers.
Type array
Name setBanderoles
Description

Callback function to inform the instance about the banderoles configuration.
Type object
Schema { "type": "object", "properties": { "iconUrl": { "type": "string", "description": "The Url of the icon to show." }, "label": { "type": "string", "description": "The label to show on the banderole." }, "description": { "type": "string", "description": "A description, which will be shown as mouseover tooltext." }, "background": { "type": "string", "description": "The color of the background." }, "fontColor": { "type": "string", "description": "The color of the font." } }, "required": [ "iconUrl" ] }
Name setCallToActionUrls
Description

Callback function to inform the instance about the call to action urls.
Type object
Name setHearts
Description

Callback function to inform the instance about the hearts configuration.
Type object
Event heart.touched
Type publish
Description

Triggers when the heart of a hotel offer was touched.
Payload

The payload object of this event has the following properties:

Name filled
Description

Indicates the desired state of the heart, filled or hollow.
Type boolean
Name hotelOffer
Description

The hotel offer for which the heart was touched.
Type object
Event callToAction.pushed
Type publish
Description

Triggers when the call to action button of a hotel offer was pushed.
Payload

The payload object of this event has the following properties:

Name hotelOffer
Description

The hotel offer for which the call to action button was pushed.
Type object
Event search.updated
Type subscribe
Description

Informs the component about the search to be performed.
Payload

The payload object of this event has the following properties:

Name parameters
Description

The search parameters to use to perform the search.
Type object
Event hearts.updated
Type subscribe
Description

Informs the component about the hearts configuration.
Payload

The payload object of this event has the following properties:

Name hearts
Description

The list of hotels for which the heart is filled..
Type object
Schema { "type": "object", "properties": { "giataId": { "type": "integer", "title": "The giataId of the hotel." } }, "required": [ "giataId" ] }