There are many naming conventions for adding a merchandise button to the online ticketing site. Some organizations add a Shop button, others a Merchandise button and others a Rental button. The name of the button depends on the use of the resource module in Theatre Manager and the content to be accessed. The icon for the button may also vary depending on the buttons use. Options for the icon can be found on the Font Awesome website. We encourage you to use the naming convention and icon that work best for your organization.

Adding the Code

1. Open the tmnavButton.html page

   The page tmnavButton.html is located in the WebPagesEN/TMtemplates folder.

2. Add the following HTML to the page:

   <li>  
      <a href="<field>F_HTML_FIREWALL</field>login?merchandise=0"> 
      <i class="fa fa-shopping-cart"> 
      </i> 
         Merchandise
      </a> 
   </li> 
   

The recommended location would be after the Tickets, Gift Certificates and Donation buttons and before the Subscription button.

There are fields in the Notes tab of a Donation that can be added to the tmDonationHiddenFields.html so they appear on the TMdonation.html page in order to collect more details about the donation. The example below accesses the Donor#4 field. This is a text field. The patron can type information into the field within the online sales and the details will populate in the Donor#4 field in Theatre Manager once the Order is complete.

This process includes web page editing. If you have a web designer on hand, they can perform these edits. If you wish to contract with Arts Management Systems to perform these or any customizations for you, please contact the Support Team at support@artsman.com

Adding the coding to the web page.

1. Select the web page you wish to add the field to.
   The most commonly used page is tmDonationHiddenFields.html.


2. Add the following HTML to the page:

    

   <div class="form-group">
   <label for="DD_FLD4"> In Memory of...
   </label>
   <input class="form-control" id="DD_FLD4" maxlength="100" name="DD_FLD4" type="text" value="<field>DD_FLD4</field>"/>
   </div>

 

3. Test:
   • The field appears in the correct location within the web page.
   • The text populates into the correct field in Theatre Manager when a Donation is added online.

This web page provides instructions for:

• Changing the default pageHeader or ticketAd for all print at home tickets
• Creating a custom pageHeader or ticketAd for all performances of a single EVENT
• Creating a custom pageHeader or ticketAd for a single PERFORMANCE

Changing the default footer and/or header for ALL print at home tickets

The easiest way to update the header and/or footer for a print at home ticket is to create new files and place them into the WebPagesEN >> tmGifs folder.

• pageHeader.gif - is the name of the page header file. In the example above, it is 75 pixels high and 700 pixels wide.
• ticketAd.png - is the name of the Ad at the bottom of the page. The sample image is 200 pixels high and 700 pixels wide.

In general, the width of each of the images should remain around 700 pixels. The height of the images can vary as long a the total height of both images causes the print at home ticket to remain on one page. You could, for example, make the top image 50 pixels high and use the remaining pixels in the lower area.

The sample pages were crated with conservative heights. You could probably get away with a total of 400 pixels or more in height between the header and footer.

Changing the footer and/or header for a SPECIFIC EVENT

If you want to change the header or footer for a single event, you can create a web page that over-rides the header and/or footer. This allows you to have:

• specific sponsors or instructions in the 'ticketAd.png' for an event or
• a different header for your mainstage, or classes, or inventory or streaming events if you wish.

As an example, let say you want to change the header (and/or) footer for only event 109 (See No Evil).

Changing the footer and/or header for a SPECIFIC PERFORMANCE

If you want to change the header or footer for a single performance within the event, you can create a web page that overrides the header and/or footer. This allows you to have:

• specific sponsors or instructions in the 'ticketAd.png' for the performance or
• a different header for a performance such as the final performance of a class, or for a touring or streaming performance

	Print at home tickets must be enabled in company preferences and for specific events before a patron can print them.
	In the instructions below, the names of images and files are case sensitive. Please make sure they match exactly.

The lines below are an example of how to create a button that will apply a specific Coupon Code to the online cart. This button can be added to any page within the online sales. It would most commonly appear on the TMtickets.html page or the TMcart.html page.

This process includes web page editing. If you have a web designer on hand, they can perform these edits. If you wish to contract with Arts Management Systems to perform these or any customizations for you, please contact the Support Team at support@artsman.com

Adding the coding to the web page.

1. Select the web page you wish to add the field to.
   The most commonly used page is TMtickets.html.


