Render Slices
This technology has no Slice Machine integration
This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.
In Prismic, slices are repeatable, rearrangeable content sections of your webpage. On this page, you'll learn how to template your document's slices in your Express project.
In Prismic, navigate to the custom type that you're developing (for instance, "page" or "blog_post") and create slices. Learn more about slices in What is a Slice?
Want to follow along with this example?
If you want to use the example slices on this page, you can follow along. Create a new custom type in your repository. In the custom type editor, open the JSON editor and copy-paste this JSON.
Warning! This will overwrite the current configuration, fields, and slices for this custom type.
This will create a simple custom type with a UID and two slices: text_slice and image_gallery_slice. Create a document with this custom type. Then change your project setup to query this custom type (as described in Fetch Data) and proceed.
Inside your views/ directory, Create a slices/ directory. In your slices/ directory, create separate ejs templates for each slice that you created in Prismic.
Each ejs template will receive the slice object as a prop.
To template your array of slices, create a SliceZone.ejs template in views/. The template will receive your array of slices as a prop called SliceZone.
Then, it will loop over the slices in the SliceZone prop with a map() function and render an EJS template with the data from each slice based on a conditional block that evaluates the slice type.
An example might help illustrate how this works:
In our example, we have two slices: a text_slice and an image_gallery_slice. You can see what the API response for a slice zone looks like in Template Content.
In views/slices/ Create separate templates to render each slice field: TextSlice.ejs and ImageGallery.ejs.
In the API response, the content of the repeatable zone is found in the items property and the content of the non-repeatable zone is inside the primary property of the slice. Here's how you might render different fields inside the ejs templates:
- TextSlice.ejs
- ImageGallery.ejs
<h3><%- slice.primary.key_text %></h3><h2>
<%- slice.primary.gallery_title %>
</h2>
<% slice.items.map(eachImage => { %>
<img src="<%- eachImage.gallery_image.url %>"
alt="<%- eachImage.gallery_image.alt %>"
/>
<% }) %>Here is what SliceZone.ejs will look like:
<% getSlices = ((SliceZone) => {
return SliceZone.reduce((prevSlices, slice) => {
if (slice.slice_type === 'text_slice') {
return prevSlices + include('./slices/TextSlice.ejs', { slice: slice })
}
else if (slice.slice_type === 'image_gallery_slice') {
return prevSlices + include('./slices/ImageGallery.ejs', { slice: slice })
}
else {
return '<h1>No Slices found</h1>'
}
}, '')
}) %>
<%- getSlices(SliceZone) %>
Open the ejs template where you would like to render your slices and add the SliceZone. This should be the page where you are passing your response from the query.
Including the SliceZone on page.ejs:
<%- include('SliceZone', {SliceZone: document.data.body}) %>Can't find what you're looking for?
Need technical Support? Spot an error in the documentation? Get in touch with us on our Community Forum.