Section Theme Styling

Elevate section visuals with custom styling options in this theming demonstration of the SeatmapBookingRenderer’s section appearance capabilities.

The implementation showcases how to use svgSectionStyles to define custom colors, strokes, and text styling for different section states (default, hover, selected, and disabled). The interface provides three control buttons: standard zoom controls (+ and -) for navigation, and a disable sections button (ds) that allows testing of the disabled state styling, giving developers a complete view of how theme settings affect all possible section states.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3
 4const eventId = 'a7f2453a-e00a-4d3a-a62b-335d4e4b389d';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10
11  theme: {
12    svgSectionStyles: {
13      default: {
14        sectionName: {
15          color: '#990000',
16        },
17      },
18      unavailable: {
19        bgColor: '#999',
20        sectionName: {
21          color: '#009900',
22        },
23      },
24      hovered: {
25        bgColor: '#ffff00',
26        stroke: {
27          color: '#0000ff',
28        },
29        cursor: 'pointer',
30        sectionName: {
31          color: '#000099',
32        },
33      },
34      selected: {
35        bgColor: '#0000ff',
36        stroke: {
37          color: '#000000',
38          opacity: 0.4,
39        },
40        sectionName: {
41          color: '#999999',
42        },
43      },
44    },
45  },
46
47  onSectionClick: (sector) => {
48    console.log('onSectionClick', sector);
49  },
50};
51
52const el = document.getElementById('root');
53
54if (el) {
55  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
56
57  renderer.loadEvent(eventId);
58
59  window.disableSvgSectionsByIds = () => {
60    var sections = renderer?.getSvgSectionBySelection();
61    if (!sections) {
62      return;
63    }
64
65    renderer?.disableSvgSectionsByIds(sections.map((section) => section.id));
66  };
67}

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="disableSvgSectionsByIds()">ds</div>
6</div>