Contentful acceleration

Your journey with Contentful will most likely start with a clean environment. The Alokai team will populate it with content types parallel to your frontend setup. We have devided them into three groups: components, field groups and containers.

Components

Creating content types for your components is the first step towards building dynamic pages with Contentful. The default setup provided by Alokai includes content types for all frontend components such as Banner, Grid, Hero and Scrollable. You can recognize them by the [Component] tag in the description.

All content types for components feature the Component field. It is hidden for editing but defaults to the name of the frontend component used for rendering entries of this content type. Thanks to that, content types and components are not tightly coupled.

For example: by default entries of type Banner are rendered by the Banner component but if you decide to rename it or use another component instead, the change will be as simple as updating the default value for the Component field.

Field groups

Field groups are used by components content types whenever some more complex field structure is needed. For example, Banner, Hero and Product Card use a field group called Button which has two fields: Label and Link. Moreover, field groups can reference other field groups (e.g. Styles referencing fields groups for CSS width, height or padding properties).

Field groups can be identified by the [Field Group] tag in their description. From a higher-level perspective, the integration distinguishes field groups from components based on the presence (or absence) of the Component field, which is exclusive to components and should not exist in field groups.

Containers

Containers are the last step towards building dynamic pages. They allow you to create entries grouping your components and fetch them with a single API call. They can be identified by the [Container] tag in their description. The default Alokai setup ships with two containers: Page and Layout.

Pages feature the URL field which is used by the frontend to get the right page for the currently visited route. They also feature two fields of type Reference: Components above the fold and Components below the fold. They can be used to add any type of component in any combination and tell the frontend to render them either eagerly or lazily.

Layouts are identified by the Name field. Whereas your setup will feature a lot of Page entries, there will be way fewer Layout entries in it. Sometimes even a single Layout is enough because - although not directly connected - it is there to augment your pages with a shell consisting of components such as MegaMenu or Footer which should be persisted across all routes.