Aggregate Calendar View
This calendar shows all possible experiences that a shop offers on a single page. There are two modes: Month view and List view. Both will depict upcoming events starting from now and onwards. Clicking on any given event will redirect a user to an experience home page with a scheduler open and the corresponding time slot selected. Clicking on a day cell will bring up a full list of events taking place on that day.
Here's a video if you'd rather follow along live!
Installation
Step 1: Add a new template
Firstly, you need to open your Theme's code. Chances are, you've done that before but if not here's a quick list of steps to locate your theme code:
Under
Sales Channels
click onOnline Store
, thenThemes
On the right side of the screen click on
Actions
dropdown, thenEdit Code
In the file tree, under
Templates
folder icon clickAdd new template
and choose a Page template type.Give a name for your template and paste the following content into it, replacing all the default code that showed up automatically:
<div data-expapp-aggregate-view data-expapp-aggregate-view-shop="{{ shop.permanent_domain }}" data-expapp-aggregate-view-shop-url="{{ shop.permanent_domain }}" data-expapp-aggregate-view-base-url="https://prod-v2-api.experiencesapp.services">
</div>
<style>
:root {
/*
Modifying these colors will have no effect on Internet Explorer and other older browsers see here for more information https://caniuse.com/#search=css%20variables
*/
--experiences-primary-background: #fff;
--experiences-secondary-background: #f5f5f5;
--experiences-primary-action: #505dbf;
--experiences-secondary-text: #637381;
--experiences-placeholder-color: #a0acb7;
--experiences-disabled-background: #ccc;
--experiences-disabled-text: #888;
/*
default colors
--experiences-primary-background: #fff;
--experiences-secondary-background: #f5f5f5;
--experiences-primary-action: #505dbf;
--experiences-secondary-action: #5c6ac4;
--experiences-placeholder-color: #a0acb7;
--experiences-disabled-background: #ccc;
--experiences-disabled-text: #888;
*/ }
</style>
<link href="https://prod-v2.experiencesapp.services/storefront/embedded.css" rel="stylesheet" />
<script src="https://widgets.experiencesapp.services/public/prod/widgets.js"></script>
Update your styling if you made any modifications
Click
Save
Make note of the new template name
Step 2: Add a new page
Now that you have created a template, you need to link it to a new page.
On the menu on your left, find
Pages
underOnline Store
menuClick
Add Page
button in the top right cornerSet new page's
Title
. e.g. "Event Calendar" or "Experiences". (it will appear in your shop's navigation however you have/or will choose to organize your site's menus.)Make sure
Visibility
toggle set to the desired settingSelect
Template suffix
from the dropdown on your right to the newly created templateClick
Save
If you set Visibility
to Visible
, it should appear on your store page after a refresh