What I didn’t do so well at explaining at TM3 –
For those that may not be aware, it is very possible to modify a specific Event web page within the web-store. For info on how to get started on customizing your web-store, please see Customizing the Web-store.
On your webserver navigate to BoxOffice\WebPages[outlet id]\WebPagesEN\tmEvent.
You are looking for tmEventDefault.html. To make a custom event page, Open tmEventDefault.html and save as tmEvent####.html where #### is the 4 digit event id.
Below is the HTML as provided by TM with some additional notes starting with <!-- Comment: **
For reference, any line of code starting with “<!–#include virtual=” is a call to another snippet of code on another page. What your browser renders as a cohesive looking page is really one page of code with a series of references to other pages with code snippets.
<!DOCTYPE html>
<html>
<head>
<base href="<field>F_HTML_IMAGE_SERVER</field>"/>
<title>
<field>D_COMPANY_LONG</field> | Description - <field>P_PLAY_TITLE</field>
</title>
<!--#include virtual="tmScripts/disclaimer.html" -->
<!--#include virtual="tmScripts/styles.html" -->
<!--#include virtual="tmScripts/pleaseWaitMessageFunction.html" -->
<!--#include virtual="tmScripts/cartCountdownFunctions.html" -->
<!--#include virtual="tmScripts/buttonRollover.html" -->
<!--#include virtual="tmScripts/googleHeader.html" -->
</head>
<body class="background">
<!--#include virtual="TMtemplates/tmnavButtons.html" -->
<div class="container">
<div id="content">
<div class="row">
<div class="col-md-4"> <!-- comment: **This sets the width of the column for the graphic that appears at the top left of the event page** -->
<p>
<field>pick(PP_SEQ>0,'<!-- comment: use picture if avail')</field>
<img class="img-responsive" src="<field>F_HTML_FIREWALL</field>picture?id=<field>PP_SEQ</field>"/>
<field>pick(PP_SEQ>0,' -->')</field>
<field>pick(PP_SEQ=0,'<!-- comment: no picture, use TT icon instead')</field>
<img class="img-responsive" src="<field>F_HTML_FIREWALL</field>image?event=<field>P_SEQ</field>"/>
<field>pick(PP_SEQ=0,' -->')</field>
</p>
</div>
<div class="col-md-8"> <!-- comment:**This sets the width of the column for the remainder of the text of the event page** -->
<div class="page-header">
<h1>
<field>P_PLAY_TITLE</field>
</h1>
</div>
<h3>
When
</h3>
<!--#include virtual="TMtemplates/tmEventDurationDisplay.html" -->
<h3>
Venue
</h3>
<div class="alert alert-text">
<strong>
<a class="link" href="<field>F_HTML_FIREWALL</field>tmVenue/tmVenue<field>TM_SEQ</field>.html">
<field>VE_NAME</field>
</a>
</strong>
<br/>
<field>VE_ADDRESS1</field>
<br/>
<field>pick(len(VE_ADDRESS2)>0,'<!-- comment: two lines of address')</field>
<field>VE_ADDRESS2</field>
<br/>
<field>pick(len(VE_ADDRESS2)>0,'-->')</field>
<field>VE_CITY</field>
<field>VE_PROVINCE</field>
<field>VE_POSTAL_CODE</field>
</div>
<field>pick(len(P_SALES_NOTES)>0,'<!-- comment: no sales notes')</field> <!-- comment: **This looks to see if there are specific notes about this performance that were added in TM on the performance tab** -->
<h3>
<field>D_PERF_DESC</field> Notes
</h3>
<div class="alert alert-text fade in">
<!--#include virtual="TMtemplates/tmMessageDismiss.html" -->
<field>P_SALES_NOTES</field><!-- comment: **This displays notes that were added in TM on the Marketing tab of an event.** -->
</div>
<field>pick(len(P_SALES_NOTES)>0,'-->')</field>
<p>
<a class="btn btn-success" href="<field>F_HTML_FIREWALL</field>login?event=<field>P_SEQ</field>">
Buy To This Event
</a>
<a class="btn btn-info" href="http://maps.google.com/maps?q=<field>VE_ADDRESS1</field> <field>VE_ADDRESS2</field> <field>VE_CITY</field> <field>VE_PROVINCE</field> <field>VE_POSTAL_CODE</field> <field>VE_COUNTRY</field>" target="_blank">
Directions
</a>
</p>
</div>
</div>
</div>
<!-- /#content -->
</div>
<!-- .container -->
<!--#include virtual="TMtemplates/tmFooter.html" -->
</body>
</html>
Both the Performance notes and the Event Notes can have html code added to them. One common and easily addable piece of code is a youtube video.
Above is the default TM Event page. I keep a slightly edited version for events that have a horizontal image for the secondary image in TM. Changes from the TM Default are noted in Bold.
All notes with the html code are commented so if you choose to copy and paste my code, nothing too strange should appear
<!DOCTYPE html>
<html>
<head>
<base href="<field>F_HTML_IMAGE_SERVER</field>"/>
<title>
<field>D_COMPANY_LONG</field>
| Description -
<field>P_PLAY_TITLE</field>
</title>
<!--#include virtual="tmScripts/disclaimer.html" -->
<!--#include virtual="tmScripts/styles.html" -->
<!--#include virtual="tmScripts/pleaseWaitMessageFunction.html" -->
<!--#include virtual="tmScripts/buttonRollover.html" -->
<!--#include virtual="tmScripts/googleHeader.html" -->
</head>
<body class="background">
<!--#include virtual="TMtemplates/tmnavButtons.html" -->
<div class="container">
<div id="content">
<div class="row">
<div class="col-md-12"> <!-- comment: **This row width is changed from 4 to 12, making the image fill the width of the page or approximately 1140px wide**-->
<p align="center">
<field>pick(PP_SEQ>0,'<!-- comment: use picture if avail')</field>
<img class="img-responsive" src="<field>F_HTML_FIREWALL</field>picture?id=<field>PP_SEQ</field>"/>
<field>pick(PP_SEQ>0,' -->')</field>
<field>pick(PP_SEQ=0,'<!-- comment: no picture, use TT icon instead')</field>
<img class="img-responsive" src="<field>F_HTML_FIREWALL</field>image?event=<field>P_SEQ</field>"/>
<field>pick(PP_SEQ=0,' -->')</field>
</p>
</div>
<div class="col-md-12"> <!-- comment: **This row width is changed from 8 to 12, making the text fill the width of the page or approximately 1140px wide**-->
<div class="page-header">
<h1>
<field>P_PLAY_TITLE</field>
</h1>
<!--#include virtual="TMtemplates/rowsponsor.html" -->
</div>
<h3>When</h3>
<!--#include virtual="TMtemplates/tmEventDurationDisplay.html" -->
<h3> Venue </h3>
<div class="alert alert-text"> <strong> <a class="link" href="<field>F_HTML_FIREWALL</field>tmVenue/tmVenue<field>TM_SEQ</field>.html">
<field>VE_NAME</field>
</a> </strong> <br/>
<field>VE_ADDRESS1</field>
<br/>
<field>pick(len(VE_ADDRESS2)>0,'<!-- comment: two lines of address')</field>
<field>VE_ADDRESS2</field>
<br/>
<field>pick(len(VE_ADDRESS2)>0,'-->')</field>
<field>VE_CITY</field>
<field>VE_PROVINCE</field>
<field>VE_POSTAL_CODE</field>
</div>
<field>
pick(len(P_SALES_NOTES)>0,'<!-- comment: no sales notes')</field><!-- comment: **This looks to see if there are specific notes about this performance that were added in TM on the performance tab** -->
<h3>
<field>D_PERF_DESC</field> Notes
</h3>
<div class="alert alert-text fade in">
<!--#include virtual="/TMtemplates/tmMessageDismiss.html" -->
<field>P_SALES_NOTES</field> <!-- comment: **This displays notes that were added in TM on the Marketing tab of an event.** -->
</div>
<field>pick(len(P_SALES_NOTES)>0,'-->')</field>
</div>
<p> <a class="btn btn-success" href="<field>F_HTML_FIREWALL</field>login?event=<field>P_SEQ</field>">Buy Tickets To This Event</a> <a class="btn btn-info" href="http://maps.google.com/maps?q=<field>VE_ADDRESS1</field> <field>VE_ADDRESS2</field> <field>VE_CITY</field> <field> VE_PROVINCE</field> <field>VE_POSTAL_CODE</field> <field>VE_COUNTRY</field>" target="_blank">Directions</a> </p>
</div>
</div>
</div>
<!-- /#content -->
</div>
<!-- .container -->
<!--#include virtual="TMtemplates/tmFooter.html" -->
</body>
</html>
If you “always” use horizontal images as the secondary image in TM, then you may choose to make the second version of the code your Default.
Additional HTML editing such as local overrides of color schemes or adding event specific pixels can be added to this page. For events that we are not selling tickets for or are purely informational for our calendar, I have even commented out the “Buy Now” button.
Always be careful when working with your webpages. One last reminder… do a save as of the Default FIRST!! Use the file name tmEvent####.html and save it to your tmEvent folder.