Contentful

Contentful is a headless content management system that allows rapidly build the dynamic experiences your customers crave. Together with Alokai, you can create a powerful and flexible solution for your business. This guide presents how to add the Contentful module to your Storefront.

Bootstrapping Contentful with Alokai Storefront

To use the Contentful integration in your Storefront, perform the following steps:

npx @vsf-enterprise/storefront-cli add-module cms-contentful

- CNTF_TOKEN=<alokai-contentful-token>
+ CNTF_TOKEN=<your-contentful-token>
- CNTF_SPACE=<alokai-contentful-space>
+ CNTF_SPACE=<your-contentful-space>
- CNTF_ENVIRONMENT=<alokai-contentful-environment>
+ CNTF_ENVIRONMENT=<your-contentful-content-environment>

Bootstrapping Contentful

Before you start using our Contentful integration with your Contentful space, you need to import Alokai schemas into your space. They are aligned with our out-of-the-box frontend components.

Importing integration schemas

If you have installed the Contentful module in your Storefront, you will find the default schemas provided by Alokai in the apps/storefront-middleware/sf-modules/cms-contentful/schemas directory. To import them into your own Contentful space, use the CLI tool provided by Contentful:

cd apps/storefront-middleware/sf-modules/cms-contentful/schemas

contentful space import --space-id <your-space-id> --content-file ./schemas.json

Once done, the default Content Types should appear under the Content model tab in your Contentful space.

Enabling Live Preview

Contentful has a reliable Live Preview feature. It allows editors to display a preview of their website within Contentful and verify their content changes as they make them. Alokai gives you a straightforward way to enable the feature in your frontend application.

Enabling Live Preview starts with setting up content preview URLs in Contentful. The default Alokai setup only supports out-of-the-box content previews for the Page content type which acts as a container for other components.

By setting content preview URLs, we are basically telling Contentful that - whenever we start editing some Page or Layout entry and open up the Live Preview window - it should display our app running on http://localhost:3000.

Notice how we have assigned the {entry.fields.url} token to the ?preview query param. We've chosen the url field because that's the one our Storefront uses to fetch pages.

Enabling Live Preview for the content enhanced pages

To enable preview on any enhanced page within your Contentful panel please follow these steps.

Using Preview Content

To enable preview content functionality, follow these steps:

export const config = {
  configuration: {
    token: CNTF_TOKEN,
+    previewToken: CNTF_PREVIEW_TOKEN,
  },
};

// Update the default request config...
unifiedCms:buildModule(middlewareModule<UnifiedCmsEndpoints>, {
  apiUrl: `${config.apiUrl}/contentful/unified`,
  cdnCacheBustingId: config.cdnCacheBustingId,

  defaultRequestConfig: {
    getConfigSwitcherHeader,
    headers: {
      ...getRequestHeaders(),
+      'x-preview': 'true',
    },
  },

  ssrApiUrl: `${config.ssrApiUrl}/contentful/unified`,
}),

// ...or add it to the request config for a single request...
+ import { prepareConfig } from "@alokai/connect/sdk";

const { data } = await sdk.unifiedCms.getPage(
  params,
+  prepareConfig({
+    headers: {
+      'x-preview': 'true',
+    },
+  })
);

// ...or add it to the request based on the query params
+ import { prepareConfig } from "@alokai/connect/sdk";
+ import { useSearchParams } from 'next/navigation';

+ const searchParams = useSearchParams();
+ const preview = searchParams.get('preview');

const { data } = await sdk.unifiedCms.getPage(
  params,
+  prepareConfig({
+    headers: {
+      'x-preview': preview ? 'true' : undefined,
+    },
+  })
);