2. Add the following HTML to the page:

    

   <form action="<field>F_HTML_FIREWALL</field>online" METHOD=POST>
   <input class="btn btn-success" name="btnCouponAccept" onclick="process()" type="submit" value="Click To Receive Our Special Promotion"/>
   <input type="hidden" id="CH_CODE" name="CH_CODE" value="1234">
   <input name='param' type='hidden' value ='altbtn=btnGetEventList'>
   </form>

 

3. Ensure that:
   • You uncomment the div statement.
   • You change the ’1234’ to the proper coupon code value from within Theatre Manager.
   • You change the ‘Click To Receive Our Special Promotion’ to reflect the text you wish to use on the button.

The Event Buy options can be edited and displayed in two different ways. The two options for the 'Buy' button when purchasing Events online are detailed below. We have the conventional 'Buy/Reserve' option;

There is also the option to change that display to show both the Date and Time within the Buy Button itself, option example below.

Adding the Code

Options for editing the Buy button can be found by accessing and editing the rowTicketEventName.html.

If you want to have a 'calendar' like date on the right of the list of Events, then uncomment rowTicketEventCalendarButton.html, and comment rowTicketEventCalendarDate.html.

 



 

You will need to edit tmScripts/styleCal.html

and either uncomment/comment the include for the customCal.css to match what you did above.

The lines below are an example of a button that will add a specific member type to the cart with a fixed value and quantity. This button can be added to any page within the online sales. It would most commonly appear on the TMpass.html page or the TMcart.html page.

This process includes web page editing. If you have a web designer on hand, they can perform these edits. If you wish to contract with Arts Management Systems to perform these or any customizations for you, please contact the Support Team at support@artsman.com

Adding the coding to the web page.

1. Select the web page you wish to add the field to.
   The most commonly used page is TMpass.html.


2. Add the following HTML to the page:

    

   <div align="right">
   <form action="<field>F_HTML_FIREWALL</field>online" method="POST" role="form">
   <input name="MT_SEQ" type="hidden" value="23"/>
   <input name="PS_QUANTITY" type="hidden" value="1"/>
   <input class="btn btn-success" name="btnReservePass" onclick="process()" type="submit" value="Purchase/Renew a Voting Membership for $150"/>
   </form>
   </div>

 

3. Ensure that:
   • The HTML is outside ALL OTHER FORMS on the page you add it to.
   • You change the '23' to the proper member type sequence number from within Theatre Manager.
   • You change the 'Purchase/Renew a Voting Membership for $150' to reflect the text you wish to use on the button.

The html code below will provide a single option for pricing rather the the price code drop down list that is currently a part of the online sale pages. This text most commonly would effect the TMticketsPrice_MapDefault.html and TMsubscriptionPriceMapDefault.html pages.

<input name=SC_DESCRIPTION type=hidden value="<field>F_HTML_PROMOTIONS_LIST.1.SC_SEQ</field>>
<field>F_HTML_PROMOTIONS_LIST.1.PC_SEQ</field>
<field>F_HTML_PROMOTIONS_LIST.1.SCD_ORIGINAL_SC_SEQ</field>
<field>F_HTML_PROMOTIONS_LIST.1.SCD_ORIGINAL_PRICE_CODE</field>
<field>F_HTML_PROMOTIONS_LIST.1.SCD_SAVINGS</field>
<field>F_HTML_SELECTED</field>
<field>pick(D_WEB_SHOW_PROMOTION,'',con(F_HTML_PROMOTIONS_LIST.1.SC_DESCRIPTION,' '))</field>
<field>pick(D_WEB_SHOW_PRICE_CODE,'',con(F_HTML_PROMOTIONS_LIST.1.PC_DESCRIPTION,' '))</field><field>F_HTML_PROMOTIONS_LIST.1.PS_TOTAL_COST</field>

When setting up an event, that is not a Course or Reserved seating performance, the General Admission (Festival Seating) Sales Method is used. This allows for flexibility in capacity. It is commonly used for Live Stream or Pre Recorded videos. This poses a challenge when purchasing online as the default web pages display arrival notes that do not apply to Live events.

Hiding these notes requires created a customized web page referencing the Map Sequence number from Theatre Manager and the Sales Method. Below are the steps for removing the box containing the text from the page. Alternatively, a custom page containing notes specific to the streaming event could be created and added in place of the existing general admission arrival notes.

