Your SliceZone is empty - How to have this not show when choose to have no slices in a particular document?

Im getting the (expected) error "Your SliceZone is empty" when I do not attach any slices to the page.

However the functionality Im wanting is for including slices to be optional and for it to just show nothing if no slices are added.

Here's my slice-zone tag:

<slice-zone type="post" :uid="$route.params.uid" :doc="doc" />

I understand I'll need to add a v-if, BUT if what?

How do I do a check to see if there are no slices and to only show this code when there are slices.
Or alternativley how do I hide the above error when I intentionally add no slices to the document.

Thx

Hi Deming,

Your v-if in this case might something like be :v-if="!body" or :v-if="!data.body".

Alternatively you can do a custom query as described here and run the v-if on that:

Though I'm curious what your use case is for not using Slices in a Slice Machine project? Is it something that can't be done with Slices?

Thanks.

The use case here is part of keeping it simple for content writers.
We've created a content_type called 'posts' for blog posts.

The underlying component has a fixed header & footer and things like that.
The writer just edits the description to add their article details and then has the ability to add slices from the slice zone for themselves if they want to add a gallery or whatever.

If not the writer can just write the article and does not have to think which slices they should be adding beyond just writing the article.

Currently in our design work we have to ask the question

  1. Is this a component that should always be on the page that we dont want content writers to have to think about or be able to remove? Or is this something that content writers will want to optionally add to a document?

That then determines whether we implement the thing as a slice or component.

I think this is arising as there seems to be some missing permissions that are meaning devs need to use adding components in code as a way of locking in mandatory components.

I might suggest that you review this area of why devs might still use components and add support so that more can be handled in slices.

To address where we dont want writers to HAVE TO rememember to add key slices to the page (aka a call to action that's just above the footer). It would be good within the Content Type editor to be able to add slices as DEFAULT ON. Eg they show anytime a new document is made but can be removed by the writer.

To address where we dont want writers to be able to remove components, it makes sense to have a permission level (Senior Writer/Editor whatever) where they can add slices to a content type that are compulsory and cant be removed by a writer (but they could).

With those permissions in place it removes any remaining logic to keep using components in the project which Im managing currently and hence this question.

It wasn't working with :v-if="!data.body" but it did work without the semi-colon.

So this worked for me (I had defined doc rather than data per your example)

v-if="!data.body" <=== Removed the semi-colon before the 'v'

<slice-zone v-if="!doc.body" type="post" :uid="$route.params.uid" :doc="doc" />

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

I thought I had a solution but that didnt work.
Further reviewing the logic, isnt it that you wouldn't test for No Body, but rather that there is something in body.

Either way none of the solutions presented so far are working.

I'm seeking further guidance. Can you please test a solution yourself and advise.

Hey Team,

I'm checking with my colleagues what solution we can find and then I'll get back to you.

1 Like

Hey again @online,

So I talked with the team and the empty Slice Zone will only appear in development mode.

If/when you statically generate your nuxt project this will no longer appear.

Hi there,

Just wondering if there was any recent change on the Slice Machine, as I'm having the exact same issue as the user who open this thread. When I generate or publish to Netlify, that "Your SliceZone is empty" box is still showing (local and online). I double checked and the NODE_ENV variable is set to "production" so this should all be automatic and hide the box, correct?

Thanks in advance.

Hey Pedro,

Apologies for the long delay in response. How are you deploying the website, it needs to be deployed statically with nuxt generate.

Hi Phil,

No worries at all! I'm deploying to Netlify and there I'm running the command npm run generate.

Best,
Pedro

Can you send me a link to the live site?

Have you also tried the proposed solution of adding v-if="!doc.body" to Slice Zone?

The workaround I found was to use v-if="page.data.body.length" on the Slice Zone, where page contains the data coming from Prismic. v-if="!doc.body" wasn't working for some reason.

OK, I'm glad you got the workaround functioning at least.

I just want to be certain of the use case here, this is in a situation where you have a document where you aren't using the Slice Zone, but you might be using the Static zone of the document, is that correct?

Yes, exactly. I have some static fields that are being used and passed to the page and them I have an optional Slice Zone that might or might not have content.

OK, great thanks. I'm going to message the team and see if there's anything we can implement to do this check for you automatically and make a feature request for it.