Below are two basic, sample booking widgets using combinations of C#, HTML, and jQuery.
These illustrate the proper usage of the redirect and booking widgets. The widgets are designed to give developers a guideline when building their own widget.
These samples are provided as is. A hotel and their web developers are free to work with either sample using jQuery, build on them, and/or provide any comments and feedback.
Step 1 – Get the Source Files
Download the Source Files above.
In the zip file is a folder called "js". Inside you will find the following: jquery-ui-1.7.2.custom.css, jquery-1.3.2.min.js, and jquery-ui-1.7.2.custom.min.js.
<link type="text/css" href="css/custom-theme/jquery-ui-1.7.2.custom.css" rel="Stylesheet" /><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
Alternatively, these files can be downloaded from www.jqueryui.com and then must uploaded to the hotel’s website into appropriate directories. The jQuery Theme Roller (http://jqueryui.com/themeroller/) can also be used to customize the appearance of the datepicker widget. jquery-ui-1.7.2.custom.css is the cascading style sheet which controls the look and feel of the mini-calendars which appear when a visitor clicks in the arrival or departure fields. The files jquery-1.3.2.min.js and jquery-ui-1.7.2.custom.min.js control the actions of the mini-calendars. These should only be modified by those experienced in JavaScript.
Step 2 – Gather Source Files and Source Code
Once these files have been uploaded, the following three lines of code need to be added between the <head> and </head> tags of any page which contains the booking widget.
<link type="text/css" href="css/custom-theme/jquery-ui-1.7.2.custom.css" rel="Stylesheet" /><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
It does not matter where in the code these three lines are located within the <head> and </head> tags. What is important is that the path names be changed to reflect where the files were placed on the hotel web space.
Step 3 – Place Booking Widget on Page
Next the actual booking widget code needs to be placed on the page. The code for the booking widget is found near the bottom of the source code and can also be found below. You’ll notice that the “arrival” class name of the arrival date input field is what jQuery references to call the datepicker calendar. The code below does not include a departure date (blue highlight) but if you would like to add one, you can do so using the same format of the arrivalDate input changing the name (departureDate) and class (departure).
The code below renders the booking widget exactly as pictured in the above screen shot. If you would like to format it so that it is a horizontal widget, you may do so using HTML tables or divs.
Please note: this sample widget uses the PH&R Redirect to link to the Guest Connect booking engine. If you would like to use a direct link, you will have to update the input names and the form action using the information available in the Guest Connect Linking Tool in the SynXis CRS.
<script type="text/javascript" language="javascript"> $(document).ready(function(){ $(".arrival").datepicker(); $(".departure").datepicker(); }); </script><form action="https://www.phgsecure.com/IBE/bookingRedirect.ashx" method="get" name="sampleHTMLWidget"> <input type="hidden" name="propertyCode" value="BCTS4" /> <strong>Arrival Date:</strong> <input type="text" name="arrivalDate" class="arrival" /><br /> <strong>Number of Nights: </strong> <select name="numberOfNights"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select><br /> <strong>Adults: </strong> <select name="numberOfAdults"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select><br /> <strong>Children: </strong> <select name="numberOfChildren"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select><br /> <strong>Promo Code:</strong> <input type="text" name="rateCode" /><br /> <strong>Group Code:</strong> <input type="text" name="group" /><br /> <input type="submit" name="submit" value="Check Availability" /> </form>
Most of this code does not need to be modified in any way unless modification is desired. There is, however, one important item that needs to be changed so the booking widget passes the data entered from the visitor to the hotels booking engine.
<input type="hidden" name="propertyCode" value="BCTS4" />
The highlighted area of BCTS4 is the property code. If you do not have your PH&R member code, please contact your Revenue Account Manager for details.