Disable General Admission Sections

Control access to General Admission (GA) areas with this practical demonstration of section management in the SeatmapBookingRenderer.

The interface features four control buttons: standard zoom controls (+ and -) for navigation, a disable button (f) that makes specific GA sections unavailable, and an enable button (rf) that restores access to previously disabled sections. Ideal for managing venue capacity or restricting access to certain areas during an event.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3
 4const eventId = 'c318315d-dcf0-4d1a-8f05-3c7c8e5f1c6d';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10};
11
12const el = document.getElementById('root');
13
14if (el) {
15  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
16
17  renderer.loadEvent(eventId);
18
19  window.disableSectionsByIds = () => {
20    renderer.disableSectionsByIds([2166710, 2163504]);
21  };
22
23  window.enableSectionsByIds = () => {
24    renderer.enableSectionsByIds();
25  };
26}

HTML

1<div id="root"></div>
2<div class="ZoomButtonList">
3  <div class="ZoomButton" onclick="seatmapRenderer.zoomIn()">+</div>
4  <div class="ZoomButton" onclick="seatmapRenderer.zoomOut()">–</div>
5  <div class="ZoomButton" onclick="disableSectionsByIds()">f</div>
6  <div class="ZoomButton" onclick="enableSectionsByIds()">rf</div>
7</div>