Introduction

iTravel Software comes with an online booking module which can be implemented into the website easily by including 2 scripts into the page, and then adding HTML div elements with predefined attributes. The script will render an iFrame element inside the div you have added.

iTravel Software implements 4 different controls through the iFrames:

  • Search box – the control which your clients browsing the site can use to set their preferences and search for available products
  • Search results – a list of results found matching the query of the client, full with pagination
  • Detailed description – a detailed description of the product selected by the client
  • Booking form – a booking form fully featured to allow online booking of clients products with guest info, price calculation and credit card payment

Default HTML templates are used. CSS code can be fully modified by the developers to get the look and feel matching their website design and brand.

Setting up the iTravel online booking through iFrames

On every page where you add div HTML elements from this guide, you need to include 2 scripts. You should include the scripts in the <head></head> element of your web page, like this:

<head>
<script type=”text/javascript” src=’https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’></script>
<script type=”text/javascript” src=”http://yourbackoffice.itravelsoftware.com/itravel/Accommodation/iFrame.js”></script>
</head>

Important notes:

  • the jQuery script MUST be included before the iFrame script
  • by default, the iFrame script will have the above src URL (in which “yourbackoffice” is the placeholder for your actual back office domain). If we have made a custom solution for iFrames for you, it is possible that the script will be located elsewhere, in which case we will provide you with the script src URL.

Setting up the search box

The search box is used by customers on your website to search for available products based on their input filters. To add a search box to your web page, just add one of the three following div elements to your page:

<div data-frame-type=”accommodation-search”></div>

<div data-frame-type=”tour-search”></div>

<div data-frame-type=”transportation-search”></div>

Accommodations, tours and transportation use separate search boxes, so you should add the div based on the type of product your search box should search.

Parameters of the search box

Aside from required data-frame-type attribute, search box div elements can have additional attributes that further customize their behavior:

  • data-language-id – defines the language the search box is in. Definition given by two letter abbreviation of culture (e.g. en, hr, de, it…)
  • data-currency-id – defines the currency in which the search results will be displayed. Definition given by three-digit ISO code (e.g. 978 – EUR, 840 – USD…)
  • data-searchbox – this attribute is used in only one way: data-searchbox=”1″. Adding it will replace destination drop down lists with a single text input.

For example, div:

<div data-frame-type=”accommodation-search” data-language-id=”en” data-currency-id=”978″></div>

will display an accommodation search box that will be in English, and the search result prices will be in Euros.

Displaying search results

To display the search results, you need to have a web page that will contain the search results div element. By default, the search box will redirect to the following pages:

www.yourdomain.com/accommodation-search-results/

www.yourdomain.com/tour-search-results/

www.yourdomain.com/transportation-search-results/

depending on which search box is used. “yourdomain” is a placeholder for your actual website domain.

If your search results page URL doesn’t match the URL above, you will need to add another attribute (“data-search-results-address”) to the search box div, to instruct it to which page it should redirect to display the results. Example:

<div data-frame-type=”accommodation-search” data-search-results-address=”/search-results/accommodation.aspx”></div>

The search box added with the above div will redirect to: www.yourdomain.com/search-results/accommodation.aspx to display the search results. Note that you have to set the data-search-results-address attribute with the relative path to the search results page, leaving out your domain.

Setting up the search results page

You can use the search results in two different ways: for displaying search results from the search box, or independently from the search box, as a standalone iFrame.

Redirecting from the search box

If you are using the search results page to redirect and display the search results from the search box, you only have to add one of the three following div elements to your search results page:

<div data-frame-type=”accommodation-search-results”></div>

<div data-frame-type=”tour-search-results”></div>

<div data-frame-type=”transportation-search-results”></div>

depending on the type of product your search results are and the type of search box you have used. There are no additional attributes to set.

Standalone search results

Maybe you want to have static pages where you will display only certain products, which won’t be filtered by using a search box. An example of this is if you want to have a page for each of your destinations, and on each destination page, the products on that destination. In that case, you will also add one of the three search results div elements:

<div data-frame-type=”accommodation-search-results”></div>

<div data-frame-type=”tour-search-results”></div>

<div data-frame-type=”transportation-search-results”></div>

depending on the type of products you wish to display, but you can add additional attributes by which the displayed products will be filtered:

  • data-language-id – defines the language the search results are in. Definition given by two letter abbreviation of culture (e.g. en, hr, de, it…)
  • data-currency-id – defines the currency in which the search results will be displayed. Definition given by three-digit ISO code (e.g. 978 – EUR, 840 – USD…)
  • data-country-id – if this attribute is set, only the products from the country of that ID will be displayed. You can see the country IDs in your back office (Options -> Travel product settings -> Places, right click on the county and click “Edit” in the menu.)
  • data-region-id – if this attribute is set, only the products from the region of that ID will be displayed. You can see the region IDs in your back office (Options -> Travel product settings -> Places, right click on the region and click “Edit” in the menu.)
  • data-destination-id – if this attribute is set, only the products from the destination of that ID will be displayed. You can see the destination IDs in your back office (Options -> Travel product settings -> Places, right click on the destination and click “Edit” in the menu.)
  • data-destination-name – if this attribute is set, only the products on the destinations of that name will be displayed.

Example:

<div data-frame-type=”accommodation-search-results” data-language-id=”en” data-currency-id=”978″ data-destination-name=”London”></div>

The div above will display only the accommodations in London. The search results will be in English, and the prices in Euros.

Defining style sheets

iTravel online booking through iFrames comes with default HTML templates and default styles. It is possible to customize the styles to match your website design and brand. To do this, we suggest using an “Inspect element” tool (built in in Goole Chrome, or Firebug in Firefox) to:

  • See our CSS classes and definitions
  • Override our CSS classes and definitions

When you have the new CSS code, you simply need to:
1. Log into the iTravel Software
2. Go to Options -> Settings -> General settings
3. Paste the new code to the User defined CSS box (lower right corner). The CSS code pasted here overrides the default CSS code.
4. Click “OK” to save.
From that moment on, the new CSS styles will be applied.