Go - TUI Cars 6M Web Component

Properties

Brand

Locale

Expanded

Airport code

Start date

End date

Number of persons

Flight number

Enable custom driver

Events

Validate

Set drivers

Ventures

Banner

Cancellation notice

Event Log

Clear

About

TUI Cars Go is a cross-selling module that generates and displays a selection of rental cars, based on existing travel data such as location and date. This allows the customer to book a rental car very quickly during his booking process. Stand-alone use is not possible with this component. TUI Cars Go sends its requests directly to the backend system TUI Wheels and receives the vehicle offers, including prizes, pictures, etc. from there. These offers are displayed in a horizontal arrangement from which the customer makes his selection. The selected vehicle will then be handed over to the surrounding website via the cotton-ball event, which in turn will generate a booking in TUI Wheels.

Documentation

This web component based on the principles of TUI 6m concept.

Implementation

Include in <head>

// TUI cottonball
<script src="https://api.tui.com/ml/cotton-ball/" async=""></script>

// TUI icons
<script type="module" src="https://cloud.tui.com/common/ui-elements/master/ui-elements/ui-elements.esm.js" async></script>
<script nomodule src="https://cloud.tui.com/common/ui-elements/master/ui-elements/ui-elements.js" async></script>
<link rel="stylesheet" href="https://cloud.tui.com/common/ui-elements/master/ui-elements/ui-elements.css">

// Web component module and styles
<script type="module" src="https://6m.tuicars.com/build/tuicarsgo.esm.js"></script>
<script nomodule src="https://6m.tuicars.com/build/tuicarsgo.js"></script>
<link rel="stylesheet" href="https://6m.tuicars.com/build/tuicarsgo.css">

Include in <body>

// Web component (minimal implementation)
<tui-cars-go scope="6mtuicars" airport-code="GRO" start-date="2019-11-03T10:00:00" end-date="2019-11-08T10:00:00"></tui-cars-go>

Embed

The component must use full browser screen width on screens smaller or equal than 768 pixel. On screens larger than 768 pixel the used space can be limited.

Properties

Property	Description	Format	Example	Required	Default
scope	The component’s event scope.	String	6mtuicars	yes	-
brand	Key to load theme by tuidesign.	String	tui	no	-
locale*	Language and region to display content for.	ISO 3166 - ISO 639	en-US	no	en-US
expanded	Initially show banner or offer selection.	Boolean	false	no	true
airport-code	Airport code for initial offers request.	IATA	GRO	yes	-
start-date	Start date for initial offers request.	ISO 8601	2019-11-03T10:00:00	yes	-
end-date	End date for initial offers request.	ISO 8601	2019-11-08T10:00:00	yes	-
number-of-persons	Number of persons for initial offers request.	Integer	2	no	4
flight-number	Number of arrival flight without spaces.	String	AB1234	no	-
enable-custom-driver	Enables the user to set a custom driver.	Boolean	true	no	false

* Supported languages: en, de

Events

You can listen to various events via TUI cotton ball. For further information see TUI 6m technical reference.

Subscriptions

