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.
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
menu - Click
Add Page
button in the top right corner - Set 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 setting - Select
Template suffix
from the dropdown on your right to the newly created template - Click
Save
If you set Visibility
to Visible
, it should appear on your store page after a refresh