Amplience acceleration

Your journey with Amplience 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, partials and containers.

Components

Creating content types for your components is the first step towards building dynamic pages with Amplience. The default setup provided by Alokai includes content types for all frontend components such as Banner, Grid, Hero and Scrollable.

All content types for components feature the Component field. It is hidden for editing and set as constant with the name of the frontend component used for rendering items of this content type. Thanks to that, content types and components are not tightly coupled.

For example: by default items 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 constant value for the Component field.

Partials

Partials 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, Partials can reference other partials (e.g. Styles referencing fields groups for CSS width, height or padding properties).

Partials are schemas that are not available as content types, but utilized in another schemas. You can access these by going to Content type schemas in Development tab and sorting schemas by partials option in the dropdown menu next to search input.

Containers

Containers are the last step towards building dynamic pages. They allow you to create content items grouping your components and fetch them with a single API call. The default Alokai setup ships with two containers: Page and Layout.

Pages feature the Path field which is used by the frontend to get the right page for the currently visited route. Setting the value of the field sets the page's delivery key automatically. They also feature two fields allowing you to add Content links: 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 also identified by their deliveryKey (although it has to be set manually since they have no dedicated field such as Path in Pages). Whereas your setup will feature a lot of Page items, there will be way fewer Layout items 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.