Event Page Example

Note: The ticket table is inserted by Tessera UI using a selector for the container div in which it will be placed.

Example of event details page php below:

<!-- Event Container -->
<div class="event-location py-1">
  <div class="container mb-0 ps-0 pe-0">

    <!-- Event Card -->
    <div class="tessera-event-location card">
      <div class="card-body">
 	      <div class="row tessera-card-container">

          <!-- Event Image -->
          <div class="col-md-6 mb-3">
            <div class="tessera-image" style="background-image:url('<?php echo esc_url(get_field('show_image')['url']); ?>');">
		          <?php if( get_field('special_notice') ): ?><div class="special_notice"><?php the_field('special_notice'); ?></div><?php endif; ?>
            </div>
          </div>

          <!-- Event Info -->
          <div class="col-md-6 pt-1">
            <div class="tessera-show-info">
		          <span class="date">            
                <span class="day"><?php echo $formattedDate; ?></span>
              </span>  
			        <h2 class="card-title tessera-title d-none"><?php echo the_title(); ?></h2>
              <?php
                $primaryBandAppend = get_field('primary_band_append');
                if ($primaryBandAppend) { ?>
                  <div class="primaryBandAppend"><?php echo $primaryBandAppend; ?></div>
              <?php } ?>

              <!-- Headliners -->
              <div class="tessera-artists">
                <?php 
                  $headliners = get_field('headliner');
                  if( $headliners ):
                    $counter = 0;
                    $total = count($headliners);
                    $noCommaClass = '';
                ?>
                <?php foreach( $headliners as $post): // variable must be called $post (IMPORTANT)
                  $counter++;
                  if ($counter == $total) {
                    $noCommaClass = 'd-none';
                  }
                ?>
                <?php setup_postdata($post); ?>
                <?php if (get_field('website')) { ?>
                  <h2><a href="<?php the_field('website'); ?>" target="_blank"><?php the_title(); ?></a><span class="<?php echo $noCommaClass; ?>">, </span></h2>
                <?php } else { ?>
                  <h2><?php the_title(); ?><span class="<?php echo $noCommaClass; ?>">, </span></h2>
                <?php } ?>
                <?php endforeach; ?>
                <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
                <?php endif; ?>

                <!-- Additional Artists -->
                <?php if( get_field('additional_artists') ): ?>
                <?php 
                  $additionalArtists = get_field('additional_artists');
                  $total = count(get_field('additional_artists'));
                  $counter = 0;
                  $noCommaClass = '';
                ?>
                <div class="additional-artists">
                  <?php 
                    foreach( $additionalArtists as $post): // variable must be called $post (IMPORTANT)
                    $counter++;
                    if ($counter == $total) {
                      $noCommaClass = 'd-none';
                  }
                  ?>
                  <?php if (get_field('website')) { ?>
                    <span><a href="<?php the_field('website'); ?>" target="_blank"><?php the_title(); ?></a><span class="<?php echo $noCommaClass; ?>">, </span></span>
                  <?php } else { ?>
                    <span><?php the_title(); ?><span class="<?php echo $noCommaClass; ?>">, </span></span>
                  <?php } ?>
                  <?php endforeach; ?>
                  <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
                </div>
                <?php endif; ?>
              </div>

              <!-- Card Info -->
			        <div class="cardinfo">
                <div class="time-item geo-venue fw-bold">
                  <i class="bi bi-geo-alt-fill"></i>
                  <span><?php echo $showVenueName; ?></span>
                  <i class="bi bi-dot"></i>
                  <span><?php echo the_field('genre'); ?></span>
				        </div>
                <div class="time-item text-doors">
                  <span>Doors <?php echo $formattedDoorTime; ?> | Show <?php echo $formattedTime; ?></span>
                </div>

                <!-- Calendar Links -->
                <div class="time-item calendar-links"></div> 

                <script>
                  var cal = addToCalendar({
                    title: thisShow.eventTitle,
                    start: new Date('<?php echo $showDateTime ?>'),//new Date('June 15, 2013 19:00'),
                    duration: 120, // minutes
                    address: '<?php echo $showVenueName; ?>'
                  });

                  var googleCal = cal.querySelector('.icon-google');
                  googleCal.innerText = '+ Google Cal';

                  var iCal = cal.querySelector('.icon-ical');
                  iCal.innerText = '+ iCal';

                  document.querySelector('.calendar-links').appendChild(googleCal);
                  document.querySelector('.calendar-links').appendChild(iCal);
                </script>

                <!-- External Tickets Link -->
                <?php if (get_field('external_ticket_button_text')) { ?>
                  <div class="external-ticket-button"><a class="btn external-button" style="margin-top: 1em;" target="_blank" href="<?php the_field('external_ticket_button_url'); ?>"><?php the_field('external_ticket_button_text'); ?></a></div>
                <?php } ?>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>