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

Several variants of the hotel cards, configured with the card-type attribute.

More variants (card types).

Even more variants! We’ve got a whole lot of them.

Meta

Maintainer picr-developmentb2c-tuicom@tui.com
Locales en-US, de-AT, de-CH, de-DE, fr-CH, it-IT

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-cards/ui/hotel-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.

<div class="tui-component tui-component-tui-hotel-cards"
	data-tenancy="VALUE"
	data-search-scope="VALUE">
</div>

ATTENTION: This is a legacy component. The tag name must be set as class name (as in the example above), and attributes must be prefixed with data-.

Read more about using components ›

Attributes

This component can be configured with the following attributes:

Name Description Allowed Values Default Required
tenancy

The Peakwork player for this set.

 TUICOM, TUICH, TUIAT yes
search-scope

The type of product to be searched.

 hotel, package yes
lang

To configure shown languages.

 de_AT, de_CH, de_DE, en_GB, fr_CH, it_IT no
card-type

The display variant.

 card, short-list-card, small-slider, opposite-search-scope-image-left, opposite-search-scope-comparison, opposite-search-scope-simple, blog, blog-up-down-selling, customize, stretched, medium card no
static-url-parameters

Static parameters to the destination URL, e.g. for tracking.

 no
open-in-new-tab

Determines if the link will open a new tab instead of staying in the same one.

 true, false no
metasearcher-name

Name of the metasearcher.

 tripadvisor, trivago tripadvisor no
metasearcher-price

Set the price provided from the metasearcher, instead of the one loaded from the backend. Only applicable for the opposite-search-scope-comparison variant.

 true, false no
filter-giata-codes

A comma-separated list of GIATA IDs to whitelist hotels.

 ^[0-9]+(,\s?[0-9]+)*$ no
filter-min-price

Set the minimum total price for all travellers.

 no
filter-max-price

Set the maximum total price for all travellers.

 no
filter-category

Set the minimum hotel category to search for.

 no
filter-count

Set the number of results to show.

 3 no
filter-average-rating

Sets the minimum rating of the hotels to search for.

 no
filter-recommendation-total

Sets the minimum recommendation of the hotels to search for.

 no
filter-board-types

Comma separated string of BoardCodeTypes as EDF or GlobalType. Used to filter the offers

 no
filter-room-types

Comma separated string of RoomCodeTypes as EDF or GlobalType. Used to filter the offers

 no
filter-global-types

Comma separated string of Global Types. Used to filter the offers

 no
search-duration

Comma separated string of lengths of stay. Used to filter the offers

 no
search-departure-date

Earliest departure date. Used to filter the offers

 no
search-return-date

Latest return date. Used to filter the offers

 no
search-travel-month

Name of the month of the departure date, it will overwrite departure and return date. It is used to filter the offers.

 no
search-departure-airport-codes

Comma separated string of IATA codes. It is used to filter the offers.

 no
search-arrival-airport-codes

Comma separated string of IATA codes. It is used to filter the offers.

 no
search-airline-codes

Comma separated string of two letter IATA airline codes. It is used to filter the offers.

 no
search-country-codes

Comma separated string of two-letter country codes. It is used to filter the offers.

 no
search-region

Region search string. It is used to filter the offers.

 no
search-region-codes

Comma separated region ids. It is used to filter the offers.

 no
search-adults

Comma separated string of numbers of adults per room. It is used to filter the offers.

 no
search-childs

Comma separated string of ages of children per room, semicolon separates the ages of children in a room. It is used to filter the offers.

 no
search-sort-by

Criterion for sorting order. It is used to filter the offers.

 PRICE_ASC, PRICE_DESC, CATEGORY_ASC, CATEGORY_DESC, HOTEL_RATING, ALPHABETICAL no
search-group-id

Comma separated string of geo node ids. It is used to filter the offers.

 no
price-type

Set which price should be shown.

 TOTAL, PER_PERSON card no
currency-format

Set currency format to show the price.

 germanFormat, spanishFormat germanFormat no
toggle-gallery

Set to true if you want to show the images gallery.

 true, false false no
toggle-slider

Set to true if you want to show the cards slider.

 true, false false no
toggle-discount

Set to true if you want to show the discount price.

 true, false false no
toggle-heart

Set to false if you want to hide a clickable heart.

 true, false true no
toggle-sun

Set to false if you want to hide the suns.

 true, false true no
category-icon-type

Set the icon for the hotel category.

 star suns no
toggle-rating

Set to false if you want to hide the rating section.

 true, false true no
