Appointment Hour Booking Blog

Blog / Setting different prices per number of time-slots selected

Setting different prices per number of time-slots selected

The default behavior in the plugin is to multiply the number of slots by the unit price of the service to get the total price. In some cases of use is needed to set a lower price per time-slot if multiple time-slots are selected. This article explains how to setup different prices linked to the number of different time-slots selected in the calendar.

---

Please note first the difference between the "quantity" field and the "number of slots selected". The "quantity" is referred to the capacity booked for each time-slot and "number of slots selected" is referred to the number of different times selected. If you are looking for linking the prices to the "quantity" selected then check this other article.

You may be already aware that the maximum number of time-slots that can be selected in a booking can be setup in the following settings field:

If you want to apply the solution described here, then the above field should be set to accept the multiple time-slots.

In this article we will implement the following price structure as sample:

• 1 time-slot selected: $10
• 2 time-slots selected: $18
• 3 time-slots selected: $24

Before starting with the main steps, set the services prices to 0. This is the related area:

#1- The first step is to add an additional drop-down with the same number of options than the max number of time-slots allowed in the calendar (each position number in the dropdown will be linked to the related number of slots selected).

#2- The second step is to add options with the total price for each number of time-slots selected (first choice linked to 1 time-slot selected, second choice linked to 2 time-slots selected, ...). See the following screenshot:

#3- Important: Add the styles "linkto_slots_number" , "ahb_service", cp_active and "hide" to link the drop-down field to the number of time-slots selected and to hide the dropdown field (no need to make it visible).

The additional drop-down will appear only in the administration area, it will be hidden form the public website.

#4- When done the three steps above, paste the following script (can be copied below in this page) in the "General Settings >> Edit Scripts" area as displayed in the following image:

The following is the custom script you have to copy and paste into the "Edit Scripts" area:

jQuery(document).one("showHideDepEvent", function(){ (function($) { var fieldId = $(".avoid_overlapping_before").attr("id"); var p = fieldId.split( '_' ), _index = ( p.length > 1 ) ? '_'+p[ 1 ] : '', me = ( typeof $.fbuilder[ 'forms' ] != 'undefined' && typeof $.fbuilder[ 'forms' ][ _index ] != 'undefined' ) ? $.fbuilder[ 'forms' ][ _index ].getItem( p[ 0 ]+'_'+p[ 1 ] ) : null; $("#"+me.name).on("change", function(e, eventInfo) { if (me.allUsedSlots.length>0) { var q = $(".ahbfield_quantity option:selected").index(); $(".linkto_slots_number select option").eq(me.allUsedSlots.length-1).prop("selected", true).change(); } }); })(jQuery); });

Finally check the result in the public booking form, after selecting a quantity the new cost will be displayed in the form. To display the cost remember to check the following settings option:

Feedback about these features will be welcome, feel free to open a support ticket for any question.