The Rooms Panel Component

Description

How to integrate the rooms panel on your website

First, if you want to load the rooms panel component through cotton-ball, you need to load the cotton-ball as following:

<script type="text/javascript" src="https://api.tui.com/ml/cotton-ball/"></script>

Then you need to load the rooms panel component:

<div class="tui-component tui-component-rooms-panel"></div>

Example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Rooms Panel</title>
        <script type="text/javascript" src="https://api.tui.com/ml/cotton-ball/"></script>
    </head>

    <body>
        <div
            class="tui-component tui-component-rooms-panel"
            data-tenancy="TUICOM"
            data-price-format="de"
        ></div>
    </body>
</html>

Screenshots

Variants of the Rooms Panel.

Meta

Maintainer picr-developmentb2c-tuicom@tui.com
Locales de-DE, en-GB

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/rooms-panel/ui/" 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-rooms-panel"
	data-lang="VALUE"
	data-tenancy="VALUE"
	data-event-scope="VALUE"
	data-price-format="VALUE"
	data-giata-id="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
lang

Set one of the following language.

 de_DE, en_GB de_DE yes
tenancy

The Peakwork player for this set.

 TUICOM TUICOM yes
event-scope

All events the rooms panel fires itself will carry this scope. In addition if you want to fire events to a specific rooms panel you can use its event scope.

 yes
price-format

Set the initial value for the price format.

 de, ch yes
selection-type

To configure the view to select one or multiple rooms. If not set default is: single

 single, multiple single no
giata-id

To configure which rooms are shown in the rooms panel and are available for the hotel.

 yes
search-scope

To configure the travel type.

 PACKAGE, HOTEL HOTEL no
price-type

To configure the price types.

 TOTAL, PER_PERSON PER_PERSON no
show-price

To configure the view of the price.

 true, false true no
show-image

To configure if image should be shown or not.

 true, false true no
filter-rooms-without-image

To filter the rooms with no images.

 true, false false no
show-global-types

To configure if global types should be shown or not.

 true, false true no

Events

Event rooms-panel.was found in the DOM while bootstrapping.
Type publish
Description

Is thrown for every rooms panel div the app finds in the DOM while bootstrapping.
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": { "element": { "type": "object", "description": "The element found while bootstrapping." }, "shallAutostart": { "type": "boolean", "description": "Whether or not the found rooms panel shall be rendered automatically." }, "isRendered": { "type": "boolean", "description": "Flag of render." } } }
Event rooms-panel.wants to be cuddled.
Type publish
Description

Is thrown with global event scope * to inform the integrating environment, that the rooms panel app was load itself (the JavaScript was successfully load) and registered its global listeners.
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": {} }
Event rooms-panel.Here are some room offers without pictures.
Type publish
Description

Is thrown when filterRoomsWithoutImage is set to true and there are only offers without images.
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": { "rooms": { "type": "array", "description": "Alternate view with no images." } } }
Event rooms-panel.render element
Type subscribe
Description

Will render the given element as an actual rooms panel.
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": "Language" }, "priceType": { "type": "string", "description": "TODO" }, "giataId": { "type": "number", "description": "GiataId" }, "searchScope": { "type": "string", "description": "TODO" }, "rooms": { "type": "array", "description": "Array of rooms." }, "globalSearch": { "type": "string", "description": "The currently existing search model to be handed through the component." }, "eventScope": { "type": "string", "description": "TODO" }, "element": { "type": "object", "description": "The dom node to render the panel in." } } }
Event rooms-panel.hit me baby one more time.
Type subscribe
Description

Will trigger the bootstrapping again.
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": "Language" }, "priceType": { "type": "string", "description": "TODO" }, "giataId": { "type": "number", "description": "GiataId" }, "searchScope": { "type": "string", "description": "TODO" }, "rooms": { "type": "array", "description": "Array of rooms." }, "globalSearch": { "type": "string", "description": "The currently existing search model to be handed through the component." }, "eventScope": { "type": "string", "description": "TODO" }, "element": { "type": "object", "description": "The dom node to render the panel in." } } }