Quick start
The concept of pages lives at the very core of Alokai's CMS integrations. They organize your CMS components in structures, allowing you to fetch them with a single request and render in the Storefront. This guide will show you how to quickly create a simple page in your CMS using the readily-available Content Types provided by Alokai.
Creating CMS page
The process of creating pages differs in every CMS. Select your platform from the tabs below and follow the associated guide.
To use the Live Preview feature, you need to run your project locally with yarn dev command.
1
2
Define the Path of your page
Set your page's Path to pages/example. Amplience will set this value as your entry's deliveryKey automatically. Your Storefront will use it to fetch the page from Amplience. Once done, click the Save button in the top right corner. Saving at this stage is required to enable Visualizations.
3
Add a component
In the Components above the fold field, click on the + button. In the drawer that appears, select + Create new content at the top and - from the displayed list of content items - choose Banner.
Just like for the page entry, Save the Banner entry immediately to enable Visualizations.
Fill your new component with some arbitrary data. Once done, click the blue Save button in the top-right corner.
How it works
Alokai Storefront comes with a built-in page component responsible for handling fully-dynamic CMS pages for you. First, it fetches data from the CMS based on the currently visited Storefront path (e.g. /example). Second, it renders components from componentsAboveFold and componentsBelowFold containers using the RenderCmsContent wrapper.
Dynamic page has by default two containers: componentsAboveFold and componentsBelowFold. They are used for performance optimization, allowing you to split your page into two parts: above and below the fold. This way, you can load only the necessary components at the beginning and lazy-load the rest as the user scrolls down. If you want, you can define more containers in your CMS and use them in the Storefront.
import connectCmsPage from '@/components/cms/wrappers/connect-cms-page';
import RenderCmsContent from '@/components/cms/wrappers/render-cms-content';
export default connectCmsPage((props) => {
const { page } = props;
const { componentsAboveFold = [], componentsBelowFold = [] } = page;
return (
<>
<RenderCmsContent item={componentsAboveFold} />
<RenderCmsContent item={componentsBelowFold} />
</>
);
}, {
getCmsPagePath(props) {
return props.params.slug?.join('/') ?? '/';
},
});
Since the component is already in place, there is no additional work required on the Storefront side. In the next chapter of the guide, you will create your first page entry. You will be able to preview it in the CMS dashboard while editing. After you publish the entry, your Storefront running on localhost will be able to render it.
Read also?
Congratulations! You've just created your first CMS page. Read the other guides to learn even more about building amazing things with our CMS integrations.