onTicketTypePrompt

Click on a green seat to handle ticket type selection with a browser prompt.

by seatsio

HTML

<script src="https://cdn.seatsio.net/chart.js"></script>
<div id="chart"></div>

CSS

body {
	margin: 0;
	padding: 0;
}

#chart {
	width: 100vw;
	height: 100vw;
}

JavaScript

var chart = new seatsio.SeatingChart({
	divId: "chart",
	workspaceKey: "publicDemoKey",
	event: "smallTheatreEvent",
	pricing: [
		{ category: 1, ticketTypes: [
			{ ticketType: 'Adult', price: 8 },
			{ ticketType: 'Child', price: 12 }
		]},
		{ category: 2, price: 40 },
		{ category: 3, price: 50 }
	],
	onTicketTypePrompt: showTicketTypesDialog
}).render();

	
function showTicketTypesDialog (params, confirmSelection) {
	console.log('showTicketTypesDialog', params)
	
	const ticketType = askForTicketType(params.ticketTypes)
	const object = params.objectToSelect
	console.log(`Selecting ticket type ${ticketType} in ${object.label}`)
	
	confirmSelection(ticketType)
}


function askForTicketType (ticketTypes) {
	const ticketTypeOptions = ticketTypes.map(ticketType => ticketType.ticketType)
	// Using prompt would be bad practice. This is done to keep this example short.
	return prompt(`Choose a ticket type: "${ticketTypeOptions.join('", "')}"`, ticketTypeOptions[0])
}