Eventbrite Multi-Event Ticket Module

Fri, 05/12/2017 - 11:25

I was asked to add the ability to purchase Eventbrite tickets from a website using the Eventbrite ticket widget. The problem is that the customer had a number of events over the course of several months and I knew they would have several more over the years. The Eventbrite widget is complete, but you would need to copy the code for each event. This could be a little tedious, and it didn't seem as elegant having a ton of these ticket iframes loaded into one page.This seemed like an opportunity to create a simple program to automate everything. They didn't really have a budget for me to write something really complex, so I created a really simple script that basically just grabs the event id from a button that they can add easily.

You can find the live version of the module in use here

I created a cleaner and more complex version that can take arguments.
It's available on GitHub here.

The basic method for calling the script is simple:

<link rel="stylesheet" href="/path/to/style.css" />
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/eventbrite.min.js"></script>
<script>
window.onload = function() {
			$(document).ready(function(){ 
				Eb.init();
			});
		}
</script>

The script only needs an HTML element with the class "eb_buytickets" and the event id.

<button class="eb_buytickets" data-eid="34580136118">
     Get Tickets
</button>

but I would advise something a little more elaborate.
Working Example:

My Fake Eventbrite Event

This is fake text about this event that will be taking place on:
M d, YYYY at h:00 AM/PM

My Fake Eventbrite Event

This is fake text about this event that will be taking place on:
M d, YYYY at h:00 AM/PM

The HTML for this demo:

My Fake Eventbrite Event

This is fake text about this event that will be taking place on:
M d, YYYY at h:00 AM/PM

My Fake Eventbrite Event

This is fake text about this event that will be taking place on:
M d, YYYY at h:00 AM/PM