Difference between revisions of "How to Add the Booking Engine Search Widget in Your Website"

Revision as of 17:39, 5 September 2019

Introduction

TODO: Say that we have a widget. What is a widget. What does it do. What is the advantage.

Hoteliga team provides the tools to your web developer to integrate a widget into your existing website.

A widget is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates (and room types in Advanced setup) without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to IBE and continue from this point.

With this widget searching becomes way faster, since we avoid redirection to IBE's home page and choosing dates and room type from the beginning.

Basic Setup

Implementing of the widget is separated into 3 parts.

- First, place the following code in your html file

<div class="hoteligaForm">
    <label for="from">From</label>
    <input type="text" id="from" name="from" />
    <label for="to">to</label>
    <input type="text" id="to" name="to" />
    <label for="promocode">promo code</label>
    <input type="text" id="promocode" name="promocode" />
    <button id="searchBtn">Search</button>
</div>

- Second, place the following code in your css file

.hoteligaForm{
  border: 1px solid black;
  padding: 30px;
  width: fit-content;
}

.hoteligaForm,
input,
button {
    margin-bottom: 20px;
    font-size: 16px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
}

input {
    width: 100%;
    text-align: center;
}

#searchBtn {
    color: white;
    width: 100%;
    background-color: blue;
}

- And third, place the following code in your js file

var minArrivalOffset = 10; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
    if (dateRel == null) dateRel = new Date();
    return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
    return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
    if (this.id == 'from') {
        var dateMin = $('#from').datepicker("getDate");
        $('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
        $('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
    }
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
    String.prototype.format = function() {
        var args = arguments;
        return this.replace(/{(\d+)}/g, function(match, number) {
            return typeof args[number] != 'undefined' ? args[number] : match;
        });
    };
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
    return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

    // initialize the two datepickers
    $("#from, #to").datepicker({
        dateFormat: dateFormat,
        defaultDate: getOffsetDate(null, minArrivalOffset),
        minDate: getOffsetDate(null, minArrivalOffset),
        changeMonth: true,
        numberOfMonths: numberOfMonths,
        onSelect: onSelectDatepicker
    });

    // show initial values (from-to) on textboxes
    $("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
    $("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

    // redirect to results page on click of 'search' button
    $("#searchBtn").bind("click", function() {
        var df = $("#from").datepicker("getDate").getDate();
        var dt = $("#to").datepicker("getDate").getDate();
        var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
        var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
        var promocode = $("#promocode").val();
        var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
        location.href = url;
    });

});

Advanced Setup