Back to Example List

Set up for the below examples:

  1. Import the cp.min.js script
  2. Set up the hotel config (see below)
  3. Call TTRender.initeComponents(ttwebHotel)

IP Address detection and CSS loading is handled by the script

        var ttwebHotel = new TTWebHotel(TTWebHotel.Rreztrip, {
          hotelId: 'NYCSTW', //'NYCREF',
          portalId: 'stewarthotelnyc',
          defaultTimezone: 'America/New_York',
          defaultCurrency: 'USD',
          defaultLocale: 'en',
          defaultNumAdults: 2,
          defaultNumChildren: 1,
          // rootPath: 'https://rt3api-prd-ase.ttaws.com', // OPTIONAL set the rt3api root - change to this value for asia servers.
          // localeFileRoot: 'http://localhost:8333/locales/', // OPTIONAL set the root for locale loading
          // cssFileRoot: 'http://localhost:8333/css/', // OPTION sel the root for CSS loading
          // Optional override locales with specific content: TBD specific structure is in flux!
          // localeOverrides: {
          //   'conversion-plus': {
          //       guaranteed_price: 'Web-Exclusive Special Offer',
          //       sample_rate_selected: "Best Price for {{- arrivalDate}} through {{- departureDate}}"
          //   }
          // }
       })

       TTRender.initComponents(ttwebHotel);
    

TODO: document all options for all components

Booking Widget & Activation button

First, Set up the booking widget (or other booking calendar tool as it becomes available) and add a button to activate the widget

    <div ttweb-component="BookingWidget" data-tt-show-rates="true"></div>
    <div ttweb-component="BookingWidgetButton">Generic Open-Calendar Button</div>
  
Generic Open-Calendar Button



CrossOutRateContainer

Show's rate and optionally rate-errors for the global search. Can supply specific error text.

Rate Unavailable (Default Text)

Can also set specific search attributes, e.g. a cross-out rate for room BX1:




Booking Button

Booking button for the current search (opens reztrip link), with optional overrides e.g. room selection

Execute Search Booking Button for room 1-BR Suite BX1



Room

Enhanced Room Data

My Room Name AK

Book Now

Some CMS-generated content

My Room Name GR1

Book Now

Some CMS-generated content

Full Room

{{ room.size }}
{{ room.guest_size_max}}
{% if room.ada_room %}{% t 'rooms.accessible' %}{% endif %}
{{ room.bed_arrangement }}
{{ room.room_category }}
{{ room.view }}
{{ room.short_description }}
{{ room.description }}
  • {{ amenity.name }}
Book Room
{% include components/slider id=sliderId %}



Conversion Plus

Fallback Content
can include html

With Offer

Special offer for direct booking



BRG Banner

BRG and Conversion Plus are similar, except BRG is limited to "tonight" only and doesn't update when a user searches. It also doesn't have a CTA button.




Offer

When setting up an offer component, the main functionality is just marking the first-child component root with class names reflecting availability. However, within an offer component you can specify sub-components that are tied to the root offer component without needing to providate data-tt-rate-code on each item. This also performs faster than specifying a separate component e.g. ttweb-component="BookingButton"

[some image]
An assortment of pastries, yogurt, and fruit on a counter along the right wall of the lounge.

Advanced Purchase Offer11

Dynamic Offer Title

Cross-Out
Try other dates?

Buy in advance and get a better rate

Buy in advance and get a better rate

Terms and conditions
Book Now

Offer Calendar for PGARD

{% include components/slider id=sliderId %}
oops

Offer Banner Example

Special Rate for Advanced Purchase

Book Now

Dynamic Offer List

View Offer