6. Submit selected seats
Your ticket buyer has selected seats on the interactive floor plan. Now you need to pass those seats to your server-side code, so you can later on book them via the Seats.io API.
There are 3 options:
- Using a hidden form field (that's generated by the Seats.io code)
- Using a javascript variable on the
seatsio.SeatingChart
object - By keeping track of it yourself (not recommended)
Using selectedObjectsInputName
If you add selectedObjectsInputName:"aFormFieldNameYouChooseYourself"
to the seating chart configuration, the Seats.io Renderer will add a hidden input field with that name to your form. Note that the <div/>
in which you render the chart needs to be embedded in a <form>
tag for this to work, like so:
<form id="myTicketBuyerForm">
<div id="chart"></div>
</form>
<script src="https://cdn-{region}.seatsio.net/chart.js"></script>
<script>
new seatsio.SeatingChart({
divId: 'chart',
workspaceKey: 'your workspace key',
event: 'your event key',
selectedObjectsInputName: 'selectedSeatsField'
}).render();
</script>
Using chart.selectedObjects
new seatsio.SeatingChart({}).render();
returns a seatsio.SeatingChart
object, that has a selectedObjects
property. This is a JavaScript array of strings that contains the selected object labels. We update the value on each select and deselect.
var seatingChart = new seatsio.SeatingChart({
divId: 'chart',
workspaceKey: 'your workspace key',
event: 'your event key'
}).render();
console.log(seatingChart.selectedObjects);
Using onObjectSelected and onObjectDeselected
By listening to the onObjectSelected and onObjectDeselected events, you can keep track of the selected objects yourself in your code.
var selectedSeats = [];
new seatsio.SeatingChart({
divId: 'chart',
workspaceKey: 'your workspace key',
event: 'your event key',
onObjectSelected: function (object) {
// add the selected seat id to the array
selectedSeats.push(object.label);
},
onObjectDeselected: function (object) {
// remove the deselected seat id from the array
var index = selectedSeats.indexOf(object.label);
if (index !== -1) selectedSeats.splice(index, 1);
}
}).render();