Adjust the booking widget to specific number of stations

The common use of this guide is for the Ubisoft’s Escape room games – Escape The Lost Pyramid and Beyond Medusa’s Gate.
Edit your Booking Widget and add the following lines under the “Add HTML before the BODY tag closure” setting (full example on the bottom):

VERSION 2 – use in production together with the booking widget version 6 or newer
Ready to use example (you can simply copy and append it to “Add HTML before the BODY tag closure”):

• <script>
• $('div.container>div.row>div.col-12.col-md-8').removeClass('col-md-8').siblings('.col-md-4').removeClass('col-md-4').find('.card').remove();
• window.svr.htmlOverwrite.duration = function(minutes,selected){
• $('#title .title .dur .dropdown-menu').html('');
• $('#title .title .title_button:first').css('max-width','100%').css('padding','4px 10px')
• }
• $('[data-trans="How many stations"]').closest('.input-group').parent().prependTo('.row.main-content');
• $('[data-trans="How many stations"]').html(i18next.t('Players'));
• window.svr.maxReachedStep = 2;
• people.value = 4;
• window.svr.getValues();
• window.svr.selection.people = 4;
• </script>

VERSION 1 – Kept for backward compatibility. Do not use it with new widgets. 
 
Remove the default player selection option and hide its textual description:

• $(‘[data-trans=”How many stations”]’).closest(‘.input-group’).parent().hide();
• $(‘#number_of_players’).remove();

 
Create a new player selection option under Step 1:

• $(‘<div class=”col-12″><div id=”number_of_players”><label class=”d-block d-sm-none” data-trans=”Players”>Players</label><div class=”input-group”><span class=”input-group-addon d-none d-sm-inline”><h4 data-trans=”Players”>Players</h4></span><select class=”form-control” style=”height:initial;” onchange=”window.svr.changeNumberOfStations(this.value);”><option value=”2″>2 Players</option><option value=”4″ selected>4 Players</option></select></div></div></div>’).prependTo(‘.row.main-content’);

 
Specify the number of players selected by default:

• window.svr.selection.people = 4;

Hide the option for selecting session duration (considering you want to stick to 60 minute session):

• window.svr.htmlOverwrite.duration = function(minutes,selected){
•     $(‘#title .title .dur .dropdown-menu’).html(“”);
• }

 
Add a new functionality that links the new selection with the existing booking functionalities:

• window.svr.changeNumberOfStations = function(cnt){
•     $(‘#title .title .title_button:last’).hide();
•     $(‘#people’).val(cnt);
•     $(‘#finalCharge p’).html(‘<small style=”font-style: italic;”>Recalculating ..</small>’);
•     window.svr.getValues();
•     setTimeout(function(){ window.svr.onDurationChange(); },1500);
• }

 
Make sure the new logic applies at the right time of the booking flow:

• window.svr.onDurationChange = function() {
•     $.each($(‘[onclick^=”duration.value”]’),function(idx,item){
•       if ($(item).attr(‘onclick’).match(‘changeNumberOfStations’) == null)
•         $(item).attr(‘onclick’,’window.svr.changeNumberOfStations(‘+(idx+1)+’);’+$(item).attr(‘onclick’));
•     });
• }

 
Call the new functionality:

• window.svr.maxReachedStep = 2;
• window.svr.changeNumberOfStations(4);

All the custom code have to be placed inside a <script></script> HTML tag.

Ready to use example (you can simply copy and append it to “Add HTML before the BODY tag closure”):

• <script>
•     $(‘#number_of_players’).remove();
•     $(‘[data-trans=”How many stations”]’).closest(‘.input-group’).parent().hide();
•     $(‘<div class=”col-12″><div id=”number_of_players”><label class=”d-block d-sm-none” data-trans=”Players”>Players</label><div class=”input-group”><span class=”input-group-addon d-none d-sm-inline”><h4 data-trans=”Players”>Players</h4></span><select class=”form-control” style=”height:initial;” onchange=”window.svr.changeNumberOfStations(this.value);”><option value=”2″>2 Players</option><option value=”4″ selected>4 Players</option></select></div></div></div>’).prependTo(‘.row.main-content’);
•     window.svr.selection.people = 4;
•     window.svr.htmlOverwrite.duration = function(minutes,selected){
•       $(‘#title .title .dur .dropdown-menu’).html(“”);
•     }
•     window.svr.changeNumberOfStations = function(cnt){
•       $(‘#title .title .title_button:last’).hide();
•       $(‘#people’).val(cnt);
•       $(‘#finalCharge p’).html(‘<small style=”font-style: italic;”>Recalculating ..</small>’);
•       window.svr.getValues();
•       setTimeout(function(){ window.svr.onDurationChange(); },1500);
•     }
•     window.svr.onDurationChange = function() {
•       $.each($(‘[onclick^=”duration.value”]’),function(idx,item){
•         if ($(item).attr(‘onclick’).match(‘changeNumberOfStations’) == null)
•           $(item).attr(‘onclick’,’window.svr.changeNumberOfStations(‘+(idx+1)+’);’+$(item).attr(‘onclick’));
•         });
•     }
•     window.svr.maxReachedStep = 2;
•     window.svr.changeNumberOfStations(4);
• </script>