UI Configuration Options

To begin using Tessera on a page, you must include this script to create the settings file with the configurations set to your needs, which also calls the function to initialize Tessera. This script is located in the /partials/tessera-conf-file.php of the Tessera theme folder.

<script>
  window.onload = function() { 
    var file = `{ 
      "TesseraUrl": "https://tickets.EXAMPLEVENUE.com/", 
      "ApiUrl": "https://tickets.EXAMPLEVENUE.com/api/v1", 
      "FrontendUrl": "https://www.EXAMPLEVENUE.com/", 
      "CartSettings": { 
        "ModalCartSettings": {
          "DateFormat": "E, MMM dd",
          "MinusDivHtml": "<button>-</button>",
          "PlusDivHtml": "<button>+</button>"
        } 
      }, 
      "TesseraUISettings": {
        "AccountIconSettings": {
          "UseAccountIcon": true,
          "AccountUrl": "https://tickets.EXAMPLEVENUE.com/",
 		      "AccountIconSelector": ".tessera-account-icon"
        },
        "CartIconSettings": {
          "UseCartIcon": true,
		      "CartIconSelector": ".tessera-cart-icon"
        }
      },
      "ProductCardSettings": {},
      "ShowCardSettings": {
       "DayOfTicketsAtDoor": true,
       "DayOfTicketsAtDoorText": "Tickets Available At Door",
     }, 
      "FuzzySearchSettings": {
        "UseParentForFiltering": true
      }, 
      "EventDetailSettings": {
        "TicketTableSelector": "#tessera-ticket-types",
        "TicketListClass": "table tessera-show-tickets",
        "TicketListId": "tessera-ticket-types",
        "UseEmbeddedCodeAndAddButtons": false
      }, 
      "MerchCardSettings": {}, 
      "MerchDetailSettings": {}, 
      "ProfileSettings": {}
    }`;
    var callback = function() {
      placeUIButtons();
	    initModalCart();
       
      <?php if ($args['type'] === 'home') : ?>
        tesseraUIOverlayEventCards(eventObjects);
	    <?php elseif ($args['type'] === 'event') : ?>
        tesseraUIOverlayEventDetails(thisShow.eventID);
	    <?php endif ?>
    
      this.loadingFinished = true;
    };
    tesseraInit(file, callback, debug = true);
  }
</script>

To add this script to a page, the following line appears in the page-home.php file and single-shows.php file of the Tessera theme:

<!-- Tessera Init -->
<?php get_template_part('partials/tessera-conf', 'file', array('type' => 'home')) ?>

To build the eventObjects array which calls the shows from Tessera, it requires at least the show id, but additional information can be added to the array to be used by Tessera UI. An example of how to construct this array is below.

1. First define the array object.

<script>var eventObjects = [];</script>

2. Then push the show information to the array object inside the post loop.

<?php 
// find date time now
$time_now = current_time('timestamp');
$date_now = date('Y-m-d', $time_now);

$time_end = strtotime('+300 day', $time_now);
$date_end = date('Y-m-d', $time_end);

// query events
$posts = get_posts(array(
  'posts_per_page'  => -1,
  'post_type'     => 'shows',
  'meta_query'    => array(
    array(
          'key'     => 'date_and_time_of_show',
          'compare'   => 'BETWEEN',
          'value'     => array( $date_now, $date_end ),
          'type'      => 'DATETIME'
      )
    ),
  'order'       => 'ASC',
  'orderby'     => 'meta_value',
  'meta_key'      => 'date_and_time_of_show',
  'meta_type'     => 'DATETIME'
));

foreach( $posts as $p ): ?>

<script>
    eventObjects.push({
    "id": <?php echo $p->ID; ?>, 
    "image": "<?php echo get_field('show_image', $p->ID)['sizes']['medium']; ?>", 
    "link": "/shows/<?php echo $p->post_name; ?>",
    "mainArtist": ["<?php echo $p->post_title; ?>"]});
</script>  

<?php endforeach; ?>

Example JavaScript output:

<script>
    eventObjects.push({
    "id": 10967, 
    "image": "https://www.EXAMPLEVENUE.com/wp-content/uploads/2021/11/17-300x214.jpg", 
    "link": "/shows/rock-n-roll-bingo",
    "mainArtist": ["Rock N' Roll Bingo!"]});
</script>