The steps below assume a basic understand of HTML and web page editing. Please contact your web designer should you need assistance with completing web page edits.

Finding The Map Sequence Number

1. Open the Venue List window in Theatre Manager.

   Click here for steps on how to access the Venue List window.

2. Double-click on the Venue in the list to open it.

   

3. Double-click the map in the right column.

   

4. Take note of the Pricing Map number.

   

Create A Custom Web Page

The page containing the arrival notes is the TMticketsSection_MapDefaultf.html page located in the tmMaps folder. The " f " at the end of the page name indicates the Festival Seating page. This is the page that requires customization.

1. Download the latest default web pages.

   https://gitlab.artsman.com/_public/tmresponsivewebpages

2. Navigate to the /1/WebPagesEN/tmMaps folder.

   

3. Copy the TMticketsSection_MapDefaultf.html to the organizations /WebPagesEN/tmMaps folder.

   

4. Delete the word Default from the name of the page and replace it with the Pricing Map Number being extra careful not to remove the " f " at the end of the title.

   

Editing The Web Page

The final step is to edit the web page. The steps below outline how to remove the notes from the page.

1. Open the Custom Web Page from above using a tool like NotePad++ or BBEdit.

   

2. Scroll down to Line 53.

   

3. Comment out the include statement for the generalAdmissionArrivalNotes.html.

   

There are two groups of buttons:

1. Menu Navigation Buttons
2. Data Submit/Navigation Buttons

The menu Navigation buttons reside within the TMtemplates/tmnavButtons.html file, and are dynamically imported into each page via the <include> command. The command looks like:

<!--#include virtual="TMtemplates/tmnavButtons.html" -->

and creates buttons that look like:

Since buttons are subject to style changes, we are able to use the Bootstrap Style Sheets to make them fit whatever concept your site incorporates, such as:

These buttons default to the bootstrap stylesheets for the 'nav navbar-nav' class.and can be enhanced in the custom.css style sheet

Data Submit/Navigation Buttons

The other buttons in each page serve different purposes by sending data to the database. These buttons work exactly the same way as the menu buttons only they allow Theatre Manager to receive the data that has been entered into the page and then load a new page page based on that data. An example of this would be to click on the Buy Tickets button which will take the patron to the TMtickets.html page allowing you to select a performance to buy tickets for. The Data Submit buttons will look like the following (although the words may vary)

The Data Submit buttons default to the stylesheets for the 'btn' class and can be modified with 'btn-success', 'btn-warning', 'btn-info' and others such as 'btn-small'

Buttons Commands

This is a list of the button commands that Theatre Manager requires. They are entered as the name="xxx" portion of each input tag.

These commands cannot be altered.

• btnLogin
• btnLoginAccount
• btnLoginFromDetail


• btnHome
• btnHistoricalCart
• btnHistoricalCartDetail


• btnAccount
• btnAccountRequest
• btnAccountAdd
• btnAccountUpdate


• btnPassword
• btnPasswordCancel
• btnPasswordAccept
• btnPasswordRequest
• btnPasswordSend


• btnMailList
• btnMailListAdd
• btnMailListRemove


• btnTicket
• btnGetEventRange - Deprecated. use btnGetEventList instead. This button uses btnGetEventList anyway
• btnGetEventAll - Deprecated. use btnGetEventList instead. This button uses btnGetEventList anyway
• btnGetEventList
• btnSelectEvent
• btnBestAvailCancel
• btnBestAvail
• btnReserveCancel
• btnReserveTicket


• btnPass
• btnReservePass
• btnPassAmountCancel
• btnPassAmountAccept


• btnDonation
• btnDonationAccept


• btnCart
• btnCartRemoveItem
• btnMailFeeAdd


• btnCheckout
• btnCheckoutAccept


• btnLogout
• btnLogoutCancelOrder

When purchasing a ticket online a link can be added offering the patron an opportunity to see the view from their selected seats prior to adding tickets to their cart. This option requires some setup in order to work successfully online.

Once the setup is in place, the seat view button will become available. Clicking the button will open a new tab in the browser displaying the seat view image.

Adding the Seat View Image

1. Take a picture from each seat or from one seat that will represent multiple seats inside the venue.
2. On the Web Listener computer, create a tmSeatView folder inside the WebPagesEN/tmGifs folder to store the seat view images.
3. Place all the seat view images into the tmSeatView folder ensuring the naming convention for each image is clear.