Event	Description	Response type	Example
did-load	Event is sent after the component has been loaded.	Object	null
expanded	Indicates whether the component is open or not.	Object	{"expanded": true}
offer-preselected	Indicates whether a offer is selected. Returns offer:true	Object	{"offer": true}
offer-removed	Indicates whether a offer is deselected. Returns offer:true	Object	{"offer": false}
offer-selected	Returns the selected offer. Returns null if offer is deselected.	JSON - SelectedOfferResponse	{"bookingSystem":"TUI_WHEELS","driver":null,"flightNumber":null,"offerId":"2428","price":{"amount":137.78,"currency":"EUR"},"reportSummary":{},"vehicle":{"acriss":"EMMS","manufacturer":"Renault","model":"Clio"}}
start-date-changed	Returns the new start date.	Object	{"startDate": "2020-09-27"}
start-time-changed	Returns the new start time.	Object	{"startTime": "10:15:00"}
end-date-changed	Returns the new end date.	Object	{"endDate": "2020-10-08"}
end-time-changed	Returns the new end time.	Object	{"endTime": "17:45:00"}
flight-number-changed	Returns the new flight number.	Object	{"flightNumber": "AB12345"}
offer-response	Fired when search request is done (minPrice, perDay and currency become null if offer count is 0)	Object	{"count": 21, "minPrice": 918.68, "perDay": 43.75, "currency": "EUR"}
offer-scroll-left	Fired when the user uses the arrow keys to navigate to the left, limit is true when "start" is reached, clicks holds number of clicks accumulated and resets on event	Object	{"limit": false, "clicks": 1}
offer-scroll-right	Fired when the user uses the arrow keys to navigate to the right, limit is true when "end" is reached, clicks holds number of clicks accumulated and resets on event	Object	{"limit": false, "clicks": 1}

Subscribe events

<script>
  // TUI cottonball
  var waitForCottonBall = function(callback) {
    window.setTimeout(function() {
      if (window.tuiCottonBall && typeof(callback) === 'function') {
        callback();
      } else {
        waitForCottonBall(callback);
      }
    }, 50);
  };

  // Event listener
  waitForCottonBall(function() {
    eventsToSubscribe.forEach(function(eventName) {
      // Subscribe 'did-load' event
      window.tuiCottonBall.subscribe('tui-cars-go', '6mtuicars', 'did-load', function(componentName, scope, eventName, payload) {
        // Handle the event
      });
    });
  });
</script>

Publish events

Event

Type

Description

Parameter example

Response example

validate

get

Returns validation information.

{"valid": false, "errors": [{"name":"missingTermsApprovement"}]}

set-drivers

set

Set driver details. All drivers need an identifier, which can be assigned individually (e.g. a). By specifying the identifier, the spelling of the name or birthdate can be adapted afterwards - in this case, pass all corrected data again. To unset drivers pass undefined.

{a: {firstName: 'Gabi', lastName: 'Mustermann', birthDate: '03.01.1990', gender: 'f'}, b: {firstName: 'Michael', lastName: 'Mustermann', birthDate: '01.02.1995', gender: 'm'}}

Publish event example

<script>
  // TUI cottonball
  var waitForCottonBall = function(callback) {
    window.setTimeout(function() {
      if (window.tuiCottonBall && typeof(callback) === 'function') {
        callback();
      } else {
        waitForCottonBall(callback);
      }
    }, 50);
  };

  // Get events
  waitForCottonBall(function() {
    window.tuiCottonBall.publish('tui-cars-go', '6mtuicars', 'validate', { callback: function(payload) {
      // Handle the payload
    }});
  });

  // Set events
  let drivers = {a: {firstName: 'Gabi', lastName: 'Mustermann', birthDate: '03.01.1990', gender: 'f'}, b: {firstName: 'Michael', lastName: 'Mustermann', birthDate: '01.02.1995', gender: 'm'}};

  waitForCottonBall(function() {
    window.tuiCottonBall.publish('tui-cars-go', '6mtuicars', 'set-drivers', drivers);
  });
</script>

Ventures (A/B Tests)

Ventures enable you to display and test various presentations of the component.

Available ventures

Name	Variants
banner	0,1,2
cancellation-notice	0,1

Variant 0 corresponds to the standard view.

Include in <body>

  // Web component (including venture)
  <tui-cars-go scope="6mtuicars" airport-code="GRO" start-date="2019-11-03T10:00:00" end-date="2019-11-08T10:00:00" ventures='[{"name": "banner", "variant": 1}]'></tui-cars-go>

Alternative setting via JavaScript

<script>
document.querySelector('tui-cars-go').ventures = [{
  name: 'banner',
  variant: 1)
}];
</script>