The page where a patron purchases single tickets, subscriptions, and camp registrations is sometimes referred to as the storefront. By editing the stylesheet you can customize the storefront appearance in many ways.

Customizing the Storefront Appearance

Specific stylesheet elements in #store_index that affect the storefront include:

• #show_description styles the specific notes/description associated with the production
• #showdate_long_description styles the block of text associated with the long description, if any, of the specific performance
• #ticket-types is the container that contains all the dropdown menus for selecting the quantity of each ticket type to purchase
• #orderTotal is the container displaying the total order amount as tickets get added to the order. Within it, there is a <label> element that styles the phrase Order Total and a #total input field that styles the amount of the order.

Using the Stylesheet to Hide Certain Ticket Types

On the storefront page when a patron is shopping for single tickets, Audience1st will display all available ticket types that the patron is allowed to purchase. If the patron enters a promo code, then any additional ticket types unlocked by the promo code will be displayed in addition to all of the others that were already displayed.

You can used advanced stylesheet techniques in order to alter this behavior. For example, by editing the stylesheet you could cause Audience1st to only display ticket types that use the specified promo code as soon as the patron enters the promo code.

Here we will look at how to do this. First see this article for information on how to access and update the Audience1st stylesheet.

WARNING: Use this advanced technique at your own risk. Changing the Audience1st stylesheet in this way will override Audience1st’s regular behavior; beware of unintended consequences.

By editing the stylesheet, you can selectively show or hide specific ticket types at purchase time, based on whether the ticket type requires a promo code or not.

The relevant structure of the ticket page is as follows. The container ticket-types has CSS classes identifying the show and showdate ID. Inside that container is a set of form-group wrappers, one for each ticket type that can be purchased for that performance:

<div id="ticket-types" class="show-35 showdate-251">
  <div class="form-group form-row no-promo vouchertype_810">
     <!-- code that allows selecting tickets of this type -->
  </div>
  <!-- similar form-groups for other ticket types -->
</div>

In the above example, the class no-promo indicates that this ticket type does not require entering a promo code to see.

Suppose there is a ticket type whose internal ID is 809 and is visible only if the promo code JETS is entered. When the patron enters that promo code, the class with-promo and the attribute data-promo="JETS" will be added to the ticket-types container, and the ticket types that have become newly visible due to the promo code (809 in the example below) will have the class promo added to their form-group:

<div id="ticket-types" class="show-35 showdate-251 with-promo" data-promo="JETS">
  <div class="form-group form-row promo vouchertype_809">
     <!-- code that allows selecting tickets of this type -->
  </div>
  <div class="form-group form-row no-promo vouchertype_810">
     <!-- code that allows selecting tickets of this type -->
  </div>
  <!-- similar form-groups for other ticket types -->
</div>

Therefore, the following CSS rule would hide all non-promotional ticket types, provided a promo code has actually been entered:

#ticket-types.with-promo  .no-promo  {
  display: none;
}

Notes:

• If the patron has not entered a promo code, the .with-promo class would be absent, so the selector would not apply.
• Similarly, without the qualifier .with-promo on #ticket-types, the hiding of non-promo tickets would happen even if no promo code had been entered, meaning no tickets would be visible at all.

To implement this same behavior but only for specific shows–for example, show ID 9 and 10, but not other shows:

#ticket-types.with-promo.show-9  .no-promo,
#ticket-types.with-promo.show-10 .no-promo   {
  display: none;
}

To implement it at the per-performance level, you can qualify the selectors with .showdate-NNN rather than .show-NNN.

WARNING. If you change your stylesheet in this way and a patron enters an invalid promo code, with-promo will still be present and data-promo will be set to the invalid promo code, so such selectors would still apply. This means a patron who enters a nonexistent promo code may see no tickets at all, and would need to leave the ticket purchase page and return to reset the view.