Updating the Theatre Map

1. In Theatre Manager, open the Theatre Map.

   

   For details on how to access the Theatre Map window, click here.

2. Select the Seat Names tab.

   

   For more information on the Seat Names tab, click here.

3. Update the far right Seat View column next to each seat with the name of the seat view image placed in the tmSeatView folder above. The column should contain the full name of the seat view image including the extension. You can use the same image for a row or area of the venue if the seat view doesn't change that much. Examples:

   If you:

   • use your smart phone or digital camera to take a picture from the middle of row 'H' on the left of the theatre, that image could represent the view from all of row 'H' and perhaps even row 'J' and 'K'.
   • Retrieve that image from your camera and reduce its physical file size so that it is about 50 to 75K (at most - since most cameras take at least 4 megabit pictures, and sharply reducing the image size is important for web performance).
   • You might rename that file ViewFromRowHJK.jpg so that you know what it is at a glance
   • Place that picture into the tmSeatview folder described above
   • put the name of the file ViewFromRowHJK.jpg into the Seat View column for all the seats in rows 'H', 'J', and 'K'.
   • repeat for the next view from a seat picture you take of the venue
   You might find that a one or two dozen pictures might be enough to give the audience a good idea of the view from the seat. You can take this as far as you want -- one of our venues have built 360 degree seating views - but thats more work.
4. Save and close the Map.

Editing the Seat View Web Page

1. Copy the tmViewFromSeat.html web page into the WebPagesEN/tmMaps folder.
2. Edit the tmViewFromSeat.html page using a tool like NotePad++ or BBedit.
3. Update Line 8 with the desired text to appears as the link online.

Once the above steps are complete, restart the Web Listener to clear any previously cached web pages.

The default appearance for unavailable seats online is the FontAwesome icon of a person. When a map contains many small seats this may not be ideal as the people might appear to overlap. It may be more desirable to have the unavailable seats appear in a solid colour (or other icon) separate from available seats and suggested seats.

To make this change you will want to edit the tmPickYourSeatMapDisplay.html web page. Locate line 43, it should look like this:

<object class="embed-responsive-item" data="<field>F_HTML_SEATMAP</field>&reserved_colour=00FF00&reserved_only=false&format=pick&unavailable_color=FFFFFF &unavailable_text=&seat_font=FontAwesome&seat_font_load=cdn" id="venue_map">

Change Line 43 to be:

<object class="embed-responsive-item" data="< field>F_HTML_SEATMAP< /field>&reserved_colour=00FF00&reserved_only=false&format=pick&unavailable_color=000000&unavailable_text=​" " id="venue_map">

This will remove the people (seat_font=FontAwesome&seat_font_load=cdn) and make the sold seats appear black (unavailable_color=000000). The colour of the unavailable seats can be updated to the desired HEX colour.

For additional features regarding changing the map online please click here.

• rowTicketReserved.html and
• rowTicketFestival.html

This process includes web page editing. If you have a web designer on hand, they can perform these edits. If you wish to contract with Arts Management Systems to perform these or any customizations for you, please contact the Support Team at support@artsman.com

Edit the code on the web page

1. Select the web page to edit.
   The most commonly used pages are rowTicketReserved.html, rowTicketFestival.html, and rowTicketCourse.html.


2. Locate the following HTML on the page:

    

   <select class="form-control" id="SC_DESCRIPTION" name="SC_DESCRIPTION" size="1">

 

3. Edit the following
   • Change the size="1" to the number of lines you wish see to displayed.
   • The sample above shows a size="3" to show 3 price lines.

A button, directing you to a select list of Performances, can be created in the navigation buttons at the top of the online sales windows. This button can be used for Courses, Opening Nights, Special Events or other performances where you want to list a select group of Performances.

The key for this button is flagging the Performances with the same reference and using that reference in the button to pull the desired shows. The setup requires editing the performances and adding the button to the online sales.

To flag the performances, you perform the following steps:

1. Click the Event button in the main theare manager tool bar.
2. Search for and open the desired Event.

   

3. Select the Performance tab.

   Open the desired Performance.

   

4. Select the Web Settings tab, and enter a value in the Performance Flag field.

   

   In our example we have used the letter T.

5. Save and close the window.

Adding The Button

A button can be added to the existing buttons across the top on the online sales window. Edit the tmnavbuttons.html page.

