....Allow your members to select what type of table they're looking for (e.g. cocktail, rooftop, outside, etc.) by providing the table numbers within your dining page.
By adding the following items, you'll be able to enable your members to select which area they would like to dine at. To get started, make a copy of your existing dining reservation page (we want to test your changes first).
In the code, add another dropdown option to choose which area along with the table numbers as such:
<select id="table">
<option value="101,111,112,113,336,777,888" selected="">Dining</option>
<option value="1,14,23,32,501,502,503,605,606,607">Cocktails</option>
</select>
**Please note that if you change your table numbers in Sevenrooms, you need to update this form.
Now make sure that when someone selects this option, it's being appended to the URL to pass in the areas people are interested in.
var tables = $("#table").val();
var goPath = window.location.pathname + '?from_date=' + (dt.getMonth() + 1) + '/' + dt.getDate() + '/' + dt.getFullYear() + '&from_time=' + from_time + '&total_guests=' + $("#total_guests").val() + '&to_date=' + todtstr + '&areas=' + tables + '&type=' + $("#table option:selected").text();Now make sure that the HAPI for your click to reserve button is passing this to the checkout flow.
<a href="/checkout/schedule/{@schedule_item_no@}/slot/-1?start={@slot_start@}&qty={@capacity@}&areas={@areas@}" class="cardBtn" onclick="javascript: myApp.showPleaseWait();">That's it, when they reserve, we'll pass the tables into Sevenrooms to confirm the booking.