{"id":298,"date":"2023-02-11T19:28:23","date_gmt":"2023-02-11T19:28:23","guid":{"rendered":"https:\/\/doc.audience1st.com\/?post_type=knowledgebase&#038;p=298"},"modified":"2023-04-20T01:56:43","modified_gmt":"2023-04-20T01:56:43","slug":"customizing-ticket-sales-view","status":"publish","type":"knowledgebase","link":"https:\/\/docs.audience1st.com\/index.php\/user-guide\/customizing-audience1sts-appearance\/customizing-ticket-sales-view\/","title":{"rendered":"Customizing the Ticket Sales View"},"content":{"rendered":"<p>The page where a patron purchases single tickets, subscriptions, and camp registrations is sometimes referred to as the <em>storefront<\/em>. By editing the stylesheet you can customize the storefront appearance in many ways.<\/p>\n<h2 id=\"specific-elements-on-the-main-ticket-sales-page-store_index\">Customizing the Storefront Appearance<\/h2>\n<p>Specific stylesheet elements in #store_index that affect the storefront include:<\/p>\n<ul>\n<li><code class=\"language-plaintext highlighter-rouge\">#show_description<\/code>\u00a0styles the specific notes\/description associated with the production<\/li>\n<li><code class=\"language-plaintext highlighter-rouge\">#showdate_long_description<\/code>\u00a0styles the block of text associated with the long description, if any, of the specific performance<\/li>\n<li><code class=\"language-plaintext highlighter-rouge\">#ticket-types<\/code>\u00a0is the container that contains all the dropdown menus for selecting the quantity of each ticket type to purchase<\/li>\n<li><code class=\"language-plaintext highlighter-rouge\">#orderTotal<\/code>\u00a0is the container displaying the total order amount as tickets get added to the order. Within it, there is a\u00a0<code class=\"language-plaintext highlighter-rouge\">&lt;label&gt;<\/code>\u00a0element that styles the phrase\u00a0<strong>Order Total<\/strong>\u00a0and a\u00a0<code class=\"language-plaintext highlighter-rouge\">#total<\/code>\u00a0input field that styles the amount of the order.<\/li>\n<\/ul>\n<h2>Using the Stylesheet to Hide Certain Ticket Types<\/h2>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>Here we will look at how to do this. First see <a href=\"https:\/\/docs.audience1st.com\/index.php\/user-guide\/customizing-audience1sts-appearance\/cascading-style-sheet\/\">this article<\/a> for information on how to access and update the Audience1st stylesheet.<\/p>\n<p><strong>WARNING:<\/strong> Use this advanced technique at your own risk. Changing the Audience1st stylesheet in this way will override Audience1st&#8217;s regular behavior; beware of unintended consequences.<\/p>\n<p>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.<\/p>\n<p>The relevant structure of the ticket page is as follows. The container\u00a0<code class=\"language-plaintext highlighter-rouge\">ticket-types<\/code>\u00a0has CSS classes identifying the show and showdate ID. Inside that container is a set of\u00a0<code class=\"language-plaintext highlighter-rouge\">form-group<\/code>\u00a0wrappers, one for each ticket type that can be purchased for that performance:<\/p>\n<div class=\"language-html highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code><span class=\"nt\">&lt;div<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"ticket-types\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"show-35 showdate-251\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"form-group form-row no-promo vouchertype_810\"<\/span><span class=\"nt\">&gt;<\/span>\r\n     <span class=\"c\">&lt;!-- code that allows selecting tickets of this type --&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n  <span class=\"c\">&lt;!-- similar form-groups for other ticket types --&gt;<\/span>\r\n<span class=\"nt\">&lt;\/div&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>In the above example, the class\u00a0<code class=\"language-plaintext highlighter-rouge\">no-promo<\/code>\u00a0indicates that this ticket type does\u00a0not\u00a0require entering a promo code to see.<\/p>\n<p>Suppose there is a ticket type whose internal ID is 809 and is visible only if the promo code\u00a0<code class=\"language-plaintext highlighter-rouge\">JETS<\/code>\u00a0is entered. When the patron enters that promo code, the class\u00a0<code class=\"language-plaintext highlighter-rouge\">with-promo<\/code>\u00a0and the attribute\u00a0<code class=\"language-plaintext highlighter-rouge\">data-promo=\"JETS\"<\/code>\u00a0will be added to the\u00a0<code class=\"language-plaintext highlighter-rouge\">ticket-types<\/code>\u00a0container, and the ticket types that have become newly visible due to the promo code (809 in the example below) will have the class\u00a0<code class=\"language-plaintext highlighter-rouge\">promo<\/code>\u00a0added to their form-group:<\/p>\n<div class=\"language-html highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code><span class=\"nt\">&lt;div<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"ticket-types\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"show-35 showdate-251 with-promo\"<\/span> <span class=\"na\">data-promo=<\/span><span class=\"s\">\"JETS\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"form-group form-row promo vouchertype_809\"<\/span><span class=\"nt\">&gt;<\/span>\r\n     <span class=\"c\">&lt;!-- code that allows selecting tickets of this type --&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n  <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"form-group form-row no-promo vouchertype_810\"<\/span><span class=\"nt\">&gt;<\/span>\r\n     <span class=\"c\">&lt;!-- code that allows selecting tickets of this type --&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n  <span class=\"c\">&lt;!-- similar form-groups for other ticket types --&gt;<\/span>\r\n<span class=\"nt\">&lt;\/div&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>Therefore, the following CSS rule would\u00a0hide\u00a0all non-promotional ticket types,\u00a0provided\u00a0a promo code has actually been entered:<\/p>\n<div class=\"language-css highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code><span class=\"nf\">#ticket-types<\/span><span class=\"nc\">.with-promo<\/span>  <span class=\"nc\">.no-promo<\/span>  <span class=\"p\">{<\/span>\r\n  <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p><strong>Notes:<\/strong><\/p>\n<ul>\n<li>If the patron has not entered a promo code, the\u00a0<code class=\"language-plaintext highlighter-rouge\">.with-promo<\/code>\u00a0class would be absent, so the selector would not apply.<\/li>\n<li>Similarly,\u00a0<em>without<\/em>\u00a0the qualifier\u00a0<code class=\"language-plaintext highlighter-rouge\">.with-promo<\/code>\u00a0on\u00a0<code class=\"language-plaintext highlighter-rouge\">#ticket-types<\/code>, the hiding of non-promo tickets would happen even if\u00a0no\u00a0promo code had been entered, meaning no tickets would be visible at all.<\/li>\n<\/ul>\n<p>To implement this same behavior but only for specific shows\u2013for example, show ID 9 and 10, but not other shows:<\/p>\n<div class=\"language-css highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code><span class=\"nf\">#ticket-types<\/span><span class=\"nc\">.with-promo.show-9<\/span>  <span class=\"nc\">.no-promo<\/span><span class=\"o\">,<\/span>\r\n<span class=\"nf\">#ticket-types<\/span><span class=\"nc\">.with-promo.show-10<\/span> <span class=\"nc\">.no-promo<\/span>   <span class=\"p\">{<\/span>\r\n  <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>To implement it at the per-performance level, you can qualify the selectors with\u00a0<code class=\"language-plaintext highlighter-rouge\">.showdate-NNN<\/code>\u00a0rather than\u00a0<code class=\"language-plaintext highlighter-rouge\">.show-NNN<\/code>.<\/p>\n<p><strong>WARNING.<\/strong> If you change your stylesheet in this way and a patron enters an invalid promo code, <code class=\"language-plaintext highlighter-rouge\">with-promo<\/code>\u00a0will still be present and\u00a0<code class=\"language-plaintext highlighter-rouge\">data-promo<\/code> will be set to the invalid promo code, so such selectors would still apply. <strong>This means a patron who enters a nonexistent promo code may see no tickets at all,<\/strong> and would need to leave the ticket purchase page and return\u00a0to reset the view.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u00a0styles the specific notes\/description associated with the production #showdate_long_description\u00a0styles [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","knowledgebase_cat":[16],"_links":{"self":[{"href":"https:\/\/docs.audience1st.com\/index.php\/wp-json\/wp\/v2\/knowledgebase\/298"}],"collection":[{"href":"https:\/\/docs.audience1st.com\/index.php\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/docs.audience1st.com\/index.php\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/docs.audience1st.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.audience1st.com\/index.php\/wp-json\/wp\/v2\/comments?post=298"}],"version-history":[{"count":6,"href":"https:\/\/docs.audience1st.com\/index.php\/wp-json\/wp\/v2\/knowledgebase\/298\/revisions"}],"predecessor-version":[{"id":549,"href":"https:\/\/docs.audience1st.com\/index.php\/wp-json\/wp\/v2\/knowledgebase\/298\/revisions\/549"}],"wp:attachment":[{"href":"https:\/\/docs.audience1st.com\/index.php\/wp-json\/wp\/v2\/media?parent=298"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/docs.audience1st.com\/index.php\/wp-json\/wp\/v2\/knowledgebase_cat?post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}