It may not be practical or possible to add every supported place to the destination drop-downs in Cab Grid. In our article, “Covering other taxi journeys” we examined techniques for handling journeys to or from places that are not listed in the Cab Grid AREAS tab. Whilst these techniques are still valid, improvements to the Cab Grid Pro plugin have provided some scope for alternative solutions.

Here is a working demo of this method in practice…

(To better illustrate this scenario the –other location has been preselected using the origin shortcode attribute.)

How this works

We are taking advantage two new features in Cab Grid Pro (Version 5.5 or higher required):

• Hide Unsupported Destinations – Limits the number of destinations based on the selected origin.
• Customise taxi booking form based on user input – Applies styling specific to certain conditions (i.e. the selected origin is ‘-other‘)

When the customer selects ‘–other‘ as their starting point (origin), the only destination available is listed as ‘Request a custom quote…‘. Once this destination is selected a price is retrieved but it is hidden using the conditional CSS, leaving only the BOOK button (and subsequent booking form).

This allows the customer to complete the regular booking form, including pickup and destination addresses. When received by the admin a customised quote can be sent by reply.

If the Booking Management Add-on is installed it would be possible to edit the booking request to enter the quoted price. The customer can then be sent a payment link along with the booking acknowledgement.

Set Up

Step 5 – Enter ANY price

Set up is similar to our original article in that an ‘-other‘ place is required, but some additional configuration is required. Here’s how…

1. Under the WordPress Admin > Cab Grid Pro > OPTIONS tab, set ‘HIDE UNSUPPORTED DESTINATIONS‘ to ‘YES‘ and SAVE CHANGES.
2. Under the WordPress Admin > Cab Grid Pro > AREAS tab, add a new place named ‘-other‘
   • Untick the the Destination tick box so only Origin is selected.
   • Do not assign to any group. This will insure the -other item is listed first.
3. Under the WordPress Admin > Cab Grid Pro > AREAS tab, add a new place named ‘Request a custom quote…‘
   • Untick the Origin tick box so only Destination is selected.
   • Do not assign to any group
4. Under the WordPress Admin > Cab Grid Pro > PRICES tab, select the sub-tab for the vehicle with the highest capacity (or repeat the following step for all vehicles if you prefer)
5. In the price table, find the cell for a journey FROM the ‘-other‘ location TO the ‘Request a custom quote…’ location and enter ANY price. In our example, we have entered $0.01. (See screenshot on the right).
6. Determine the dynamic class added to the main Cab Grid Pro element when the ‘-other‘ location is selected. See “Customise taxi booking form based on user input” for full details, but as an overview….
   • Visit the web page where Cab Grid Pro is displayed
   • Do a test calculation with ‘-other‘ selected as the pickup location
   • Use the browser’s web inspector to find the cabGridCalcProp-originN class name (where N is the origin ID). For the purposes of this tutorial, let’s assume that is cabGridCalcProp-origin12
7. Under the WordPress Admin > Cab Grid Pro > OPTIONS tab, add the following CSS code to the ‘STYLING (CSS)‘ box:
   /*Hide other/quote price*/
.cabGridPro.cabGridCalcProp-origin12 .cabGridProPriceDigCont span {display:none !important;}
/*Hide standard message*/
.cabGridPro.cabGridCalcProp-origin12 .cabGridProPriceDigCont .cabGridProUserMsg2 {display:none !important;}
/*Show a custom message*/
.cabGridPro.cabGridCalcProp-origin12 .cabGridProBookingResponse:before {content: "Thank you. We will be in touch...";display:block;}
/*Hide payment buttons*/
.cabGridPro.cabGridCalcProp-origin12 .cabGridProBookingResponse .cabGridProPayment {display:none !important;}
8. Save changes to the OPTIONS tab.

Use GROUPS to prevent -other destinations showing elsewhere

Whilst this technique is effective for the main Cab Grid taxi price calculator, the special destinations (-other & Request a custom quote) may show up in other Cab Grid interfaces such as the Random Price Slider widget or the Cab Grid Price Table. This is probably not wanted.

The current suggested solution is to restrict the ancillary interfaces using groups. Both the Random Price Slider widget and the Price Table can be limited to only show prices in certain groups. Since the special destinations are not assigned groups, they will not show when one or more group is assigned to these interfaces.

Further thoughts…

This method can be extended using the same principals of displaying certain content only when specific conditions are met.

For example, conditional content can be added to the message boxes found under the OPTIONS tab (PRE-BOOK MESSAGE and BOOKING SENT MESSAGE).

By enclosing messages in html elements assigned a specific class attribute they can be hidden or shown depending on the parameters selected in the Cab Grid Pro calculator. This would need to be done in source editing mode. Consider this example for the PRE-BOOK MESSAGE:
<div class="regular-price">Your price includes VAT at 20%. Click BOOK to continue.</div>
<div class="quote-request">Please click the book button and complete the form to receive a custom quotation for your journey.</div>
Then add this accompanying CSS to the ‘STYLING (CSS)‘ box:

/*Hide the regular message and show the quote message when origin is -other*/
.cabGridPro.cabGridCalcProp-origin12 .cabGridProPrice .cabGridProPriceDigCont .cabGridProMessage .regular-price {display:none !important;}
.cabGridPro.cabGridCalcProp-origin12 .cabGridProPrice .cabGridProPriceDigCont .cabGridProMessage .quote-request {display:block !important;}
/*Hide the quote request message and show the regular message in normal conditions*/
.cabGridPro .cabGridProPrice .cabGridProPriceDigCont .cabGridProMessage .regular-price {display:block !important;}
.cabGridPro .cabGridProPrice .cabGridProPriceDigCont .cabGridProMessage .quote-request {display:none !important;}


Conclusion

This method can be varied by modifying the CSS (in step 7) or even extended to encompass other custom pricing circumstances.

Tags: areas, Booking Form, bookings, destinations, places, prices, quote