CarTrawler AJAX Booking Engine Version: 3.26 Date: 18/06/09.

Size: px

Start display at page:

Download "CarTrawler AJAX Booking Engine Version: 3.26 Date: 18/06/09."

Ira McDonald
5 years ago
Views:

1 CarTrawler AJAX Booking Engine Date: 18/06/09

2 CarTrawler AJAX Booking Engine Introduction... 3 Set up the server environment:... 3 Set up the webpage with the AJAX Booking Engine:... 3 Dependencies... 3 Deployments... 4 Easy Client... 4 Complete Client... 5 More Information... 6 Easy Client... 6 Include Files... 6 HTML Placeholder... 6 Create and customise CT_OTA_Engine for Easy Client... 7 Complete Client Include Files HTML Placeholder Create and customise CT_OTA_Engine for Complete Client Linking Easy Client and Complete Client Call Out Method Where to place the script Example1: Including header (step1/2/3) for the engine Example2: Including Google Tracking Pixel Support Appendixes A. List of currencies B. List of languages C. List of car groups D. Links to resources E. Miscellaneous configuration FAQ... 19

3 Introduction The purpose of this document is to explain how to integrate the CarTrawler AJAX booking engine into the web page. To implement the booking engine take the following steps-: Set up the server environment: 1. For the first and most common form, it is required to have a web browser and a PHP enabled web server. You can download PHP installer from 2. Ensure curl extension (php_curl.dll) for PHP is enabled and appropriately set the extension_dir directive in php.ini. 3. Download otaproxy, ( which contains otaproxy.php. Upload the php file as is to the root directory in the web server. It should not be modified in any way. 4. The otaproxy and the webpage containing the booking engine must be hosted on the same webserver. Set up the webpage with the AJAX Booking Engine: 1. Choosing a DOCTYPE 2. Include certain Javascript include files from the Cartrawler server. 3. Create a HTML table with a placeholder for the booking engine. 4. Using javascript, create a CT_OTA_Engine object. Note: CT_OTA_Engine object should be included in the <body> tag after the placeholder. 5. Customise the booking engine using methods of the CT_OTA_Engine. 6. Invoke the booking engine. Dependencies Browser Support: IE 5.5 or above, FireFox 1.5 or above Javascript must be enabled. For IE, activex controls need to be enabled. Please note: The CarTrawler booking engine is entirely based on AJAX.

Deployments There are three ways the booking engine can be deployed: Easy Client Complete Client Smart Client Easy Client Only Step 1 (where the user is asked to enter their search criteria) is

4 Deployments There are three ways the booking engine can be deployed: Easy Client Complete Client Smart Client Easy Client Only Step 1 (where the user is asked to enter their search criteria) is hosted on the website. On clicking Search, the user is redirected to a full-page booking engine showing the results hosted by CarTrawler. This will only require small real estate space on the webpage as in the following example. The recommended minimum width is 300 pixels.

Complete Client The entire booking engine is displayed in one page using the template. This will require a large amount of real estate on your webpage.

5 Complete Client The entire booking engine is displayed in one page using the template. This will require a large amount of real estate on your webpage. You must ensure that sufficient space is given to the booking engine so that it can display large availability responses that could be returned in Step 2 of the booking process. The recommended width is 780 pixels. If you intend to embed in iframe, the recommended size of iframe to display the booking engine is 780px width & 700px height (to display 4 cars). Also enable scroll bars in iframe.

6 More Information Easy Client Include Files Before the <Head> tag include the following DOCTYPE: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " In the <Head> tag include the following javascript files: <script type="text/javascript" src=" HTML Placeholder <div id="abe_abe"><noscript>your BROWSER DOES NOT SUPPORT JAVASCRIPT</noscript></div> Include the <!DOCTYPE> declaration in your document, before the <html> tag as indicated above. Create a HTML table with one row and one column or block element like <div>. Assign the table cell/block element an id="abe_abe". We will use this id later when creating the booking engine object. We have also added a noscript tag, which will display the text YOUR BROWSER DOES NOT SUPPORT JAVASCRIPT in the case where the customer does not have javascript enabled.

7 Create and customise CT_OTA_Engine for Easy Client <script type="text/javascript">  </script> Explanation: var ctotaengine = new CT_OTA_Engine("ABE"); This creates CT_OTA_Engine object, and ties it to the HTML element identified by abe_abe. ctotaengine.setstep2url(" This tells the engine the URL of the webpage which will display the result of the availability request. Please note that you can personalise this page by logging in to Affiliate Management System from Note: This should be https as this page will take credit card information from the customer. ctotaengine.setdefaulturl(" Set the default URL. ctotaengine.seturl("./otaproxy.php"); This points the engine to the OTA Proxy, which will be used to communicate with the CarTrawler OTA Servers. The otaproxy.php file has been provided by CarTrawler and should not be modified in any way. The OTA Proxy must be hosted on the same webserver as the webpages are hosted. ctotaengine.settarget("production"); The Target for the engine should be Production.

8 ctotaengine.setclientid("?"); // Provided by CarTrawler This is your affiliateid/clientid, which has been provided by Cartrawler. It will be a number and should be entered correctly in order to be able to track your bookings. ctotaengine.setcountryid("ie"); // Default Country Set the default Country for the Step1 Search page. ctotaengine.setpickupid("11"); // Default Pickup Location Set the default pickup location. The pickup location must be within the country specified in the setcountryid method. Please consult the CarTrawler location list ( document for information on which Ids should be used for each location. ctotaengine.setreturnid("1316"); // Default Return Location Set the default return location if pickup location is different. The return location must be within the country specified in the setcountryid method. This option is not required if both pickup and return location are same. ctotaengine.addcurrency(); // adds list of all available currencies or ctotaengine.addcurrency("cad", "CYP", "AUD"); // adds custom list of currencies Displays the list of currencies. See appendix A for the list. ctotaengine.setcurrency("gbp"); // Default Currency Set the default currency. This option is not required is the default currency is EUR. ctotaengine.setdefaultlanguage("es"); // Default Language Set the default language. See appendix B for the list. This option is not required if the default language is EN ctotaengine.setcargroupid(0); // Default Car Group Set the default Car Group and it will be a number. See appendix C for the list. ctotaengine.settemplate("hybrid1"); Set the default template/style for the booking engine. ctotaengine.settemplatecolor("blue"); // For default color do not include this line. Set color scheme. Options available are blue, green, red, orange, violet. ctotaengine.enableautosuggest({style: "lightgray", flag: true}); This enables autosuggest which supports different styles. The first suggestion is filled into the textbox as you type while a list of several suggestions appears in a dropdown list beneath the textbox. You could customise using parameters below: style: Set theme color ( lightgray, darkgray, blue, or orange ) and is mandatory. flag: This is optional and can be set to true or false. If you want to display country flag, set to true. By default this is false. flag_size: This option along with flag can be used to set flag size ( 16 or 24 ). By default this is 16.

9 ctotaengine.enablenewcalendar({style: "blue", daterange: true}); This enables new calendar which supports different styles. This also supports text entry box which allows customer type in the date. You could customise using parameters below: style: Set theme color (blue, green, red, violet, orange) and is mandatory. daterange: This is optional and can be set to true or false. If you want to display two months range, set to true. By default this is false. ctotaengine.addcustomstyle(" This allows you to add custom style. ctotaengine.seterrorreporturl(" Set default error page. ctotaengine.displaystep1(); Displays Step1 of the booking engine.

10 Complete Client Include Files Before the <Head> tag include the following DOCTYPE: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " In the <Head> tag include the following javascript files; <script type="text/javascript" src=" HTML Placeholder <div id="abe_abe"><noscript>your BROWSER DOES NOT SUPPORT JAVASCRIPT</noscript></div> Include the <!DOCTYPE> declaration in your document, before the <html> tag as indicated above. Create a HTML table with one row and one column or block element like <div>. Assign the table cell/block element an id= "abe_abe". We will use this id later when creating our booking engine object. We also added a noscript tag, which will display the text YOUR BROWSER DOES NOT SUPPORT JAVASCRIPT in the event where the customer does not have javascript enabled.

11 Create and customise CT_OTA_Engine for Complete Client <script type="text/javascript">  </script> Explanation: var ctotaengine = new CT_OTA_Engine("ABE"); This creates CT_OTA_Engine object, and ties it to the HTML element identified by abe_abe. ctotaengine.setdefaulturl(" Set the default URL. ctotaengine.seturl("./otaproxy.php"); // Provided by CarTrawler This points the engine to the OTA Proxy, which will be used to communicate with the CarTrawler OTA Servers. The otaproxy.php file has been provided by CarTrawler and should not be modified in any way. The OTA Proxy must be hosted on the same webserver as the webpages are hosted. ctotaengine.settarget("production"); The Target for the engine should be Production. ctotaengine.setclientid("?"); // Provided by CarTrawler This is your affiliateid/clientid, which has been provided by Cartrawler. It will be a number and should be entered correctly in order to be able to track your bookings. ctotaengine.setcountryid("ie"); // Default Country Set the default Country for the Step1 Search page.

12 ctotaengine.setpickupid("11"); // Default Pickup Location Set the default pickup location. The pickup location must be within the country specified in the setcountryid method. Please consult the CarTrawler location list ( document for information on which Ids should be used for each location. ctotaengine.setreturnid("1316"); // Default Return Location Set the default return location if pickup location is different. The return location must be within the country specified in the setcountryid method. This option is not required if both pickup and return location are same. ctotaengine.addcurrency(); // adds list of all available currencies or ctotaengine.addcurrency("cad", "CYP", "AUD"); // adds custom list of currencies Displays the list of currencies. See appendix A for the list. ctotaengine.setcurrency("gbp"); // Default Currency Set the default currency. This option is not required is the default currency is EUR. ctotaengine.setdefaultlanguage("es"); // Default Language Set the default language. See appendix B for the list. This option is not required is the default language is EN ctotaengine.setcargroupid(0); // Default Car Group Set the default Car Group. It will be a number and following option is available: See appendix C for the list. ctotaengine.settemplate("hybrid1"); Set the default template/style for the booking engine. ctotaengine.settemplatecolor("blue"); // For default color do not include this line. Set color scheme. Options available are blue, green, red, orange, violet. ctotaengine.enableautosuggest({style: "lightgray", flag: true}); This enables autosuggest which supports different styles. The first suggestion is filled into the textbox as you type while a list of several suggestions appears in a dropdown list beneath the textbox. You could customise using parameters below: style: Set theme color ( lightgray, darkgray, blue, or orange ) and is mandatory. flag: This is optional and can be set to true or false. If you want to display country flag, set to true. By default this is false. flag_size: This option along with flag can be used to set flag size ( 16 or 24 ). By default this is 16. ctotaengine.enablenewcalendar({style: "blue", daterange: true}); This enables new calendar which supports different styles. This also supports text entry box which allows customer type in the date. You could customise using parameters below: style: Set theme color (blue, green, red, violet, orange) and is mandatory. daterange: This is optional and can be set to true or false. If you want to display two months range, set to true. By default this is false.

13 ctotaengine.setwebsiteconditionsurl(" This will publish booking engine terms and conditions link in Step 3. ctotaengine.seterrorreporturl(" Set the default error page. ctotaengine.displayoptionalinsurance(); // Display Insurance on Step 3 This will display Optional Excess Insurance option on Step 3. This will allow customer to book excess Insurance (for an extra fee) when booking a vehicle. ctotaengine.displaybookengine(); Displays the booking engine. Linking Easy Client and Complete Client In some scenarios, you would want to host Easy Client on the Step 1 or Search page on your website and on clicking Search, redirected to Complete Client or full-page booking engine hosted by you to display large availability responses. To achieve this, just configure setstep2url in the step1 page to point to complete client hosted by you. ctotaengine.setstep2url(" This tells the engine the URL of the webpage, which will display the result of the availability request. Note: This should be https as this page will take credit card information from the customer. Call Out Method The reserved functions/call out methods can be triggered, if required, on different steps of the AJAX booking engine. The following call out methods is supported in the booking engine: abestep1() function abestep1() // invoked in step1 abestep2() function abestep2() // invoked in step2 abestep3() function abestep3() // invoked in step3 abestep4() function abestep4() // invoked in step4

14 abestep2_onprogressbar() function abestep2_onprogressbar() // invoked when we search for availability from step1, before the availability is displayed in step2 abestep2_onload() function abestep2_onload() // invoked when we deeplink to step2, before we send the availability request Where to place the script The call out method should be placed proceeding CT_OTA_Engine configuration. That is, include immediately after ctotaengine.displaybookengine(); Example1: Including header (step1/2/3) for the engine This script will display the steps for the engine. function abestep1() { abeid.display("headertype2", "block"); abeid.get("type2header1").classname = "header_style2"; abeid.get("type2header2").classname = "header_style1"; abeid.get("type2header3").classname = "header_style1"; } function abestep2() { abeid.display("headertype2", "block"); abeid.get("type2header1").classname = "header_style1"; abeid.get("type2header2").classname = "header_style2"; abeid.get("type2header3").classname = "header_style1"; } function abestep3() { abeid.display("headertype2", "block"); abeid.get("type2header1").classname = "header_style1"; abeid.get("type2header2").classname = "header_style1"; abeid.get("type2header3").classname = "header_style2"; } function abestep4() { abeid.display("headertype2", "none"); } function abestep2_onload() { abeid.display("headertype2", "none"); } function abestep2_onprogressbar() { abeid.display("headertype2", "none"); }

15 Example2: Including Google Tracking Pixel The google code snippet to track conversions is placed on the conversion page (in step4 of the AJAX booking engine). Follow the steps below. Include container anywhere on the page <img id="abe_conversiontracking_google" width="1" height="1" border="0" /> Inserting Google Code in the engine: Sample code snippet only - DO NOT USE function abestep4() { var google_conversion_id = ; var google_conversion_language = "en_gb"; var google_conversion_format = "1"; var google_conversion_color = "666666"; var google_conversion_label = "Purchase"; abeid.get("conversiontracking_google").src=" /?value=1&label=Purchase&script=0"; } Placing Google Code (conversion.js) to the end of the page <script language="javascript" src=" Support If you require help or support can you direct your queries to our support page at: CarTrawler do not provide telephone or support for any issues relating to this document.

16 Appendixes A. List of currencies Currency Code Currency EUR Euro GBP GB Pound USD US Dollar ARS Argentine Pesos AUD Australian Dollars BRL Brazilian Reais CAD Canadian Dollars CNY Chinese Yuan Renminbi CZK Czech Koruny DKK Danish Kroner HKD Hong Kong Dollars HUF Hungarian Forint INR Indian Rupees JPY Japanese Yen MYR Malaysian Ringgit MXN Mexican Pesos NZD New Zealand Dollars NOK Norwegian Kroner PLN Polish Złoty RUB Russian Rubles SGD Singapore Dollars ZAR South African Rand SEK Swedish Kronor CHF Swiss Francs THB Thai Baht AED United Arab Emirates Dirhams EUR Euro

17 B. List of languages Language Code Language EN English CH Swiss CS Czech DA Danish DE German EL Greek ES Spanish ET Estonian FI Finnish FO Faroese FR French HR Croatian HU Hungarian IT Italian JA Japanese LT Lithuanian LV Latvian NL Dutch NO Norwegian PL Polish PT Portuguese RO Romanian RU Russian SV Swedish TR Turkish C. List of car groups Code Car Group 1 Mini 3 Economy 4 Compact 6 Intermediate 7 Standard 8 Fullsize 9 Luxury 10 Premium 11 Minivan passenger van 24 Exotic 0 Show all

18 D. Links to resources otaproxy: ( CarTrawler location list: ( E. Miscellaneous configuration ctotaengine.setpopoutiframe (1); This is used for a standalone Step1, based inside an IFrame. The default behaviour is for the results in Step 2 to be displayed inside the same IFrame. When this is set, this will cause the results to popout of the IFrame, taking up the full browser window. ctotaengine.setshowavailnewwindow (1); This is used for a standalone Step1 (both inside an IFrame and outside an IFrame). The default behaviour is for Step2 to be displayed inside the same browser window. When this is set, the engine will attempt to create a new browser window containing the results in Step2. WARNING: Pop up blockers will prevent new browser windows being created by javascript. They will have to be disabled for this functionality to work.

19 FAQ This section holds common questions about the way to install CarTrawler AJAX Booking Engine. 1. Unix/Windows: Where should my php.ini file be located? By default on Unix it should be in /usr/local/lib which is <install-path>/lib. On Windows the default path for the php.ini file is the Windows directory. 2. Windows: I can't get PHP and IIS to work together! Please refer to php manual:installation on windows system at 3. How do I add my PHP directory to the PATH on Windows? On Windows NT, 2000, XP and 2003: a. Go to Control Panel and open the System icon (Start -> Settings ->Control Panel -> System, or just Start -> Control Panel -> System for Windows XP/2003) b. Go to the Advanced tab c. Click on the 'Environment Variables' button d. Look into the 'System Variables' pane e. Find the Path entry (you may need to scroll to find it) f. Double click on the Path entry g. Enter your PHP directory ant the end, including ';' before (e.g. C:\php) * Press OK and restart your computer 4. How do I enable curl extension on windows? a. Enable the curl extension(s) in php.ini you want to use by uncommenting the extension=php_curl.dll lines in php.ini. This is done by deleting the leading ; from the extension you want to load. b. Be sure to appropriately set the extension_dir directive (Example: extension_dir = ".\\ext\\") 5. What should be the size of iframe to display the booking engine? Ensure sufficient space is given to the booking engine so it can display large availability responses that could be returned in Step 2 of the booking process. The recommended size of iframe to display the booking engine is 780px width & 700px height (to display 4 cars). Also enable scroll bars in iframe. For more information on installation of extensions on Windows please refer

Easy Cart User Manual

Easy Cart User Manual Table of contents 1. Installing Easy Cart (p. 2) 2. Overview of the administration panel (p. 2) 3. Configuring the website (p. 3) 4. Template settings (p. 6) 5. Setting the product