External Price Integration

Seamlessly incorporate dynamic pricing data with this integration demonstration of the SeatmapBookingRenderer’s external price capabilities.

The implementation shows how to set custom price information for specific seats after the initial event has loaded, enabling real-time price updates from external systems. The interface provides four control buttons: standard zoom controls (+ and -) for navigation, a filter button (f) that highlights seats with custom pricing, and a remove filter button (rf) that restores the default view, allowing developers to visualize and test how external price data affects the seatmap display.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import { ISeatPriceScheme } from '../../models';
 3import '../main.css';
 4
 5const eventId = '86668be3-ea3b-4e81-80bc-d147d82c5874';
 6const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 7
 8const settings: IBookingRendererSettings = {
 9  env: 'stage',
10  publicKey,
11};
12
13const el = document.getElementById('root');
14
15if (el) {
16  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
17
18  renderer.loadEvent(eventId).then(() => {
19    const data: ISeatPriceScheme[] = [
20      { price: 13, priceId: 13, seatKey: '1384602;;12;;1', id: 506705 },
21      { price: 1313, priceId: 1313, seatKey: '1384602;;12;;2', id: 506706 },
22    ];
23    renderer.setExternalPrices(data);
24  });
25
26  window.removeFilter = () => {
27    renderer.removeFilter();
28  };
29}

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="filterSeatsByIds()">f</div>
6  <div class="ZoomButton" onclick="removeFilter()">rf</div>
7</div>