Booking Widget – disable opening / closing hours from booking
Due to multiple reasons (as example, having a lot of foot traffic), you may want to hide periods of the day from your booking widgets.
To avoid creating new experience type with different hours and extra logic that may complicate your setup, you can simply extend the booking widget with some custom code. To make it even easier for you, we already built that code and simplified it to the possible minimum.
You may want to hide times based on day of the week or based on experience type (or both together). For that purpose, you have to build your logic and few lines of javascript code.
Considering the days of week are:
- Monday => 1
- Tuesday => 2
- Wednesday => 3
- Thursday => 4
- Friday => 5
- Saturday => 6
- Sunday => 7
If you want to hide options from the widgets for only Monday + Thursday + Sunday, then you’ll have to use the following combination: 1,4,7
If it is to apply for Monday to Thursday, then use: 1,2,3,4
Next, you need your experience type ID (can be found on the Experience Types management page). Let say you work with the default “Immersive” experience type => 1
Then, your rule will looks like this:
- 1_1,4,7 => the _ character is used as a separator between the experience type and the days of the week
- 1 => in this case, you don’t have any specified days, so we assume your rule apply everyday
- *_1,2,3,4 => applies for ALL experience types between Monday ot Thursday
Note: you can’t list multiple experience types separated by comma. You have to create multiple rules instead. You can use asterisk (*) to apply the rule for all your experience types
What the actual code looks like:
Default line (no changes on it):
window.svr.hideTimes = new Object(); ['hide_before','hide_after'].forEach(function(i){ window.svr.hideTimes[i] = new Object(); });
Your rules:
window.svr.hideTimes["hide_before"]["*_1,2,3,4"] = "13:00";
window.svr.hideTimes["hide_before"]["1"] = "14:00";
window.svr.hideTimes["hide_after"]["*"] = "20:00";
All your rules have to be enclosed in a <script> tag. You also have to load the actual custom logic:
<script src="//api.lbvr.net/widgetPlugins/skipTimeOptions.js" crossorigin="anonymous"></script>
Examples 1) If you don’t want to accept bookings before 1pm and after 8pm:
- <script>
window.svr.hideTimes = new Object(); ['hide_before','hide_after'].forEach(function(i){ window.svr.hideTimes[i] = new Object(); });
window.svr.hideTimes["hide_before"]["*"] = "13:00";
window.svr.hideTimes["hide_after"]["*"] = "20:00";
- </script>
<script src="//api.lbvr.net/widgetPlugins/skipTimeOptions.js" crossorigin="anonymous"></script>
Example 2) To skip late booking (after 6pm) for the Immersive experience type during the busy days (Friday to Sunday):
- <script>
window.svr.hideTimes = new Object(); ['hide_before','hide_after'].forEach(function(i){ window.svr.hideTimes[i] = new Object(); });
window.svr.hideTimes["hide_after"]["*_5,6,7"] = "18:00";
- </script>
<script src="//api.lbvr.net/widgetPlugins/skipTimeOptions.js" crossorigin="anonymous"></script>
You need to append the final code to the “Add HTML before the BODY tag closure” option under the Booking Widget settings (the Edit button).