Table of Contents

Hacking OpenTickets Seat Maps

Users who do not have Flex Passes, should not be able to select reserved seats for Flex Pass holders.

We do not know how we can accomplish setting aside these seats.

Observations from the UI

In the UI, seats that are available have a mouseover effect providing additional details (e.g., price) and a hover effect that suggests they can be clicked. Seats that are blocked do not have these features.

The task will be either:

  • To "trick" the code responsible for building this UI into displaying the blocked seats as though they were available (e.g., by changing the input to some function), or
  • To add new functionality to the display (e.g., via ad hoc JS) to simulate the same (this approach may have more challenges, like how to register the seat selection with the cart, but we don't know enough how this thing works under the hood yet to be sure about that), or
  • Something we haven't thought of yet.

Notes on Potentially Hacking the Seat Selection UI

The UI is an SVG. Seats are represented as <ellipse /> nodes with a zone property identifying the seat. The SVG does not contain <ellipse /> nodes for the seats that are blocked. It may be an easy experiment to add one via JS (or even using browser dev tools) to see how far that gets us.

Note: since we understand it to be a global setting, toggling the "Hidden from frontend" setting for seats is not a viable approach, since the seats will be unlocked for all users.

The SVG has a JS handler on it that listens for clicks. See https://theme-dev.bactheatre.org/wp-content/plugins/qsot-seating/assets/js/frontend/ui.js, approx line 1947. The handler basically extracts the seat ID from the element the user clicked on, fetches price information, and delegates seat reservation. There are also listeners for mousein events, presumably to build the hovering box with price info, etc.

Based on a cursory code review, I'm optimistic we could attach these listeners (or create similar ones) to <ellipse />nodes added to the SVG by custom JS.