php js css php js css

Changes

Changes to Design template: Design #2 - Events List

217950
Today 12:42am
Guevarra, Kim
Modified design template
217951
Today 12:42am
Guevarra, Kim
Modified design template
Css:
Design Id:
16
16
Component Class:
\Components\Marketing\Events
\Components\Marketing\Events
Id:
list
list
Default Variation:

															

														
Html:
<templates:card
itemscope
itemtype="http://schema.org/Event"
bgcolor="#FFFFFF"
style="padding:0; margin: 10px; border-radius: 10px; box-shadow: 0px 3px 15px rgba(0,0,0,0.2)"
cardsize="md"
href="/community/event-rsvp/?event_id=[? $event['event_id'] ?]"
target="[? $event['event_external_rsvp_url'] ? '_blank' : '_self' ?]">

<!-- Event Icon -->
<logic:if test="$templateRegionsShown['icon'] && $event['event_icon']" evaluateat="render">
<div class="post-icon">
<div class="post-event-title">
<logic:variable as="arrCategories" value="[? \Components\Marketing\Events\Categories::getAllForEvent($event['event_id']) ?]" />
<data:repeater id="event_category_repeater" datasource="$arrCategories" as="arrCategory">
<small>[? \Components\Marketing\Events\Categories::getColumn($arrCategory['event_category_id'], 'event_category_title')?]</small>
</data:repeater>
</div>
<standard:image
width="100%"
src="[? $event['event_icon'] ?]"
alt="[? $event['event_title'] ?]"
maintainAspect="crop"
height="200"
style="border-radius: 5px;"/>
</div>
</logic:if>

<div style="padding: 20px 30px 20px 30px;">
<hr class="post-list-custom__accent" />
<h3 style="text-align: left;">[?? $event['event_title'] ??]</h3>

<!-- Date -->
<table>
<logic:if test="$templateRegionsShown['date'] && $event['event_start_datetime']">
<tr>
<td style="vertical-align: top; width: 30px">
<standard:icon library="feather" iconstyle="standard" iconname="calendar" size="4" style="width: 18px; height: 18px;" />
</td>
<td width="auto">
<time itemprop="startDate" datetime="[? date_format(date_create($event['event_start_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], null, '') ?]
</time>

<logic:if test="$event['event_end_datetime'] && \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], 'MMM d', '') != \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], 'MMM d', '')">
-
<time itemprop="endDate" datetime="[? date_format(date_create($event['event_end_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], null, '') ?]
</time>
</logic:if>
</td>
</tr>
</logic:if>

<!-- Time -->
<logic:if test="$templateRegionsShown['time']">
<tr>
<td style="vertical-align: top; width: 30px">
<standard:icon library="feather" iconstyle="standard" iconname="clock" size="4" style="width: 18px; height: 18px;" />
</td>
<td width="auto">
<time itemprop="startDate" datetime="[? date_format(date_create($event['event_start_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], '') ?]
</time>

<logic:if test="$event['event_end_datetime']">
-
<time itemprop="endDate" datetime="[? date_format(date_create($event['event_end_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], '') ?]
</time>
</logic:if>
</td>
</tr>
</logic:if>

<!-- Location -->
<logic:if test="$templateRegionsShown['location'] && ($event['event_location_id'] != null)">
<logic:variable value="[? \Components\Marketing\Events\Locations::get($event['event_location_id']) ?]" as="eventLocation" />
<tr>
<td style="vertical-align: top; width:30px;">
<standard:icon library="feather" iconstyle="standard" iconname="map-pin" size="4" style="width: 18px; height: 18px;" />
</td>
<td itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="name">[? $eventLocation['event_location_description'] ?]</span>
</td>
</tr>
</logic:if>

<!-- Price -->
<logic:if test="$templateRegionsShown['price'] && \Components\Marketing\Events::getEventPrice($event['event_id'])">
<tr>
<td style="vertical-align: top; width:30px;">
<standard:icon library="feather" iconstyle="standard" iconname="dollar-sign" size="4" style="width: 18px; height: 18px;" />
</td>
<td>

<logic:if test="\Components\Marketing\Events::getEventPrice($event['event_id']) == 0">Free</logic:if>
<logic:else>[?? \Components\Marketing\Events::renderEventPrice($event['event_id']) ??]</logic:else>