This process includes web page editing. If you have a web designer on hand, they can perform these edits. If you wish to contract with Arts Management Systems to perform these or any customizations for you, please contact the Support Team at support@artsman.com

Adding the coding to the web page.

1. Select the web page you wish to add the field to.
   The page to edit is tmnavButtons.html.


2. Add the following HTML to the page:

    

   <li>
   <a href="<field>F_HTML_FIREWALL</field>login?event=0&search=PB_PERF_FLAG='T'">
   <i class="fa fa-ticket">
   </i>
   Special Performances
   </a>
   </li>

 

3. Edit the following
   • You change the 'Special Performances' text to reflect the text you wish to use for the button.
   • Update the letter 'T' to match the letter used when setting up the Performances

A button can be added to the tmnavButtons.html which provides a link directly to courses currently available for sale online.

This process includes web page editing. If you have a web designer on hand, they can perform these edits. If you wish to contract with Arts Management Systems to perform these or any customizations for you, please contact the Support Team at support@artsman.com

Adding the coding to the web page.

1. Select the web page to edit.
   The page to edit is tmnavButtons.html.


2. Add the following HTML to the page:

    

   <li>
   <a href="<field>F_HTML_FIREWALL</field>login?event=0&search=PB_SALES_METHOD='6'">
   <i class="fa fa-ticket">
   </i>
   Theatre Classes
   </a>
   </li>

 

3. Edit the following
   • Change the 'Theatre Classes' text to reflect the text you wish to use for the button.

Sales Methods

Buttons can be created for all 7 types of Sales Methods. The most common online options are:

• Sales Method 1 - Festival/General Seating
• Sales Method 2 - Reserved Seating
• Sales Method 3 - Inventory
• Sales Method 6 - Courses

The lines below are an example of a button that will add a specific member type to the cart with a fixed value. This button can be added to any page within the online sales. It would most commonly appear on the TMpass.html page or the TMcart.html page.

<TABLE width="345" BORDER=0 CELLPADDING=1>
<TR>
<TD WIDTH=92 class="tablerowheader" align="center">
<P align="right">Type</P>
</TD>
<TD width="240" class="tablerowheader">
<FORM ACTION="<field>F_HTML_FIREWALL</field>online" METHOD=POST><DIV ALIGN="center">
<label for="Team"><strong>Gift Certificates</strong> </label>
<input type="hidden" name="MT_SEQ" value="14">
</DIV>
</TD>
<TR>
<TD WIDTH=92 class="tablerowheader">
<P align="right">Quantity</P>
</TD>
<TD class="tablerowdetail">
<select name="PS_QUANTITY" size="1" id="PS_QUANTITY">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</TD>
</TR>
<TR>
<TD valign="top" class="tablerowheader" align="right">Personalized Message</TD>
<TD class="tablerowdetail" align="left">
<textarea name="M_NOTES" cols="50" rows="5"><field>M_NOTES</field></textarea>
</TD>
</TR>
<tr class="tablerowheader">
<td colspan=2 align="center">
<input name="btnReservePass" type=submit value="Add Gift Certificate to Shopping Cart" class="new" onMouseOver="pviiClassNew(this,'newover')" onMouseOut="pviiClassNew(this,'new')" onClick="process()">
</FORM>
</TD>
</TR>
</TABLE>

When entering a coupon code in the online sales the patron clicks the Add Code button. This button appears in the TMtickets.html and TMcart.html pages. The button accepts the coupon or access code and returns the patron to the TMtickets.html page.

This process includes web page editing. If you have a web designer on hand, they can perform these edits. If you wish to contract with Arts Management Systems to perform these or any customizations for you, please contact the Support Team at support@artsman.com

Edit the code on the web page

1. Select the web page to edit.
   The page to edit is tmTicketsPresalesCoupon.html.


2. Locate the following HTML on the page:

    

   <input name="param" type="hidden" value="altbtn=btnGetEventList"/>

 

3. Edit the following
   • Change the 'btnGetEventList' text to 'btnCart'.

The Genre setting with Theatre Manager are directly connected to the Ticket Trove application. This means the drop down is restricted to the current list of options and is not available for customization. You can however, create your own custom genre lookup using the Event code used to define each event within Theatre Manager OR the Performance Flag field which is associated with each performance within the database. This allows you to group together different types of performances or events and create your own sort options within the online sales.