This article will explain how the "Company Presentation - with Headless CMS" sample experience has been built, and how it differs from its previous version: "Company Presentation".
The entire experience architecture has been retained from the previous version, and you can learn more about it in this article.
This article will focus on this experience's use of Intuiface Headless CMS (H-CMS), enabling editors to
- Update content such as the Projects list or Teams list using the H-CMS web interface - no Composer required
- Adding content in multiple languages using a flexible structure that makes it very easy to add a new language.
If you are unfamiliar with Intuiface Headless CMS, we suggest you first become familiar with 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
- All the text that could be translated
- All the object lists that could evolve over time, such as the list of projects or team members.
Therefore, the base has the following structure:
- 1 component for General Settings used across the entire experience
- In this sample, only the header navigation buttons are set in an experience layer.
- 1 component per scene, with sub-components when necessary to better organize the content.
The base has one variant - "Language" - with 2 variations: English & Français (French).
The Content tab enables the easy removal or addition of projects and team members, as well as the entry of multi-language information for all text fields defined in the Structure tab.
Below is the Project list with English text:
And below is the French version:
Modifications made to the experience
Converting the existing "Company Presentation" sample into this H-CMS-based experience was achieved through these steps:
- Adding the "Company Presentation" H-CMS base to the experience.
- Replacing all Excel data feeds with their corresponding H-CMS data feeds (Projects, Team), and adjusting the bindings (texts, images).
- Included removal of the Excel file from the experience.
- Binding all translated text to their corresponding text field in the H-CMS.
- Adding the two language buttons in the top bar of the running experience.
Reusing this sample / base
At the moment, Headless CMS does not offer a way to duplicate a base or change its ownership. As a result, you will not be able to view or edit the base. Further, if you choose to create a personal copy of this sample experience - using Save As - then you will have to recreate the base for your own Intuiface account and then associate it with your experience copy.
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.