Slices Templating with Javascript

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

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.

Primary

non-repeatable

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

Items

repeatable

None

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

Primary

non-repeatable

None

Items

repeatable

- 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.

Copy
var PrismicDOM = require('prismic-dom');

postContent.data.postContent.map(function(slice) {
    // Render the right markup for a given slice type
    switch(slice.slice_type) {
        case 'text': return PrismicDOM.RichText.asHtml(slice.primary.rich_text)
        case 'image-gallery': 
            return slice.items.map(function(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.

Primary

non-repeatable

None

Items

repeatable

- 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.

Primary

non-repeatable

None

Items

repeatable

- 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.

Primary

non-repeatable

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

Items

repeatable

None

Integration

Here is an example of how to integrate these slices into a landing page.

Copy

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

content.data.body.map(function(slice) {
    switch(slice.slice_type) {
        case 'faq':
             return slice.items.map(function(faq) {
                 return (`
                     ${PrismicDOM.RichText.asHtml(faq.question)}
                     ${PrismicDOM.RichText.asHtml(faq.answer)}
                 `)
             })
        
        case 'featured_items':
            return slice.items.map(function(featuredItem) {
                return (`
                    image url: ${featuredItem.image.url}
                    ${PrismicDOM.RichText.asHtml(featuredItem.title)}
                    ${PrismicDOM.RichText.asHtml(featuredItem.summary)}
                `)
        
        case 'text: return PrismicDOM.RichText.asHtml(slice.primary.rich_text)
    }
})

Old Style Slices (deprecated)

Old Style Example 1

Here’s an example that shows how to integrate the old-style Slices into a blog post. The two available Slice choices in this example are Rich Text fields and Images.

Copy
var PrismicDOM = require('prismic-dom');

postContent.data.postContent.map(function(slice) {
    // Render the right markup for a given slice type
    switch(slice.slice_type) {
        case 'rich-text': return PrismicDOM.RichText.asHtml(slice.value)
        case 'image': return slice.value.url
    }
})

Old Style Example 2

The following is a more advanced demonstration of the old-style Slices for a landing page. In this example, the Slice choices are FAQ question/answers, featured items, and text sections.

Copy
var PrismicDOM = require('prismic-dom');

page.data.body.map(function(slice) {
    switch(slice.slice_type) {
        case 'faq':
             return slice.value.map(function(faq) {
                 return (`
                     ${PrismicDOM.RichText.asHtml(faq.question)}
                     ${PrismicDOM.RichText.asHtml(faq.answer)}
                 `)
             })
        
        case 'featured-items':
            return slice.value.map(function(featuredItem) {
                return (`
                    image url: ${featuredItem.image.url}
                    ${PrismicDOM.RichText.asHtml(featuredItem.title)}
                    ${PrismicDOM.RichText.asHtml(featuredItem.summary)}
                `)
        
        case 'text: return PrismicDOM.RichText.asHtml(slice.value)
    }
})