home > support > solution library > booking engine switch
Building a booking engine switch
One of the core concepts in TourCMS is the Website channel, these allow you to apply things like markups, translations or currency conversions to the products loaded in TourCMS - or even to power separate branded websites.
When a Tour/Hotel is bookable on multiple Website channels it will have a separate Booking Engine link for each. This article covers ways of presenting the choice of booking engines at the time of booking to provide for example:
- Choice of currency at the time of booking
- Separate Agent and Customer booking engine links
Style 1: Standard links
This style might be good if you only have two separate links with one being the primary link and the other more secondary. Here we have used two currencies however this style might be good for a primary Customer booking engine link and a secondary Agent link. (NB: Demo links point to BBC and NPR websites as a proof of concept)
Demo
Book online (GBP)
or
Book in US Dollars
Code
For demonstration purposes we have used two news website links, you should replace these with the two Booking Engine links for your product (found in Setup for that product).
<p style="text-align: center;">
<a class="bt" href="http://bbc.co.uk">Book online (GBP)</a><br />
or<br />
<a class="sublink" href="http://www.npr.org/">Book in US Dollars</a>
</p>The CSS used in the demo can be found at the end of this article
When using TourCMS templates to manage a website there are Element tags we can add to our template to display booking links, combining that with the website_id attribute we can get the links from any of the channels in our account.
In the example below we have not added a website_id attribute to our first link, what that will do is generate the booking link for the website that our template is sitting in. For the second link we have used an id of 12345 - just replace that with the id for your Website channel (found in Website Manager).
<p style="text-align: center;">
<a class="bt" href="<$TourCMStour output="t_book_url"$>">Book online (GBP)</a><br />
or<br />
<a class="sublink" href="<$TourCMStour output="t_book_url" website_id="12345"$>">Book in US Dollars</a>
</p>The CSS used in the demo can be found at the bottom of this article
Style 2: Select box "dropdown"
This style works well when there are more than two links, or when there is no obvious primary link. (NB: Demo links point to BBC and NPR websites as a proof of concept)
Demo
Code
For demonstration purposes we have used two news website links, you should replace these with the two Booking Engine links for your product (found in Setup for that product).
We have added the first link twice (to the form action as well as the first option), this way if the user doesn't have JavaScript they still get redirected to a booking engine.
<form action="http://www.bbc.co.uk" onsubmit="window.location = this.channels.options[this.channels.options.selectedIndex].value; return false;" style="text-align: center;">
<select name="channels">
<option value="http://bbc.co.uk">£ GBP</option>
<option value="http://npr.org">$ USD</option>
</select>
<input type="submit" class="bt" value="Book online" />
</form>The CSS used in the demo can be found at the end of this article
When using TourCMS templates to manage a website there are Element tags we can add to our template to display booking links, combining that with the website_id attribute we can get the links from any of the channels in our account.
In the example below we have not added a website_id attribute to our first link, what that will do is generate the booking link for the website that our template is sitting in. For the second link we have used an id of 12345 - just replace that with the id for your Website channel (found in Website Manager).
We have added the first link twice (to the form action as well as the first option), this way if the user doesn't have JavaScript they still get redirected to a booking engine.
<form action="<$TourCMStour output="t_book_url"$>" onsubmit="window.location = this.channels.options[this.channels.options.selectedIndex].value; return false;" style="text-align: center;">
<select name="channels">
<option value="<$TourCMStour output="t_book_url"$>">£ GBP</option>
<option value="<$TourCMStour output="t_book_url" website_id="12345"$>">$ USD</option>
</select>
<input type="submit" class="bt" value="Book online" />
</form>The CSS used in the demo can be found at the bottom of this article
CSS
/* Button */
a.bt, button.bt, input.bt {
font-size: 1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: normal;
text-decoration: none;
text-align: center;
color: white;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 4px 6px 4px;
.padding-bottom: 4px; /* IE hack to fix spacing */
display: inline-block;
background: #147FCB url(btn_stretch.png) center left repeat-x;
border: 1px solid #ccc;
border-color: #1c71ae;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* Button click */
a.bt:active, button.bt:active, input.bt:active {
background-image: url(btn_stretch2.png);
}
/* Secondary link for Style 1 */
.sublink {
font-size: 14px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #286bd6;
}The CSS above references the following two images which are used to create the gradient effect
