Contentful Spartacus Integration


To install the Ncremental Contentful Spartacus Library in your Angular project, you can use npm or yarn:

npm install @ncremental/contentful-spartacus

Import Module

Import the NcrContentfulModule within your Angular app module file (app.module.ts):

import { NcrContentfulModule, provideConfiguration } from "@ncremental/ncr-contentful";
import {NgModule} from "@angular/core";
  declarations: [...],
  imports: [
    // Other imports
  // Other module configurations
export class AppModule { }

This module is crucial for establishing the link between your Spartacus application and Contentful.

Provide Custom Configuration

You need to provide custom configuration for the library in your app.module.ts file. This includes settings for Contentful, routing, and breakpoints.

import { NcrContentfulModule, provideConfiguration } from "@ncremental/ncr-contentful";
import { CmsPageGuard } from '@spartacus/storefront';
  declarations: [...],
  imports: [...],
  providers: [
      contentful: {
        space: "your-space-id",
        environment: "your-environment",
        accessToken: "your-access-token",
      routing: {
        home: {
          regex: /^\/?$/g,
          contentfulType: "ncrPagesBlank",
          filter: () => ({ "fields.slug": "home" }),
          canActivate: [CmsPageGuard],
        // Add more routing configurations as needed
      breakpoints: {
        xs: { minWidth: 0 },
        sm: { minWidth: 576 },
        md: { minWidth: 768 },
        lg: { minWidth: 992 },
        xl: { minWidth: 1200 },
      //  Only required if you use custom breakpoint names
      // breakpointMapping: {
      //     xs : 'extraSmall',
      //     sm : 'small',
      //     md : 'medium',
      //     lg : 'large',
      //     xl : 'extraLarge'
      // }
export class AppModule { }

Contentful Configuration

  • space: Your Contentful space ID.

  • environment: The environment within your Contentful space.

  • accessToken: The access token used to authenticate requests to Contentful.

Routing Configuration

  • regex: Regular expression for matching the URL path. Regex also support path params. To map a segment to a parameter simply use the regex named capturing group. See documentation Named Capturing Group or SEO Documentation example

  • contentfulType: To utilize this type, it should be mapped directly to a type in Contentful. For our specific implementation, we use the ncrPagesBlank type, which we’ve defined and included as a default content type in Contentful.

  • filter: The filter function allows you to specify extra filters when retrieving content. For instance, if we use filter: () => ({ "fields.slug": "home" }), it means we’re filtering the content to only include items where the slug field matches “home”.

  • canActivate: Guards to determine whether the route can be activated.

Breakpoints Configuration (Optional)

  • breakpoints : To tailor the layout to various screen sizes, you’ll need to designate the minimum width for each breakpoint. To accomplish this functionality in your project, you must integrate the Ncremental Toolkit. After installing the toolkit, you can access features like responsive fields.


By following the provided steps, you can seamlessly integrate the Contentful Composable Storefront Library into your Composable Storefront web application. This integration enables efficient communication between your Composable Storefront app and Contentful, enhancing the flexibility and content management capabilities of your storefront.

The Contentful Composable Storefront Library seamlessly integrates with Ncremental Toolkit, enhancing the content management capabilities of your application. By combining these tools, you can efficiently manage and display content from Contentful while ensuring responsiveness across various devices.