The Hotel Offer Cards 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

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-offer-cards/ui/hotel-offer-cards.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-offer-cards tenant="VALUE"></tui-hotel-offer-cards>

Attributes

This component can be configured with the following attributes:

Name	Description	Allowed Values	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
`showBoardType`	Controls whether the board type of the offer 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 `'total'`.	`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
`staticUrlParameters`	It is used to add static parameters to destination url, eg. tracking parameters.		no
`checkboxLabel`	Controls whether to show a checkbox and which text the checkbox will show as label.		no
`variant`	Controls how the offers will be displayed. Default value is `default`.		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" ] }

The Hotel Offer Cards Component

Description

Screenshots

Meta

Usage

Attributes

Events