The Offer Comparator Component

Description

The Offer Comparator shall give the user the opportunity to compare different offers of packages. So it is possible to add up to three offers to a view that lets you compare different aspects of the offer such as the amount of nights and the board type.

Screenshots

Comparison table of the offers.

Variant with count of offers.

Meta

Maintainer berlin-team-futurama@lists.tui.de
Locales en-GB, de-DE, de-CH, de-AT, 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/offer-comparator/" 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-offer-comparator tenant="VALUE"></tui-offer-comparator>

Read more about using components ›

Attributes

This component can be configured with the following attributes:

Name Description Allowed Values Default Required
variant

This allows you to configure which variant of the component shall be shown. Defaults to the actual component that displays a table for the comparison. The 'counter' variant is the button that displays the amount of hotel offers to compare and can be configured to jump to the comparison table

 counter no
openInNewTab

This allows you to configure, wether a click on the button, which displays the price of the hottel offer shall be opened in a new tab or not.

 false no
priceType

This allows the configuration of the displayed price wether it shall be displayed per Person or as total.

 per_person, total total no
showCategory

This allows you to configure wether the category (suns) of a hotel shall be displayed or not.

 true no
showHeart

This allows you to configure wether a button with a heart and the text 'Remember' shall be displayed or not.

 true no
showTravellersSection

This allows you to configure wether the section for the travellers shall be displayed or not.

 true no
storageCapacity

This allows you to configure the amount of hotel offers that can be configured. This applies to the 'counter' variant and sets the maximum size to add hotel offers.

 3 no
storageKey

This allows you to configure a unique key to where the hotel offers shall be saved in the memory. Defaults to 'default'

 default no
tenant

The Peakwork player for this set.

 TUICOM, TUICH, TUIAT yes

Events

Event instance.initialized
Type publish
Description

It signals, that the component has been loaded
Payload none
Event instance.rendered
Type publish
Description

It signals, that the component has been rendered
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents the data of the event
Type object
Schema { "type": "object", "properties": { "comparisonItems": { "type": "array", "description": "Contains objects with the hotel offers and the search parameters." }, "setHearts": { "type": "object", "description": "Defines a function as a callback to set the values for the hearts of this component.", "arguments": { "hearts": { "type": "array", "description": "Defines the list of giataIds", "items": { "type": "object", "properties": { "giataId": { "type": "number" } } } } }, "returnValue": { "type": "null" } }, "setCallToActionUrls": { "type": "object", "description": "Defines a function as a callback to set the urls for the call to action buttons.", "arguments": { "hearts": { "type": "array", "description": "Defines the list of giataIds", "items": { "type": "object", "properties": { "giataId": { "type": "number" } } } } }, "returnValue": { "type": "null" } } } }
Event heart.touched
Type publish
Description

It signals, that a heart button has been touched.
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents the data of the event
Type object
Schema { "type": "object", "properties": { "filled": { "type": "boolean", "description": "Defines the state of the touched heart." }, "hotelOffer": { "type": "object", "description": "Contains the object with the hotel offer" }, "searchParameters": { "type": "object", "description": "Contains the data of the search parameters" } } }
Event trash.pushed
Type publish
Description

It signals, that a trash button has been pushed.
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents the data of the event
Type object
Schema { "type": "object", "properties": { "hotelOffer": { "type": "object", "description": "Contains the object with the hotel offer" }, "searchParameters": { "type": "object", "description": "Contains the data of the search parameters" } } }
Event callToAction.pushed
Type publish
Description

It signals, that a callToAction button has been pushed.
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents the data of the event
Type object
Schema { "type": "object", "properties": { "hotelOffer": { "type": "object", "description": "Contains the object with the hotel offer" }, "searchParameters": { "type": "object", "description": "Contains the data of the search parameters" } } }
Event counter.pushed
Type publish
Description

It signals, that the counter instance has been pushed.
Payload none
Event searches.updated
Type publish
Description

It signals, that the searches had been updated and are ready to display.
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents the data of the event
Type object
Schema { "type": "object", "properties": { "hotelOffer": { "type": "object", "description": "Contains the object with the hotel offer" }, "searchParameters": { "type": "object", "description": "Contains the data of the search parameters" } } }
Event searches.add
Type subscribe
Description

It signals, that a search shall be added to the comparator
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents the data of the event
Type object
Schema { "type": "object", "properties": { "parameters": { "type": "number", "description": "Current amount of searches in the comparator" } } }
Event searches.override
Type subscribe
Description

It signals, that one or more searches will override all saved searches in the comparator
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents the data of the event
Type object
Schema { "type": "object", "properties": { "parameters": { "type": "array", "description": "List of searches for the comparator" } } }
Event searches.remove
Type subscribe
Description

It signals, that a search shall be removed from the comparator
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents the data of the event
Type object
Schema { "type": "object", "properties": { "parameters": { "type": "number", "description": "Current amount of searches in the comparator" } } }
Event hearts.updated
Type subscribe
Description

It signals, that a heart has been clicked
Payload

The payload object of this event has the following properties:

Name Event data
Description

It represents the data of the event
Type object
Schema { "type": "object", "properties": { "hearts": { "type": "array", "description": "Current amount of searches in the comparator" } } }