Search Form Guide

If you're an affiliate of VroomVroomVroom or an employee, use this guide to setup and customise your form.

Contents of this Guide:
Installation
Client Side Javascript
Server Generated Javascript
Styles
Changing Form Defaults
Form Options
I want to speed things up
Notes for Vroom Employees

Installation
<!-- COPY FROM HERE -->
<div id="Loading">loading...</div>
<link type="text/css" rel="stylesheet" href="http://www.vroomvroomvroom.com/SearchFresh/styles/bluefresh.css" />
<script language="JavaScript">
//OPTIONS
var countryID = "US";
var pickupFrom = "";
var httpServer = "http://www.vroomvroomvroom.com/"; //path of vroom server
var affiliateID = "";        
var PICKUP_PROMPT = "Type in pickup city or airport code here";
var RETURN_PROMPT = "Type in return city or airport code here";
var ADVANCED_PICKER_PROMPT = "Enable map mode";
var LIST_ALL_LOCATIONS_ONFOCUS = false;
var SUGGESTION_MODE = "AUTOCOMPLETE"; //OFF or LIST or AUTOCOMPLETE.(when pickupFrom is set)
var OLD_SCHOOL_DROPDOWN = false;
var SHOW_FOOTER = true;
</script>

<script language="javascript" src="http://www.vroomvroomvroom.com/SearchFresh/js/writeform-min.js"></script>
<script language="javascript" src="http://www.vroomvroomvroom.com/SearchFresh/js/jslibrary-min.js"></script>
<script language="javascript" src="http://www.vroomvroomvroom.com/SearchFresh/js/vroomsearch-min.js"></script>
<!-- COPY TO HERE-->

Client Side Javascript
There are 3 javascript files that do cool stuff.
1. vroomsearch.js
This is the engine room. This is where it all happens Validation, URL Generation, Server Side Calls, AutoComplete Feature, Form Initialisation

2. writeform.js
This generates and uses document.writes for the HTML that displays the form. If you don't like javascript, you might like to write the HTML out manually, in RAW html form. See "Speeding things up" for information on this

3. jslibrary.js
This is all Yahoo YUI library files. It is a meger of several of Yahoo's open source javascript libraries. It is used for Calendar, Autocomplete and DOM manipulation

All three files also have a minified version.
vroomsearch-min.js
writeform-min.js
jslibrary-min.js

Server Generated Javascript
If you are lucky, you won't need to get involved with this. The vroom search form makes calls to the vroom server for dynamic javascript. This allows AJAX-like functionality using old-school technology. This means the form can be hosted anywhere and there is no need for messing around with server side php or aspx files to get cross-domain AJAX to work.

 The calls made using a function "includejs" and calls the following example files

 http://www.vroomvroomvroom.com/locationJS.aspx?country=US //to retrieve locations for different countries

http://www.vroomvroomvroom.com/depotJS.aspx //coming soon

Styles
CSS options:
bluefresh.css (example)
whitefresh.css
bluedingo.css (example)
bluedingowide.css

Make your own by editing one of them and include it locally. If you are a CSS guru make any cool changes, share them with us!

Changing Form Defaults
You can help the user by changing the default values of details you probably know about them. Like Country, City and maybe even dates.

This is done using javascript variables in the source code at installation time or using query string. The query string variable names are the same as the javascript variable names. The javascript variables override the url variables. ALL ARE OPTIONAL but they may make things easier for your customer. They are:

var countryID = "AU"; //AU, UK, US, NZ, CA

var pickupFrom = "Melbourne"; //a city name like Brisbane, New York, San Francisco, London

var returnTo = "Sydney"; //a city name like Brisbane, New York, San Francisco, London

var pickupDate = "10/31/2010";  //American Date Format. MM/DD/YYYY

var returnDate = "11/03/2010";  //American Date Format. MM/DD/YYYY

var pickupTime = "04:00"; //time in 24 format

var returnTime = "14:00"; //time in 24 format

var httpServer = "http://www.vroomvroomvroom.com/"; //path of vroom server. Change to http://www.vroomvroomvroom.com or vroomvroomvroom.com.au, depending on which is faster for your website. The .com is hosted in Dallas Texas. The .com.au is hosted in Brisbane, Australia.

