Home

The Mandala Booking Engine
Martin Senne - 02 September 2017
Fetches data from a third-party API to display hotel room availablilty and rate information alongside static website content

Functionality

PHP HTML JavaScript

Status Complete

Customer Alliance API
Martin Senne - 26 August 2017
Fetches data from a third-party API to display hotel rating statistics

SEO Functionality

PHP HTML5

Status Complete

CSS Framework
Martin Senne - 26 August 2017
A custom CSS framework for The Mandala Hotel and The Mandala Suites

Web-Design

LESS CSS

Status In Progress

What does it do?

Fetches data from an API provided by Synxis, the hotel’s central reservation system, according to information input by the user (arrival date, departure date, number of guests)
Assigns this data to static room information on the site to display real-time pricing and availablilty information.

Why is this useful?

Previous iterations of the site’s booking engine were not technially a part of the hotel website. A guest’s travel information was collected on the hotel website, then passed along to a user interface provided by Synxis. This page can still be viewed here
The new version of the Mandala Booking Engine adds live pricing information to already exisiting content (room information, images, etc); the user does not have to leave the site to perform a reservation

How it works

This module is executed when a user accesses the page “Rooms & Prices” on the site or enters a desired stay date into the booking widget and clicks on “Book A Room”.

A call is made to the Synxis API with this information. The API returns an array which contains sub-arrays with more detailed information:

An array of the available rooms
An array of all available rates
An array of all prices per rate and room type

The array of available rates is parsed and the matching rate categories are combined: Basically, rates that have the same restrictions and benefits, with the only difference being if breakfast is included or not, are combined into one “Promotion Box” (The orange-colored content boxes right underneath the booking widget). The currently selected promotion is highlighted.

Based on the currently selected promotion, the array of available rooms is compared to all room categories saved in the website’s CMS. On the front-end, each a list of all rooms is generated and each category gets assigned a price value from the array of prices per room and category.

If a room is unavailable, it is marked as auch and moved to the bottom of the list

The lowest available rate and room category are auto-selected when a user first opens the page; this means, he or she will always see the best available price/room for the selected time period.

Technical Stuff

Challenges

The Mandala Rate

The Mandala Rate is the hotel’s primary promotional rate and is set to be up to 20% lower than any other rate available on the Internet or elsewhere. Because it is set up us a promotional rate, it needs what is called a promotional code in order to be bookable. When using the user interface provided by Synxis, this is not a problem, as the code can be passed along as an URL parameter (?code=ABC123). When grabbing rate information via the SOAP API, the option to also the grab promotional rates is not (yet?) available.

This means, the “Mandala Rate” Promotional Box has to be created manually. This is done by taking the value for the hotel’s standard rate (called ‘Best Available Rate’ (BAR)), calculating the discount (20%) for each room type, and adding this information to the array of available rooms and prices.

This however, creates problems:

As the discounted prices are calculated manually, they are not flexible. Changing the discount to, say 15% in seasons where demand is high, is not easily done
This also means that the Mandala Rate is heavily tied to the BAR: If the BAR is not available, the Mandala Rate will also not be available

Actually making a reservation

The system as it is set up now, only displays rate information. It does not provide a means to actually make a reservation. This still needs to be done via the user interface provided by Synxis.

The easiest solution to this would be to redirect the user to Synxis upon clicking on a “Book now” link. This isn’t ideal for several reasons:

The user would again leave the site to conclude the booking process
Synxis requires the user to again select a room and a rate type; something he/she has already done in a previous step.

Solution

The solution to this is to include the final steps of the booking process via iFrames. The user can finish the booking using the interface provided by Synxis without apparently leaving the site.

The look of the interface in Synxis can be customised to certain degree, so we can make adjust it to match colors and fonts used on the main site. Upon clicking on a “Book now” link, a booking confirmation window slides into view which loads the iframe containing the last step of the booking process. How this process works is easier when looking at the src-tag for the iframe we are about to load:

https://gc.synxis.com/rez.aspx?Hotel=12435&template=desktop&shell=confirmation&start=availresults&adult=1&child=0&childages=12&arrive=09/03/2017&depart=09/04/2017&rate=BAR&lang=1&promo=TMC2016&room=1CS

Let’s break it down:

https://gc.synxis.com/rez.aspx - Location of the Synxis Booking Engine
Hotel - ID of the hotel we want to booking-form
template - The template specifies which configuration options for the engine to use. Can be changes in the Synxis backend
shell - This is were we can customise the design of the booking engine with HTML, CSS and JavaScript
start - What step of the booking process should be shown first. We chose here to skip the date selection (we selected our dates previously), and go directly to the step were we can choose a rate and a room
adult, child, childages - Number of adults, children and their ages.
arrive, depart - Arrival and departure dates
rate - The rate code of the selected rate
lang - The language code; selects which language the booking engine will be displayed in (1 = English)
promo - When a valid promotion code is supplied, this will unlock the corresponding rates in the booking engine
room - When a code is specified, this will only show the corresponding room in the booking engine

The parameters rate and room are the important ones here.

If we provide a room code, we can make sure that the Synxis booking engine only shows the exact room type the user wants to book. We also know which rate he wants to book but the user will still have to click on it in order to bring up the booking confirmation page. Not good.

We can use a little JavaScript to help us here. In the markup of the Synxis booking engine, each rate is contained in a DIV that has a data-attribute with the rate-code in it: data-rate-code="BAR" for example. We can now write a little script that emulates a click on the “I will reserve” button in that div, as if the user had done it himself. The script could look something like this:

// Checks if the variable 'rate' has been set, then constructs the selector we need to search for using jQuery
  if (rate) {
    rate =  "*[data-rate-code="+"\""+rate+"\""+"]";
  }

// Using jQuery here, because it comes pre-installed with Synxis and makes targeting the right selector much easier...
  $(rate).find('.SelectProductBtn').click();

// Where:
- 'rate' is the rate the user selected. Can be acquired from URL parameter or from a variable available in Synxis itself
- .SelectProductBtn is the class of the button that the need to emulate the click on

Welcome

to my site

Welcome

to my site

Technology