</td>
</tr>
</logic:if>

<!-- Display Number of places available at ticketed event -->
<logic:if test="$templateRegionsShown['places_available'] && $event['event_capacity']">
<tr>
<td style="vertical-align: top; width:30px;">
<standard:icon library="fontawesome" iconstyle="solid" iconname="users" size="4" style="width: 18px; height: 18px;" />
</td>
<td>
[? $event['event_capacity'] - $event['event_attending_count'] ?] Places Remaining
</td>
</tr>
</logic:if>


</table>

<!-- Description -->
<logic:if test="$templateRegionsShown['short_description'] && $event['event_description_short']">
<br />
<p itemprop="description">[?? $event['event_description_short'] ??]</p>
</logic:if>

<!-- Event RSVP -->
<!-- Check if we are displaying rsvp and test to ensure that the event date hasn't already passed and that there is enough capacity for additional registrations -->
<logic:if test="$templateRegionsShown['rsvp']">
<logic:variable as="eventRSVP" value="[?? \Components\Marketing\Events::canContactRSVPForEvent($event['event_id'], \Components\Customers\Contacts::currentContactId()) ??]" />

<!-- Event RSVP Deadline -->
<logic:if test="$templateRegionsShown['rsvp_deadline'] && $eventRSVP['can_rsvp'] && $event['event_rsvp_deadline_datetime']">
Sign up before <time itemprop="rsvpResponseDueDate" datetime="[? date_format(date_create($event['event_rsvp_deadline_datetime']), 'Y-m-d\TH:i:s') ?]">[? \Components\Marketing\Events::renderTime($event, $event['event_rsvp_deadline_datetime']) ?]</time>
</logic:if>

<logic:if test="$eventRSVP['can_rsvp']">

<!-- RSVP with Oncord - if event_external_rsvp_url, rsvp page will redirect to it -->
<a class="event-list-card__registration_button" href="/community/event-rsvp/?event_id=[? $event['event_id'] ?]">
View Details
</a>
</logic:if>
<logic:else test="!$eventRSVP['can_rsvp']">
<br />
<p style="text-align: center;"><small>[? $eventRSVP['reason'] ?].</small></p>
</logic:else>
</logic:if>
</div>
</templates:card>
<templates:card
itemscope
itemtype="http://schema.org/Event"
bgcolor="#FFFFFF"
style="padding:0; margin: 10px; border-radius: 10px; box-shadow: 0px 3px 15px rgba(0,0,0,0.2)"
cardsize="md"
href="/community/event-rsvp/?event_id=[? $event['event_id'] ?]"
target="[? $event['event_external_rsvp_url'] ? '_blank' : '_self' ?]">

<!-- Event Icon -->
<logic:if test="$templateRegionsShown['icon'] && $event['event_icon']" evaluateat="render">
<div class="post-icon">
<div class="post-event-title">
<logic:variable as="arrCategories" value="[? \Components\Marketing\Events\Categories::getAllForEvent($event['event_id']) ?]" />
<data:repeater id="event_category_repeater" datasource="$arrCategories" as="arrCategory">
<small>[? \Components\Marketing\Events\Categories::getColumn($arrCategory['event_category_id'], 'event_category_title')?]</small>
</data:repeater>
</div>
<standard:image
width="100%"
src="[? $event['event_icon'] ?]"
alt="[? $event['event_title'] ?]"
maintainAspect="crop"
height="200"
style="border-radius: 5px;"/>
</div>
</logic:if>

<div style="padding: 20px 30px 20px 30px;">
<hr class="post-list-custom__accent" />
<h3 style="text-align: left;">[?? $event['event_title'] ??]</h3>

<!-- Date -->
<table>
<logic:if test="$templateRegionsShown['date'] && $event['event_start_datetime']">
<tr>
<td style="vertical-align: top; width: 30px">
<standard:icon library="feather" iconstyle="standard" iconname="calendar" size="4" style="width: 18px; height: 18px;" />
</td>
<td width="auto">
<time itemprop="startDate" datetime="[? date_format(date_create($event['event_start_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], null, '') ?]
</time>

