This article will explain how the "Shopping Mall Wayfinder - with Headless CMS" sample experience has been built, and how it differs from its previous version: "Shopping Mall Wayfinder".
The entire experience architecture has been retained from the previous version and this article assumes you are familiar with the original architecture.
This article will focus on this experience's use of Intuiface Headless CMS (abbreviated as H-CMS), enabling editors to
- Update content such as Categories and Wayfinding Data using the H-CMS web interface - no Composer required
- Adding animated path for waypoints
If you are unfamiliar with Intuiface Headless CMS, we suggest you first learn more about it - either via the Headless CMS chapter in our Help Center or the Headless CMS course in Intuiface Academy - before proceeding with this article.
Structure of the H-CMS base
The main content that has been removed from the experience and placed in a Headless CMS base is
- Wayfinding Data (coordinates icons, animated path etc)
Therefore, the base has the following structure:
- 1 collection component, "Categories", for filtering pinpoints
- 1 collection component, "Wayfinding Data", for positioning pinpoints on the map
The Content tab for "Wayfinding Data" enables the easy addition and removal of pinpoints on the map.
Modifications made to the experience
Headless CMS conversion
Converting the existing "Shopping Mall Wayfinder" sample into this H-CMS-based experience was achieved through these steps:
- Adding the "Shopping Mall Wayfinder" H-CMS base to the experience.
- Replacing all Excel data feeds with their corresponding H-CMS data feeds (Wayfinding Data, Categories), and adjusting the bindings (both Text and Image Assets).
- Included removal of the Excel workbook from the experience.
Adding an animated path for a selected pinpoint
In addition to the Headless CMS conversion, a feature has been added enabling the display of an animated path from the starting point ("you are here") to a chosen pinpoint on the map.
To achieve this, first we added an Image property in the Headless CMS "Wayfinding Data" collection, then in Composer we added an Image Asset that completely overlays the map. This new image is assigned a trigger/action pair: when any pinpoint is selected, show that Image Asset.
The animations were built using After Effects; you can follow this tutorial for guidance. If you're a graphic designer, after some practice, it takes roughly 5 minutes to generate a path. These paths are animated GIFs and will look like this:
Please note that, for the sake of testing, we only implemented 3 pinpoint animations: for the shops "Flipbug", "Yodel" and "My Burger" on first floor of the mall.
Here is the final rendering, showing the overlayed, animated GIF that appears upone pinpoint selection in the experience:
Reusing this sample / base
Headless CMS offers a way to duplicate a base or change its ownership.
Base duplication is the process of creating a base copy. There are circumstances where this duplication occurs automatically and others where it can be performed manually. With manual duplication, the copy can contain the original base's structure or both the structure and content; for automatic duplication, the entire base is copied.
You can find more information in the Base duplication article.
If recreating the base, use the same naming and structure as the H-CMS base discussed above because the experience is constructed to expect those names/structures. (Of course, you can use any naming convention or structure in your base, you'll just have to update the experience accordingly.)
This article will be updated as soon as cross-account base duplication is possible.