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.
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.
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
Non-repeatable
primary
None
Repeatable
fields
- An Image field with the API ID of "gallery_image"
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.
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;
});
};
});
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.
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"
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"
Non-repeatable
primary
- A Rich Text field with the API ID of "rich_text"
Repeatable
fields
None
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.
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);
};
});