<logic:if test="$event['event_end_datetime'] && \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], 'MMM d', '') != \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], 'MMM d', '')">
-
<time itemprop="endDate" datetime="[? date_format(date_create($event['event_end_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], null, '') ?]
</time>
</logic:if>
</td>
</tr>
</logic:if>

<!-- Time -->
<logic:if test="$templateRegionsShown['time']">
<tr>
<td style="vertical-align: top; width: 30px">
<standard:icon library="feather" iconstyle="standard" iconname="clock" size="4" style="width: 18px; height: 18px;" />
</td>
<td width="auto">
<time itemprop="startDate" datetime="[? date_format(date_create($event['event_start_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], '') ?]
</time>

<logic:if test="$event['event_end_datetime']">
-
<time itemprop="endDate" datetime="[? date_format(date_create($event['event_end_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], '') ?]
</time>
</logic:if>
</td>
</tr>
</logic:if>

<!-- Location -->
<logic:if test="$templateRegionsShown['location'] && ($event['event_location_id'] != null)">
<logic:variable value="[? \Components\Marketing\Events\Locations::get($event['event_location_id']) ?]" as="eventLocation" />
<tr>
<td style="vertical-align: top; width:30px;">
<standard:icon library="feather" iconstyle="standard" iconname="map-pin" size="4" style="width: 18px; height: 18px;" />
</td>
<td itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="name">[? $eventLocation['event_location_description'] ?]</span>
</td>
</tr>
</logic:if>

<!-- Price -->
<logic:if test="$templateRegionsShown['price'] && \Components\Marketing\Events::getEventPrice($event['event_id'])">
<tr>
<td style="vertical-align: top; width:30px;">
<standard:icon library="feather" iconstyle="standard" iconname="dollar-sign" size="4" style="width: 18px; height: 18px;" />
</td>
<td>

<logic:if test="\Components\Marketing\Events::getEventPrice($event['event_id']) == 0">Free</logic:if>
<logic:else>[?? \Components\Marketing\Events::renderEventPrice($event['event_id']) ??]</logic:else>

</td>
</tr>
</logic:if>

<!-- Display Number of places available at ticketed event -->
<logic:if test="$templateRegionsShown['places_available'] && $event['event_capacity']">
<tr>
<td style="vertical-align: top; width:30px;">
<standard:icon library="fontawesome" iconstyle="solid" iconname="users" size="4" style="width: 18px; height: 18px;" />
</td>
<td>
[? $event['event_capacity'] - $event['event_attending_count'] ?] Places Remaining
</td>
</tr>
</logic:if>


</table>

<!-- Description -->
<logic:if test="$templateRegionsShown['short_description'] && $event['event_description_short']">
<br />
<p itemprop="description">[?? $event['event_description_short'] ??]</p>
</logic:if>

<!-- Event RSVP -->
<!-- Check if we are displaying rsvp and test to ensure that the event date hasn't already passed and that there is enough capacity for additional registrations -->
<logic:if test="$templateRegionsShown['rsvp']">
<logic:variable as="eventRSVP" value="[?? \Components\Marketing\Events::canContactRSVPForEvent($event['event_id'], \Components\Customers\Contacts::currentContactId()) ??]" />

<!-- Event RSVP Deadline -->
<logic:if test="$templateRegionsShown['rsvp_deadline'] && $eventRSVP['can_rsvp'] && $event['event_rsvp_deadline_datetime']">
Sign up before <time itemprop="rsvpResponseDueDate" datetime="[? date_format(date_create($event['event_rsvp_deadline_datetime']), 'Y-m-d\TH:i:s') ?]">[? \Components\Marketing\Events::renderTime($event, $event['event_rsvp_deadline_datetime']) ?]</time>
</logic:if>

<logic:if test="$eventRSVP['can_rsvp']">

<!-- RSVP with Oncord - if event_external_rsvp_url, rsvp page will redirect to it -->
<a class="event-list-card__registration_button" href="/community/event-rsvp/?event_id=[? $event['event_id'] ?]">
View Details
</a>
</logic:if>
<logic:else test="!$eventRSVP['can_rsvp']">
<br />
<p style="text-align: center;"><small>[? $eventRSVP['reason'] ?].</small></p>
</logic:else>
</logic:if>
</div>
</templates:card>