HAPI Sample - Events Page

Build a custom events page (to view upcoming/past events) and a single event with this sample HAPI.

Updated over a week ago

By using this sample code you can create a custom view running HAPI.  By simply creating a new page and then setting the marketing keyword to events it will automatically switch to your template. 

<section class="" id="events">
  <div class="j-card" data-pv-component="event" data-pv-object="dt" data-pv-parameters="{returnTotal:'8'}" data-pv-type="eventlist">
    <img alt="event graphic" class="image" src="{@event_graphic@}">
    <div class="details">
      <div class="j-row">
        <p class="j-date"><span class="day" data-pv-element="event_date" data-pv-formatter="date(ddd, MMM d)" style="font-weight:bold;">Day, Month ##</span> | <span class="time" data-pv-element="event_date" data-pv-formatter="date(time)">##:## ?M</span></p>
        <p class="tag" data-pv-element="category_name">Tag</p>
      <h3 class="title"><a data-pv-element="event_title" href="/event/{@event_no@}">This is the title of the card</a></h3>
      <p class="description" data-pv-element="event_summary">TEXT HERE</p>
      <a class="ph-btn" href="/event/{@event_no@}">View Event</a>

As you can see in the div.j-card we are calling component event and type eventlist and returning the next 8 events.   As you loop through the data, you can see you can provide a combination of {@@} variables or data-pv-element for the object names. 

If you wanted to include past events, you could setup a 2nd section with new parameters including date_from and date_to.   In the event you wanted to create a dynamic filer, you can use the following date variables too.

  • {@thisMonthStart@}-{@thisMonthEnd@}

  • {@nextMonthStart@}-{@nextMonthEnd@}

  • {@lastMonthStart@}-{@lastMonthEnd@}

  • {@today@}

  • {@today:addDays(#)@}

  • {@today:addMonths(#)@}

  • {@today:addYears(#)@}

So to filter for the past 30 days, you could do:

data-pv-parameters="{date_from: {@today:addDays(-30)@}, date_to: {@today@}}"

Did this answer your question?