CMS integration

flowchart TB
    subgraph CMS
        C[Content API]
    end
    subgraph U[Customer Solution]
        W
        J[JobServer]
    end
    J --> C
    W[Website] --> C   

The Bizzkit CMS integration is implemented in the project Blueprint.Integration.CMS for the backend and api/cms in the frontend. The backend integration is mainly used for SSR and generating sitemaps. The frontend integration uses the Content API directly and converts data to actual content using React.

The configuration for the customer solution's CMS integration is in the appsettings-json files in the backend project.

Content API

We use the following CMS models in the customer solution:

You can configure the model ids in the appsettings.json file in the backend project.

Routing

We do not synchronize all the routes for the CMS pages to the customer solution. Instead we have the CMS as a fallback for the customer solution's routing.

This model was chosen for its simplicity. If you want to have all the URLs for all the CMS pages stored in the customer solution, then you need to implement a webhook that listens for changes in the CMS pages and updates the customer solution. This is also needed if you want to set up automatic redirects from old URLs to new ones.

Rendering content in the frontend

The rendering of content is done using the React SDK for Builder.io.

1
2
3
4
5
6
7
8

import { BuilderComponent } from '@builder.io/react';
// ...
export default (): JSX.Element => {
    // ...
    const {data: content, isLoading} = useCmsContentQuery(location.pathname, settings, modelName);
    // ...
    return <BuilderComponent model={modelName} content={content || undefined}/>;
}

Menus

Menus in the header and footer are stored as structured data in the CMS. The frontend integration uses the Builder.io SDK to fetch the menus and render them.

1
2
3
4
5
6
7
8
9

const Footer: React.FunctionComponent<FooterProps> = ({ critical, layout, translations }) => {
    // ...
    const { data: footerMenu } = useCmsMenuQuery(settings, settings?.cmsSettings?.footerMenu || '');
    // ...
    return (
        // ...
        {footerMenu && <Menu className={styles.menuCol} menu={footerMenu} />}
    );
}

The menu model we use in the CMS contains a title and optional internal or external link that will be shown as the header of the footer menu, and then a list of sub menu items that each has a title and either an internal or external link.

Custom components

We have implemented a number of custom components that can be used in the CMS. These are implemented as React components that are rendered in the frontend.

Available custom components:

• Accordion
• Button
• Carousel
• DAM image
• DAM video
• Buy button
• Icon
• Modal
• Product card
• Product slider
• Section (overriding the default section component to enforce our design system)
• Tabs
• Text (overriding the default text component to enforce our design system)
• USP
• Vertical spacer