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 API.
There are 4 ways to do this.
via selectedObjectsInputName.
If you addselectedObjectsInputName:"aFormFieldNameYouChooseYourself"to the seating chart configuration, the Seats 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.via chart.selectedObjects.
new seatsio.SeatingChart({}).render();returns a seatsio.SeatingChart object, that has aselectedObjectsproperty. This is a JavaScript array of strings that contains the selected object labels. Of course, we update the value on each select and deselect.via chart.listSelectedObjects().
new seatsio.SeatingChart({}).render();returns a seatsio.SeatingChart object on which you can calllistSelectedObjects(). This returns a Promise that resolves to the list of selected objects.by listening to onObjectSelected and onObjectDeselected events, and keeping track of the selected objects yourself.
Multi-level pricing
If you're using multi-level pricing, this means you have multiple ticket types (and associated price points) for a single category. For example, in Category A, a child seat is 5$ and an an adult seat is 10$.
This means you'll probably want to retrieve not just the selected seat ID (e.g. SectionX-A-1), but also the selected ticket type (e.g. "adult").
In that case, you can't use selectedObjectsInputName nor chart.selectedObjects, as they contain just the seat IDs.
Instead, you should use chart.listSelectedObjects(callback) . The callback takes the list of selected objects as a parameter, and the objects in the list have a selectedTicketType property, indicating the ticket type:
<div id="chart"></div>
<script type="text/javascript" src="https://cdn.seatsio.net/chart.js"></script>
<script>
var chart = new seatsio.SeatingChart({
divId: "chart",
publicKey: "publicDemoKey",
event: "smallTheatreEvent2",
pricing: [
{'category': 1, 'ticketTypes': [
{'ticketType': 'adult', 'price': 30},
{'ticketType': 'child', 'price': 20}
]},
{'category': 2, 'ticketTypes': [
{'ticketType': 'adult', 'price': 40},
{'ticketType': 'child', 'price': 30},
{'ticketType': '65+', 'price': 25}
]},
{'category': 3, 'price': 50}
],
priceFormatter: function(price) {
return '$' + price;
}
}).render();
function printSelectedObjects() {
chart.listSelectedObjects(
selectedObjects => console.table(selectedObjects)
);
}
</script>
<button onClick="printSelectedObjects();">
Print Selected Seats to console
</button>