Note: This requires some programming knowledge. We are available to hire for help with this if necessary.

Introduced in version 5.8.19, CabGrid Pro provides 3 event hooks that enable you to manipulate the price calculator and booking form on your website. These are JavaScript functions that are called when specific events occur during the calculation or booking process. Some basic information is passed to these functions, but the functionality is defined by you. The 3 functions are as follows:

  • hookCabGridProGetPrice(“done|fail“)
    • Fires when the calculation is performed.
    • Receives a single string parameter of either “done” or “fail”
      • done: if the calculation or some message is returned
      • fail: if the calculation results in an error
  • hookCabGridProBookButtonClick([CabGrid Instance])
    • Fires when the BOOK button is clicked
    • Receives a jQuery object representing the currently active CabGrid Pro instance
  • hookCabGridBookingSubmit(“done|fail“,[form data])
    • Fires when the booking form is submitted
    • Receives two parameters
      • a status of “done” or “fail” as a string
        • done: if the booking form is submitted and processed successfully
        • fail: if there is an error and the booking form is not processed successfully
      • the booking form data as a serialised string

How to implement custom functionality

Your custom functions will need to be loaded on your page ready to be called when events occur. There are several ways to achieve this. For example, enqueue a Javascript file within your theme, add Javascript to the head of your page via a custom plugin, or use a third-party plugin to inject Javascript.

If you have the free CabGrid Defaults add-on plugin installed, you can also add custom JavaScript to the cab-grid-custom.js file.

Once you have chosen the method to inject your function(s) to your page, you need to write code to execute when it is called. Here is a simple example:

function hookCabGridProGetPrice(status) {
	//alert the calculation status (replace with your code)
	alert("Price calculation status = "+status);
function hookCabGridProBookButtonClick(cgp) {
	//change this calculator's background colour when book button clicked (replace with your code)
function hookCabGridBookingSubmit(status,data) {
	//display an alert based on status when booking submitted (replace with your code)
	if(status=="done") {
		alert("Booking request sent successfully");
	} else {
		alert("An error occurred, please contact us");

Other Events

Hook into the Date/Time Picker

When the date or time is changed on the taxi booking form, a JavaScript event is triggered. You can hook into this event to run your own function to modify the journey price. For more information see Flatpickr docs.

Note, on some mobile devices, the native date picker is used. You will need to hook into a separate onChange event for this, in addition to the date picker.

Tags: , ,

  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water


      Chilled mineral water



No price found for this journey