How to insert custom content between slices in component?

Developing with Prismic
1

Hello

Running my first project with Prismic so forgive me if this was documented somewhere. I couldn't find the right information for it!

So I know that we can generate all our slices onto our page with slicemachine using

<SliceZone {...props} resolver={resolver} />

that works fine. but what if I wanted to do something like the following

<BannerSlice />
<LocalComponent />
<AllOtherSlices />

Any idea how I would go about doing that?

Thanks!

2

If you need add all custom slices before or after slice zone you can do something like this.

const Page = props => (
  <>
    // Header is before SliceZone
    <Header {...} />
    <SliceZone {...props} resolver={resolver} />
    // Footer is after SliceZone
    <Footer {...}/>
  </>
)

All you need to do is update page template. Did I answer your question? :cherry_blossom:

3

Hello thanks for the reply. However, what I meant to say is to check within the slice zone for a particular slice and add content after it before rendering the rest of the slices.

I also realise this is quite an anti-pattern so while I'd still like to figure this out I'm also looking for another design structure.

Currently what I'm doing is destructuring props.slices and filtering for the slice before calling <SliceZone /> and passing in a custom props object

4

Hey Ashley,

Like you've seen this isn't possible. The only way to do this would be to have a placeholder Slice, which you can use to pull in your non-Prismic component.

What is the exact type of content you wish to insert?

Thanks.

8

This thread has been closed due to inactivity. Flag to reopen.