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.

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

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.

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

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.

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

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’)

This is the standard layout. There are no restrictions of vehicle and no restrictions of destination.

The PASSENGERS layout is used. It allows the most appropriate vehicle to be selected based on the number of passengers (and luggage).

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

Shortcode syntax:
[cabGridPro layout="passengers" class="taxi"]



You may also be interested in Combining Cab Grid Pro Calculation Modes in a single calculated instance.

Tags: , , , , , , , , , , , , , ,

x
  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey