Installation

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

npm install @ncremental/contentful-spartacus

pnpm add @ncremental/contentful-spartacus

yarn add @ncremental/contentful-spartacus

bun add @ncremental/contentful-spartacus

Import Module

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

app.module.ts

import { NcrContentfulModule, provideConfiguration } from "@ncremental/ncr-contentful";
import {NgModule} from "@angular/core";
 
@NgModule({
  declarations: [...],
  imports: [
    NcrContentfulModule,
    // 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.

app.module.ts

import { NcrContentfulModule, provideConfiguration } from "@ncremental/ncr-contentful";
import { CmsPageGuard } from '@spartacus/storefront';
 
@NgModule({
  declarations: [...],
  imports: [...],
  providers: [
    provideConfiguration({
      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.

Conclusion

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.

Introduction Rich Animations