var affiliateID = ""; Change this to the affiliate id you were given when you signed up.

 An example querystring is:
http://www.vroomvroomvroom.com/?countryID=US&pickupFrom=Boston&returnTo=Boston&pickupDate=11/07/2010&returnDate=11/03/2010&pickupTime=17:00&returnTime=18:00&affiliateID=vroom

Form Options

PICKUP_PROMPT
Message that is asking the user to type in a location
var PICKUP_PROMPT = "Type in pickup city or airport code here";

RETURN_PROMPT
Message that is asking the user to type in a location
var RETURN_PROMPT = "Type in return city or airport code here";

ADVANCED_PICKER_PROMPT
The text used to take the user to "map mode" where depots are displayed on a google map
var ADVANCED_PICKER_PROMPT = "Enable map mode";

LIST_ALL_LOCATIONS_ONFOCUS
When the pickup box is clicked, set this to true if you want the box treated like an oldscoll drop down on click. This is ONLY enabled If there is no pickupFrom variable set.
var LIST_ALL_LOCATIONS_ONFOCUS = false;

SUGGESTION_MODE
When a pickupFrom variable is set, then the search form will try to suggest some locations based on that variable. Set it to
AUTOCOMPLETE if you want it to act as if the use typed it in onclick. Use
LIST if you want it to suggest locations underneath the box on load. Use
OFF to.... you know. Disable this feature
var SUGGESTION_MODE = "AUTOCOMPLETE"; //OFF or LIST or AUTOCOMPLETE

OLD_SCHOOL_DROPDOWN
Lets go back. Back to the old school. The good ol' days of windows 98. Enabling this option will make the location selection box an old-school drop down box. It is off by default. It is forced on for all IE6 users.
var OLD_SCHOOL_DROPDOWN = false; //true or false

SHOW_FOOTER
Option to show or hide the footer. The footer in most skins is an image of the supplier logos and a "powered by VroomVroomVroom" message. If you are using the form in an iframe, it is recommended to keep the footer so that the calendar has enough room to show. Default is false.
var SHOW_FOOTER = true; //true or false

I want to speed things up

1. Add "-min" to javascipt files for the smaller versions. eg. searchfresh-min.js

2. Change the httpServer to a server close to your users. (http://vroomvroomvroom.com.au or http://vroomvroomvroom.com) See "Changing Form Defaults"

3. Change the path of the js includes and css include to either vroom.com.au or vroomvroomvroom.com. Or better yet, host these files on your own server.

4. Replace "writeform.js" include with the contents from http://vroomvroomvroom.com/SearchFresh/FORMSOURCE.txt

Be careful though, if Vroom employees make a change to the source code, you will not automatically have the new changes in your website.

Notes for Vroom employees

This is mostly for Vroom employees for proper upkeep of the search form.

Minified Files
Every time you make a change to the javascript files, you need to make a minified version. Use this tool to create the minified versions: http://javascriptcompressor.com/
Use default options.

Building "writeform.js"
The html found in FORMSOURCE needs to be converted to javascript after every change. Use http://accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
With the option "Generate document.write". This needs to happen everytime the html in the search form changes.

FORMSOURCE.txt
What is this? This is used for instructional purposes and to get the latest html source. If you make a change to the html in the search form, the changes need to also be made here.

Upload files
Upload minified files, FORMSOURCE.txt, css, gfx to the following 2 locations

BRISBANESERVER/SearchFresh/
TEXASSERVER/SearchFresh/

These are virtual directories and IIS is mapped to them for vroom.com.au and vroomvroomvroom.com

Bargain Wheels mode.
Enabling this option is for VroomVroomVroom developers only. Setting it to true will add BargainWheels.com.au to the search box. It is turned off by default. Unfortunately, commissions cannot be paid on Bargain Wheels bookings so it is not recommended for affiliates.
var BARGAIN_WHEELS = false; //true or false
Also include http://vroomvroomvroom.com/SearchFresh/js/bargainwheels.js

Server Side Code
The server side code simply generates and caches a javascript array with location information from the database. There is a .net project named "SearchJS" that handles this. The bin and the ASPX files need to be installed on vroomvroomvroom.com.au and vroomvroomvroom.com