mage-eventpress/templates/single-events.php

<?php 
get_header();
the_post();
global $post;
global $woocommerce;
$event_meta = get_post_custom(get_the_id());
$author_terms = get_the_terms(get_the_id(), 'mep_org');
$book_count = get_post_meta(get_the_id(),'total_booking', true);
$user_api = mep_get_option( 'google-map-api', 'general_setting_sec', '');
if($book_count){ $total_book = $book_count; }else{ $total_book = 0; } 
?>
<div class="mep-events-wrapper">
	<div class="mep-event-detailsss">
		<div class="mep-top-part">
			<div class="mep-left-col">
				<div class="mep-event-thumbnail">
					<?php the_post_thumbnail('full'); ?>
				</div>				
			</div>
			<div class="mep-right-col">
				<div class="mep-event-title-header">
					<h2><?php the_title(); ?></h2>
					<?php if($author_terms){ ?><p> <?php _e('By:','mep'); ?> <a href="<?php  echo get_term_link( $author_terms[0]->term_id, 'mep_org' );  ?>"><?php  echo $author_terms[0]->name; ?></a></p><?php } ?>

					<?php 
					if($event_meta['_price'][0]>0){
						if($event_meta['mep_price_label'][0]){
					?>
					<h3><?php echo $event_meta['mep_price_label'][0]; ?>: </h3>
					<?php } echo get_woocommerce_currency_symbol().$event_meta['_price'][0]; ?>
					<?php } else{ _e('<h3>Free</h3>','mep'); }?>	
					<?php if($event_meta['mep_total_seat'][0]){
					?>
				<h5><strong><?php _e('Total Seat:','mep'); ?></strong> <?php echo $event_meta['mep_total_seat'][0]; ?> (<strong><?php echo ($event_meta['mep_total_seat'][0]- $total_book); ?></strong> Left)</h5>
					<?php } ?>
					<div class="calender-url">
						<?php mep_add_to_google_calender_link(get_the_id()); ?>
					</div>
				</div>	
			</div>
		</div>
		<?php if($event_meta['mep_sgm'][0]){ if($user_api){?>
		<div class="mep-gmap-sec">
			<div id="map" class='mep_google_map'></div>
		</div>
				    <script>
				      var map;
				      function initMap() {
				        map = new google.maps.Map(document.getElementById('map'), {
				          center: {lat: <?php echo $event_meta['latitude'][0]; ?>, lng: <?php echo $event_meta['longitude'][0]; ?>},
				          zoom: 17
				        });
				        marker = new google.maps.Marker({
				          map: map,
				          draggable: false,
				          animation: google.maps.Animation.DROP,
				          position: {lat: <?php echo $event_meta['latitude'][0]; ?>, lng: <?php echo $event_meta['longitude'][0]; ?>}
				        });
				        marker.addListener('click', toggleBounce);				        
				      }
				      function toggleBounce() {
				        if (marker.getAnimation() !== null) {
				          marker.setAnimation(null);
				        } else {
				          marker.setAnimation(google.maps.Animation.BOUNCE);
				        }
				      }
				    </script>
				  	<script src="https://maps.googleapis.com/maps/api/js?key=<?php echo $user_api; ?>&callback=initMap"
				    async defer></script>		
<?php } } ?>
		<div class="mep-btn-part">
			<div class="mep-left-col">
				<div class="mep-event-meta">
					<?php _e('Share This Event:','mep'); ?> <?php mep_social_share(); ?>
				</div>				
			</div>
			<div class="mep-right-col">
				<div class="mep-event-datetime">
					<h3><?php _e('Date and Time:','mep'); ?></h3>
					<p><?php echo $event_meta['mep_event_start_date'][0]; ?> - <?php echo $event_meta['mep_event_end_date'][0]; ?></p>
				</div>
			</div>			
		</div>
		<div class="mep-content-part">
			<div class="mep-left-col">
				<div class="mep-event-details">
					<h3 class="mep-desc-title"><?php _e('Description','mep'); ?></h3>
					<?php the_content(); ?> 
				</div>				
			</div>
			<div class="mep-right-col">
				<div class="mep-reg-btn-sec">
					<?php 
					if($event_meta['_price'][0]>0){
					?>
					<div class="cart-btn-sec">
						<?php mep_get_event_reg_btn(get_the_id()); ?>
					</div>
					<?php }?>	
				</div>				
				<div class="mep-event-location">
					<h3><?php _e('Event Location:','mep'); ?></h3>
					<p><?php echo $event_meta['mep_location_venue'][0]; ?><br/>
					<?php echo $event_meta['mep_street'][0]; ?><br/>
					<?php echo $event_meta['mep_city'][0]; ?><br/>
					<?php echo $event_meta['mep_state'][0]; ?>, 
					<?php echo $event_meta['mep_postcode'][0]; ?><br/>
					<?php echo $event_meta['mep_country'][0]; ?></p>					
				</div>
			</div>			
		</div>
	</div>
</div>
<script>
jQuery('input[type=checkbox]').click(function() {

var $form = jQuery('form'); //on a real app it would be better to have a class or ID
var $totalQuant = jQuery('#quantity_5a7abbd1bff73', $form);

jQuery('#quantity_5a7abbd1bff73, input[type=checkbox]', $form).change(calculateTotal);

function calculateTotal() {
   var sum = <?php echo $event_meta['_price'][0]; ?>;
   jQuery('input[type=checkbox]:checked').each(function() {
      sum += jQuery(this).data('price');
   })
   jQuery('#usertotal').html('<span class=eventtotal>Total:</span> <?php echo get_woocommerce_currency_symbol(); ?>' + sum * parseInt( $totalQuant.val() || 0, 10));

}
});
</script>
<?php get_footer(); ?>