Disable Seats by IDs

Learn how to programmatically manage seat availability with this practical demonstration of the SeatmapBookingRenderer’s seat disabling functionality.

By accessing the cart context, specific seats can be disabled by their IDs without resetting the entire selection. The interface features three control buttons: zoom controls (+ and -) for navigating the seatmap, and a disable button (d) that triggers the disableSeatsByIds() function, showcasing dynamic seat state management during runtime.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import './main.css';
 3
 4const eventId = '78c6e0d2-347e-424d-9d7a-ac092655bf56';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10
11  onCartChange: () => {
12    console.log('on Cart Change triggered');
13  },
14};
15
16(() => {
17  const root = document.getElementById('root');
18  if (!root) {
19    return;
20  }
21
22  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(root, settings));
23
24  function disableSeatsByIds() {
25    const seats = renderer.getCart()?.seats;
26
27    if (seats && seats.length > 0) {
28      renderer.disableSeatsByIds(
29        seats.map((seat) => seat.id!),
30        { resetAll: true },
31      );
32    }
33  }
34  window.disableSeatsByIds = disableSeatsByIds;
35
36  renderer.loadEvent(eventId);
37})();

HTML

1<div id="root"></div>
2<div class="zoom-button-list">
3  <div class="zoom-button" onclick="seatmapRenderer.zoomIn()">+</div>
4  <div class="zoom-button" onclick="seatmapRenderer.zoomOut()">–</div>
5  <div class="zoom-button" onclick="disableSeatsByIds()">d</div>
6</div>