Cart

Dive into the event-driven architecture of the SeatmapBookingRenderer with this comprehensive demonstration of interactive capabilities.

Featured interactions include seat events (mouse enter/leave, selection/deselection), sector events, cart changes, and viewport manipulations. The interface includes two zoom control buttons (+ and -) that provide a hands-on demonstration of how viewport events are triggered and processed by the renderer system.

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
12(() => {
13  const root = document.getElementById('root');
14  if (!root) {
15    return;
16  }
17
18  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(root, settings));
19
20  function removeSeatsFromCart() {
21    const seats = renderer.getCart()?.seats;
22
23    if (seats && seats.length > 0) {
24      renderer.removeSeatsFromCartByIds(seats.map((seat) => seat.id!));
25    }
26  }
27  window.removeSeatsFromCart = removeSeatsFromCart;
28
29  renderer.loadEvent(eventId);
30})();

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="removeSeatsFromCart()">r</div>
6</div>