Templating Slices

The Slices field is used to define a dynamic zone for richer page layouts.

Before Reading

This article assumes the following:

1. That you have saved the document object in a variable named document as shown in the Retrieve the document object page.

2. That you have included the prismic-dom library as a dependency in your project.

Example 1

Here is a simple example that shows how to add slices to your templates. In this example, we have two slice options: a text slice and an image gallery slice.

Text slice

The "text" slice is simple and only contains one field, which is non-repeatable.

Non-repeatable

primary

- A Rich Text field with the API ID of "rich_text"

Repeatable

fields

None

Image gallery slice

The "image-gallery" slice takes advantage of the repeatable slice section.

Non-repeatable

primary

None

Repeatable

fields

- An Image field with the API ID of "gallery_image"

Integration

Here is an example of how to integrate these slices into a blog post. In this case, the Slice Zone has an API ID of body.

Copy

const PrismicDOM = require('prismic-dom');

const content = document.body.map(slice => {
  // Render the right markup for a given slice type
  switch(slice.type) {
    // Text Slice
    case 'text':
      return PrismicDOM.RichText.asHtml(slice.primary.rich_text);

    // Image Gallery Slice
    case 'image-gallery':
      return slice.fields.map(image => {
         return image.gallery_image.url;
      });
  };
});

Example 2

The following is a more advanced example that shows how to use Slices for a landing page. In this example, the Slice choices are FAQ question/answers, featured items, and text sections.

FAQ slice

The "faq" slice has a question and answer field in the repeatable slice section so you can add as many as you need.

Non-repeatable

primary

None

Repeatable

fields

- A Title field with the API ID of "question"

- A Rich Text field with the API ID of "answer"

Featured Items slice

The "featured_items" slice contains a repeatable set of an image, title, and summary fields.

Non-repeatable

primary

None

Repeatable

fields

- An Image field with the API ID of "image"

- A Title field with the API ID of "title"

- A Rich Text field with the API ID of "summary"

Text slice

The "text" slice contains only a Rich Text field in the non-repeatable section.

Non-repeatable

primary

- A Rich Text field with the API ID of "rich_text"

Repeatable

fields

None

Integration

Here is an example of how to integrate these slices into a landing page. In this example the Slice Zone has the API ID body.

Copy

const PrismicDOM = require('prismic-dom');

const content = document.body.map(slice => {
  // Render the right markup for a given slice type
  switch(slice.type) {
    // FAQ Slice
    case 'faq':
       return slice.fields.map(faq => {
         return (`
           ${PrismicDOM.RichText.asHtml(faq.question)}
           ${PrismicDOM.RichText.asHtml(faq.answer)}
         `);
       });

    // Featured Items Slice
    case 'featured_items':
      return slice.fields.map(featuredItem => {
        return (`
          image url: ${featuredItem.image.url}
          ${PrismicDOM.RichText.asHtml(featuredItem.title)}
          ${PrismicDOM.RichText.asHtml(featuredItem.summary)}
        `);
      });
        
    // Text Slice
    case 'text:
      return PrismicDOM.RichText.asHtml(slice.primary.rich_text);
  };
});

Was this article helpful?

Not really

Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.