Event Tickets Plus Shortcode and Modal Window

The Events Tickets Plus plugin by Modern Tribe is a nice way to sell tickets to your event using Easy Digitial Downloads or Woocommerce. This plugin works in conjunction with Event Tickets, also by Modern Tribe, to sell tickets and manage attendees to your events.

Out of the box, the Events Tickets Plus plugin will automatically insert the ticket sales form on the page/post/event where the tickets are defined. The ticket purchase form is positioned either above or below the page content, depending on the setting selected on the Events Calendar "Tickets" setting page. For my use, I wanted a popup modal window containing the ticket purchase form that I could insert anywhere. For this I developed a shortcode to insert the ticket form at will, and used in conjunction with a Fancybox plugin achieved the modal window popup. In my case, I used Easy Fancybox, but any plugin or theme that includes the Fancybox script should work as well.

Creating the shortcode involves a small script that invokes the Event Tickets ticket form. Since I want it to be called from any page, I include a variable to specify a post ID.

/**************************************
** TRIBE TICKETS MODAL WINDOW SHORTCODE
*/
function include_tickets($atts){
    global $post;
    $needs_restore = false;
    $atts = shortcode_atts(
            array(
              'post_id' => $post->ID,
            ), $atts
           );

    if ($atts['post_id'] != $post->ID) {
         $post = get_post( $atts['post_id'], OBJECT );
         setup_postdata( $post );
         $needs_restore = true;
     }
     ob_start();
     Tribe__Tickets_Plus__Commerce__EDD__Main::get_instance()->front_end_tickets_form('');
     $ret = ob_get_contents();
     ob_end_clean();
     if ($needs_restore) wp_reset_postdata();
     return $ret;
 }
 add_shortcode( 'tickets', 'include_tickets' );

If post_id is not specified, the shortcode will default to showing the tickets for the current post/page/event. This example is using Easy Digital Downloads to handle the sale. When using Woocommerce instead, the appropriate call is:

 Tribe__Tickets_Plus__Commerce__WooCommerce__Main::get_instance()->front_end_tickets_form('');

By adding this shortcode to your theme (or using a plugin that allows you to insert PHP code) you will now have the ability to insert the ticket sale form anywhere.

To have it display in a modal window, the shortcode should be wrapped in the standard Fancybox inline content tags.

<a class="fancybox" href="#tickets">Buy tickets</a>
<div style="display: none;">
<div id="tickets" class="ilc-content">[tickets post_id=40]</div>
</div>

Within the modal window, a user can adjust the number of tickets of each type and enter the related fieldset values. Clicking "add to cart" will redirect to the checkout page as usual.

I like to create a separate page that contains the ticket definitions. This page will never be displayed directly, it is only used to define the tickets and provide a post_id to use in the shortcode.

Sample Screenshot

Sample Modal Window Open