home > support > solution library > booking engine > progress indicator

Add a progress indicator to the TourCMS Booking Engine

It is fairly common on transactional websites to provide an indication of how far the customer is through the process. The standard TourCMS booking engine provides for this with the Step X of 5 text which is configurable at each step.

Some prefer a more detailed progress indicator showing the steps that are still to come (see the screenshot below), luckily this can be achieved with a little custom HTML and CSS.

Preview

The part we are going to reproduce in this tutorial is the top section which reads "Step 1: Product Step 2: Extras....." with an indicator that highlights the current step.

Notes

For Tours/Hotels that do not have any Options available Step 2 is skipped, yet Step 2 will still be shown in the progress indicator. If none of your Tours/Hotels contain Options you could remove Step 2 from the custom HTML.
Any images you reference in your custom HTML/CSS should be served via https, for more information see the note at the bottom of this page
If you are using the TourCMS marketplace your partners can apply their design to your booking engine. In this situation the progress indicator will not show. Feel free to point them to this tutorial if you think they should consider adding a progress indicator.

The method

Usually to achieve this type of effect via CSS you would add class="current" or similar hook on the current item to allow special styling via CSS, as the custom HTML and CSS fields are set on a per booking engine basis (rather than a per step basis) this is not possible.

The solution is to hook into the fact that each step of the TourCMS booking engine has a different id on the <body> tag, for example <body id="tourcms-step1">, <body id="tourcms-step2"> etc. The code below demonstrates.

The code

Add the HTML code below into the HTML Top box located in Channel Manager > Design look & feel. You can change the wording as you like, the id attributes are the important part.

<ul id="navlist">
 <li id="s1">Step 1: Product</li>
 <li id="s2">Step 2: Extras</li>
 <li id="s3">Step 3: Your details</li>
 <li id="s4">Step 4: Conditions</li>
 <li id="s5">Step 5: Confirmation</li>
</ul>

Now just add the CSS code below into CSS header (also in Channel Manager > Design look & feel). You will probably want to adjust the styling to match your design, if you use the arrow image on a live website then please do upload it to your own account.

#navlist
{
width: 770px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 10px;
}

/* Default styling for each step */
#navlist li
{
display: inline;
padding-bottom: 14px;
margin-left: 10px;
padding-left: 18px;
font-weight: bold;
color: #667;
}

/* Highlight the current step */
#tourcms-step1 li#s1, #tourcms-basket li#s1, #tourcms-step2 li#s2,
#tourcms-step3 li#s3, #tourcms-step4 li#s4, #tourcms-step5 li #s5
{
color: black;
background: url(https://live.tourcms.com/images/a828/arrowbullet.gif);
background-repeat: no-repeat;
background-position: 0 -14px;
}

/* We don't want to have a margin before the "Step 1:.." text */
li#s1 {
margin-left: 0
}

Important note regarding SSL / HTTPS

The TourCMS booking engine is served via https using an SSL certificate which ensures the whole process is encrypted and end customers see their browser padlock at every stage. Any images referenced in the custom CSS or HTML must also be referenced via https otherwise the end customer will see a warning in their browser. One simple way to solve this is to upload images to TourCMS and then use the address for the TourCMS hosted version.

Contact Info

Learn More