toggle-room-type

Set to false if you want to hide the room-type.

 true, false true no
toggle-board-type

Set to false if you want to hide the board-type.

 true, false true no
toggle-shortlist-image

Toggles out the image.

 true, false true no
toggle-shortlist-heading

Toggles out the heading.

 true, false true no
toggle-shortlist-hotelname

Toggles out the hotel name.

 true, false true no
toggle-eye-catcher

Set to true if you want to see an eye catcher.

 true, false false no
toggle-campaign

Set to false if you do not want to show the campaign banner.

 true, false true no
eye-catcher-type

Set the type of the eye catcher style.

 important, primary, secondary, default primary no
eye-catcher-discount

Set the per person discount amount for the eye catcher.

 no
teaser-text

Set the text to display.

 no
content-only

Set to true the product cache is not asked for prices and vacancies thus data is only shown from the content store.

 true, false false no
cta-urls

Sets the call to action urls instead of throwing an event to get them. Requires data-filter-giata-codes to be set.

 no
price-button-type

Sets the type (background color) of the price button. If it is not set, each card has its own default value.

 no
button-label

Sets the name of the button.

 no
toggle-wildcard

Toggles out the wildcard.

 true, false false no
wildcard-position

Set the position for the wildcard.

 0 no
show-brand

Choose if chain brand should be displayed.

 no
slider-type

Choose which type of sliding should be used.

 grid-slider, native no

Events

Event hotel-cards.Get link targets.
Type publish
Description

It signals the wish to get links to be used in the hotel cards.
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents data of event.
Type object
Schema { "type": "object", "properties": { "iid": { "type": "string", "description": "Identifies the hotel card element." }, "values": { "type": "array", "description": "Containing objects with giata and url." } } }
Event hotel-cards.Register new scope.
Type publish
Description

It signals the wish to register a new scope. It is used when you want to modify or load the cards using the 'Load cards configuration' event.
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents data of event.
Type object
Schema { "type": "object", "properties": { "scope": { "type": "string", "description": "New scope." } } }
Event hotel-cards.Load cards configuration.
Type publish
Description

It signals the wish to load hotel cards or to update existing card using a configuration object.
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents data of event.
Type object
Schema { "type": "object", "properties": { "lang": { "type": "string", "description": "Lang for new card." }, "toggleDiscount": { "type": "string", "description": "True for show discount price." } } }
Event hotel-cards.Someone touched my heart.
Type publish
Description

This event takes an object containing a giataId and signals the wish to remember that specific giataId.
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents data of event.
Type object
Schema { "type": "object", "properties": { "giataId": { "type": "string", "description": "GiataId which need remember." } } }
Event hotel-cards.Someone broke my heart.
Type publish
Description

This event takes an object containing a giataId and signals the wish NOT to remember anymore that specific giataId.
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents data of event.
Type object
Schema { "type": "object", "properties": { "giataId": { "type": "string", "description": "GiataId which don't need to remember." } } }
Event hotel-cards.Hotelcards are rendered.
Type subscribe
Description

This event signals when a card has been rendered.
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents data of event.
Type object
Schema { "type": "object", "properties": { "scope": { "type": "array", "description": "Corresponding to the scopes of the card that has been rendered." }, "count": { "type": "string", "description": "Number of hotels that have been rendered." } } }
Event hotel-cards.Someone pushed my button.
Type subscribe
Description

This event signals that a button in the hotel cards has been pushed.
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents data of event.
Type object
Schema { "type": "object", "properties": { "scope": { "hotels": "array", "description": "Rendered hotels containing all the info related to the hotels." }, "searchParameter": { "type": "object", "description": "Containing the search parameter." }, "props": { "type": "object", "description": "Containing the property openInNewTab set in the custom attribute data-open-in-new-tab." } } }
Event hotel-cards.Build URLS
Type subscribe
Description

It allows mojo to create a link for each hotel.
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents data of event.
Type object
Schema { "type": "object", "properties": { "instanceId": { "type": "string", "description": "That identifies the hotel card element." }, "hotels": { "type": "array", "description": "Rendered hotels containing all the info related to the hotels." }, "searchParameter": { "type": "object", "description": "Containing the search parameter." } } }
Event hotel-cards.I am falling in love with someone else.
Type subscribe
Description

It provides an object containing a list of giataIds and signals which giataIds are currently marked as remembered.
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents data of event.
Type object
Schema { "type": "object", "properties": { "giataId": { "type": "string", "description": "GiataId which need remember." } } }