Seating
The seat map is what your customers choose their seats on: a theatre's stalls in curved rows, an arena's blocks round the floor, a cinema, a coach or an aircraft cabin, all drawn from a compact layout of sections, rows and seat counts rather than a picture with hot spots. Price zones colour the seats; ticket types, booking fees and the total add up beside the map; sold and held seats cannot be taken; wheelchair spaces come with their companion seats; and a single seat stranded beside an order is caught before checkout.
Choose seats by pointer, with the arrow keys seat by seat, from a list read out to a screen reader, or with "Find seats" for the best ones together. Your page holds each seat on its own server before it is shown as chosen - the element only asks. Twenty thousand seats draw and zoom smoothly, and the same element lays the venue out in edit mode.
A theatre's Saturday night
An invented playhouse with curved stalls, a dress circle, two boxes and wheelchair spaces, about half sold. The page holds each seat as a box office would - about one in fifteen has "just been taken" - and a ten-minute hold counts down once you have seats. Choose adult, child or concession tickets in the summary.
// The element asks; your server holds the seat, or says it has gone.
map.addEventListener('bmxSelect', async event => {
if (event.detail.action !== 'add') return;
event.preventDefault();
const response = await fetch('/api/holds', { method: 'POST', body: JSON.stringify({ seat: event.detail.seat.id }) });
if (response.ok) {
await map.select([event.detail.seat.id]);
map.holdUntil = (await response.json()).expires; // the countdown
} else map.setSeatStatus([event.detail.seat.id], 'sold');
});
An arena, laid out in the editor
Forty blocks in two tiers round a standing floor, as the venue manager sees them before tickets go on sale: drag a block, change its rows and seats, paint a zone, mark wheelchair spaces, undo. Check the layout for anything left unpriced, then put it on sale and choose seats as a customer would.