Adding Content Slices

Content Slices allows developers to design autonomous and reusable UI elements that Content managers can use to build dynamic pages. Front-Commerce has first-class support for Prismic Slices. This page explains how developers can use the tool we provide to create content-driven dynamic pages.

With Content Slices, Front-Commerce embraces the "Don't Ship Pages, Ship a Page Builder" vision brought by Prismic. See how to make slices a part of your authoring strategy.

How to use Slices?

Integrating a Prismic Slice Zone and its Slices into your project is a 3 steps process:

• Expose data in GraphQL
• Render your Slices
  • Create your Content Composition
  • Register your Content Composition
  • Retrieve and display content

Expose data in GraphQL

In this example, we will add a Slice Zone with 3 types of Slices to an existing home page.

First, update your GraphQL Schema to reflect the Slice Zone definition. A Slice Zone will be designed as a GraphQL union type.

my-extension/schema.gql

type Homepage {
  title: String
  mainContent: [HomePageSlice]
}

union HomePageSlice = Carousel | Push

type Carousel {
  slides: [CarouselSlide]
}

type Push {
  blocks: [PushBlock]
}

type PushBlock {
  title: String
  image: String
  cta: CallToAction
  format: String
  cellSize: String
}

#[…]

type CallToAction {
  url: String
  text: String
}

In your resolvers, load your content as usual with the Prismic loader.

In addition to the fieldTransformers parameter in the defineContentTransformers, the definition accepts a supportedSlices key. It allows to define to a data structure for the Slices available in the Custom Type.

For a Custom Homepage type containing a title and a Slice Zone with the slices declared above (HomePageSlice), the change would look like this:

my-extension/runtime.ts

import { type PrismicLoaders } from "@front-commerce/prismic/graphql";
import { createGraphQLRuntime } from "@front-commerce/core/graphql";

export default createGraphQLRuntime({
  contextEnhancer: ({ config, loaders }) => {
    const PrismicLoader = (loaders as PrismicLoaders).Prismic;
    const { GroupTransformer, TitleTransformer, ImageTransformer, LinkTransformer, RichtextToTextTransformer } = PrismicLoader.transformers;

    const contentTransformOptions = {
      fieldTransformers: {
        title: new TitleTransformer(),
      },
      supportedSlices: [
        new Slice("carousel", {
          graphQLType: "Carousel",
          fieldTransformers: {
            items: new GroupTransformer({
              slide_title: new TitleTransformer(),
              slide_image: new ImageTransformer(),
              slide_cta_url: new LinkTransformer(),
              slide_cta_text: new RichtextToTextTransformer(),
            }),
          },
        }),
        new Slice("push", {
          graphQLType: "Push",
          fieldTransformers: {
            items: new GroupTransformer({
              push_title: new TitleTransformer(),
              push_block_image: new ImageTransformer(),
              push_url: new LinkTransformer(),
              push_link_text: new RichtextToTextTransformer(),
            }),
          },
        }),
        // ... add other Slice definitions here
      ],
    }

    PrismicLoader.defineContentTransformers(
      "home_page",
      contentTransformOptions
    );

    return {};
  },
});

The resolved content will now contain Slices contributed for the Slice Zone in the content.body field. Repeatable fields in a Slice are always made available under the content.items field of the Slice content.

Here is an example showcasing how resolvers could allow to adapt Prismic content to the schema you've designed (and overcome the technical naming constraint brought by Prismic):

my-extension/runtime.ts

import { createGraphQLRuntime } from "@front-commerce/core/graphql";

export default createGraphQLRuntime({
  contextEnhancer: ({ config, loaders }) => {
    // [...]
  },
  resolvers: {
    Homepage: {
      mainContent: (content) => content.body,
    },
    Carousel: {
      slides: (content) => content.items,
    },
    Push: {
      blocks: (content) => content.items,
    },
    PushBlock: {
      cta: (content) => ({
        url: content.push_url,
        text: content.push_link_text,
      }),
    },
  },
});

That's it! You should now be able to view data from Prismic when requesting your application's GraphQL server:

query HomeQuery {
  homepage {
    title
    mainContent {
      __typename
      ... on Carousel {
        slides {
          title
        }
      }
      ... on Push {
        blocks {
          title
          image
          cta {
            url
            text
          }
        }
      }
    }
  }
}

Let's now see how to map this data to frontend components.

Render your Slices

To ease the creation of a Slice Zone, Front-Commerce provides the Content Composition API, which allows you to create reusable building blocks for your content.

---

This is it! 🎉 You can now try to create new Slices in Prismic or reorder them, and your page should reflect these changes after publication.