In this Cab Grid use-case example, let’s consider a business that offers multiple passenger transportation modes…
The panel below shows how these different modes could be implemented using Cab Grid Pro. In the interest of clarity, a plain design colour scheme has been used, but each option could easily be augmented and distinguished independently using CSS.
Note, this model doesn’t need to distinguish modes specifically; it can be used to distinguish any set of shortcode attributes, such as GROUPS or pre-defined ORIGIN/DEST (without changing modes).
Click the different tabs to show the different pricing models.
- Airport Transfer
- City Tour
- Chauffeur Service
- Taxi
Here the ‘home’ airport has been pre-selected using the origin=”Heathrow Airport” shortcode attribute.
The destination list is also restricted to places in either the ‘Airport’ or ‘London’ groups using the origin=”Heathrow Airport” shortcode attribute.
Lastly, the customer is given the choice of vehicle using the layout=”vehicle” shortcode attribute.
Shortcode syntax:
[cabGridPro layout="vehicle" origin="Heathrow Airport" id="Airport,London" class="transfer"]
Here a destination is predefined using the dest=”London (Centre)” shortcode attribute. The destination field is hidden from view using CSS so it cannot be modified by the customer.
The TICKET mode is used to allow the customer to choose the number of tickets required for the tour.
The destination list is also restricted to places in the ‘Tour’ group using the origin=”Tour” shortcode attribute.
Shortcode syntax:
[cabGridPro layout="tickets" id="Tour" dest="London (Centre)" class="tour"]
CSS: (hide destination input)
.cabGridPro.tour .cabGridProToSelect {display:none;}
(.tour is added to target this specific instance which has a custom class assigned named ‘tour’)
Here the vehicle is fixed to the ‘Chauffeur’ vehicle type using the shortcode attribute: vehicles=”4″
The destination selection is pre-set and hidden using CSS as in this mode the vehicle is hired for a fixed period via the TIME layout attribute: layout=”time”
The pick-up list is restricted to places in the ‘London’ group.
Shortcode syntax:
[cabGridPro layout="time" dest="London (Centre)" id="London" class="chauffeur"]
CSS: (hide destination input)
.cabGridPro.chauffeur .cabGridProToSelect {display:none;}
(.chauffeur is added to target this specific instance which has a custom class assigned named ‘chauffeur’)
You may also be interested in Combining Cab Grid Pro Calculation Modes in a single calculated instance.
hi, can we create this panel with multiple tabs as described in this article? how?
The tabs functionality is not part of Cab Grid. In order to present the example above we have created basic tabs using CSS in the WordPress page editor.
There are probably many plugins that add tabs to the WordPress editor (see https://wordpress.org/plugins/tags/tabs/) or you can create your own in CSS. Once you have created tabs, you can add the various shortcodes (as described above) to the body section of each tab.