Adding a course selector

This article details how to correctly implement and style BookingTimes Course Selectors

Example Course Selector 

 

Course Selectors need to be coded a special way to actually work with the booking system. Once you have done it once or twice, it is easy to implement. We use placeholder code which links into the booking system and does all the work for you.

All you need to do is copy the code and style it with CSS afterwards.

There are two types of course selectors. A course selector without regions which only has one level of filtering (by suburb) down the left side, or a more advanced course selector with regions which has two levels of filtering (by region, then suburb) across the top and left.

Course Selector without regions 

 

Course Selector with regions 

 

This guide will provide you with the code for the two course selector types, and instructions on how to style them.

Course selector without regions

Code

<div class="tab_bottom full-width"> <!--Course Selector-->        <div class="container">            <div class="tabwidget-are">                <div id="divCourses">                    <div class="row mid-cent">                        <h2 style="margin-top: 0; margin-bottom: 20px;"><span id="spnUpcoming">Upcoming Courses - Sydney</span></h2>                    </div>                    <div class="row">                        <div class="col-xs-12 col-sm-3">                            <ul id="ulLocality" class="nav nav-pills tab_list">@Localities</ul>                        </div>                        <div class="col-xs-12 col-sm-9">                            <ul id="ulUpcoming" class="list-group" style="margin-top: 0; margin-bottom: 30px;">@Courses</ul>                        </div>                    </div>                </div>            </div>        </div>    </div>

This is what the course selector looks like with courses scheduled and zero styling. The @Localities placeholder from the code above generates the list on the left, while the @Courses placeholder generates the table with bookable buttons 

 

Styling

To style you simply select the classes, id’s and elements already present and apply CSS to them. You can inspect the page with browser dev tools to see the id, classes and elements the placeholders generate:

Inspecting in Chrome dev tools to figure out what classes the Book Now button has 

 

You can also edit the code to wrap elements in other elements. Please check the course selector works correctly when doing this, as elements in the wrong page could break it

Course selector with regions

You will need to an an extra bit of HTML and an extra bit of javascript for this to work.

Code

<div class="top_tab full-width"> 
    <!--Region Selector-->
    <div class="container">            
    <div class="tab_holder">                
        <div class="tab-list ">                    
        <ul class="nav nav-pills zone-filter tab_list"> <!--Change the region names in the <li></li> to whatever values are required-->                        
            <li class="active "><a href="#" onclick="changeRegion(this);" data-toggle="tab">Sydney</a></li>                        
            <li class=""><a href="#" onclick="changeRegion(this);" data-toggle="tab">Newcastle</a></li>                        
            <li class=""><a href="#" onclick="changeRegion(this);" data-toggle="tab">North Coast</a></li>                       
            <li class=""><a href="#" onclick="changeRegion(this);" data-toggle="tab">Central Coast</a></li>                     
            </ul>                
            </div>           
        </div>        
        </div>  
    </div>
<div class="tab_bottom full-width"> <!--Course Selector-->       
    <div class="container">            
    <div class="tabwidget-are">                
        <div id="divCourses">                    
        <div class="row mid-cent">                        
            <h2 style="margin-top: 0; margin-bottom: 20px;"><span id="spnUpcoming">Upcoming Courses - Sydney</span></h2>                    
            </div>                    
        <div class="row">                        
            <div class="col-xs-12 col-sm-3">                            
            <ul id="ulLocality" class="nav nav-pills tab_list">@Localities</ul>                        
                </div>                       
            <div class="col-xs-12 col-sm-9">                           
            <ul id="ulUpcoming" class="list-group" style="margin-top: 0; margin-bottom: 30px;">@Courses</ul>                        
                </div>                    
            </div>               
            </div>            
        </div>       
        </div>    
    </div>
<p>
<script type="text/javascript">$(document).ready(function () { ShowRegion('Sydney'); });
    function changeRegion(a) { ShowRegion(a.innerHTML); }
    function ViewSchedule(e) { document.getElementById('lblSchedTitle').innerText = e.title; document.getElementById('lblSchedDates').innerHTML = e.getAttribute('dates'); $('#pnlDates').modal(); }
    </script>
</p>

This is what the course selector looks like with courses scheduled and zero styling. Note the region selector across the top 

 

Styling

To style you simply select the classes, id’s and elements already present and apply CSS to them. You can inspect the page with browser dev tools to see the id, classes and elements the placeholders generate:

Inspecting in Chrome dev tools to figure out what classes the Book Now button has 

 

You can also edit the code to wrap elements in other elements. Please check the course selector works correctly when doing this, as elements in the wrong page could break it