[Tutorial] Creating an Upcoming Events Listing Page

Caution

This is an advanced tutorial and is not supported by Zetya.  Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Update September 2018: We have released an Upcoming Events widget now. This widget can be embedded on any page (including the home page). Please see Configuration > Widgets in BookThatApp admin to install this widget.

We've had a few people ask us how to list events on a regular page (as opposed to the product page or calendar page). This article will show you how to do that.

First, for an example of what we are going to build take a look at the Kayak Academy's Lessons page. The list of upcoming classes on the right dynamically loads the schedule and displays it.

There are 2 parts to the set up: a) create a snippet that has the logic to retrieve the schedule and display it and b) create a new page template and add the events table.

Create a Snippet

We are going to create a snippet that will have logic that retrieves the event schedule for selected products and display those events in a table.

1. Go to the theme editor in Shopify Admin and create a new snippet called 'events-table'.
2. Copy the code from here and paste it into the snippet then save.
3. Now create a new collection (how?) called 'Events' and add the products you would like to see the event schedule for.
1. Alternatively, you can specify the product ids directly. In order to get the product id go to the product page in Shopify and grab it from the url. In the screen shot below the product id is the number ending in 837: 
   Copy the id and paste it in the snippet where it says {{ product_ids }}. Please note you can specify multiple products by separating them with commas (e.g. '357915837, 357915847')
4. Open theme.liquid and scroll to the bottom of the file. Pull in the snippet we just created by pasting:
   

   {% if template == 'page.events' %}
    {% include 'events-table' %}
   {% endif %}

   just above where it says </body>.

Create a New Page Template

We recommend creating a new page template so that you can change the layout to accomodate the event listing and not have it impact any other existing pages.

1. To start create a new alternate template based on Page called 'page.events' (how?).
2. Paste the following html code where you would like the event table to appear:
   

   <table id="events" style="width:100%;">
   </table>

3. After you save the template you are ready to use it on one of your existing pages or you can create a new page (how?).
   
   Be sure to configure the page to use the new template:
   

Troubleshooting

No events appearing

• Check that there are no Javascript errors in the console (how?). 
• Check that jQuery is loaded (how?).