Adding an Online Course placeholder

BookingTimes Placeholders

Placeholders can be placed in the HTML of your website to load dynamic information about your business, services, and products. This means you do not have to add information by hand when designing your website.

Placeholders can be identified by the use of the “@” symbol, for example @BusinessName, @OnlineCourses

This article details how to correctly implement and style a placeholder for Online Courses. The Online Courses placeholder will show a list of all Online Courses that you have published in your system. You can also add a category and search filter to your Online Course list.

Adding the placeholder

The Online Course placeholder can be placed on your Homepage, Custom Pages, and Service pages.

Course list with category filter

If you would like to show the category filters and Online Course list copy the following code and add it to your HTML:

<div class="row">
<div class="col-md-6 col-xs-12"><label style="padding-top:10px;font-weight:bold;">Category:</label><select id="btOnlineCourseCat" class="form-control">@OnlineCourseCategories</select></div>
<div class="col-md-6 col-xs-12"><label style="padding-top:10px;font-weight:bold;">Search Courses:</label> <input type="search" id="btOnlineCourseSearch" name="btOnlineCourseSearch" class="form-control" placeholder="Search..."></div>
</div>
<div id="btOnlineCourses">@OnlineCourses</div> //Replace @OnlineCourses with @OnlineCoursesHighlight if you only want to show highlight products

Course list without category filter

If you just want to display a list of Online Courses without the category filters, copy the following code and add it to your HTML:

<div id="btOnlineCourses">@OnlineCourses</div> //Replace @OnlineCourses with @OnlineCoursesHighlight if you only want to show highlight products

Managing which courses are displayed

• The @OnlineCourseCategories placeholder will show the product categories which include an Online Course product. See: Creating Product Categories

• The @OnlineCourses placeholder will display a list of all published Online Course products. See: Creating an Online Course product

• The @OnlineCoursesHighlight placeholder will display a list of all Online Course Products which have been highlighted under the Product setup.

Styling the Online Course placeholder

The system adds a number of CSS classes to the Online Courses placeholder. Publish your page and log out to view your page from public view. Here you can inspect the placeholder to view the available CSS classes. You can use these CSS classes to style the Online Course boxes.

You can place the CSS in your Public CSS file, or in a <style></style> tag at the top of your page.