Hello,
I have a Nuxt page that displays about ten slices (using <slice-zone:components="components":slices="prismicDocument.data.slices" />).
One of the slides that I have to integrate presents 2 lists of elements side by side (see the attached design)
I wonder how to integrate these two lists into the definition of my slice? Indeed, in a slice, I only have one "repeatable zone".
What advice would you give me in order to be able to manage these two lists of elements within a slide?
Thanks in advance.
Eric
I suppose you're using Slice Machine. In this case, Slice variations are possible. So I'd suggest you create a Slice for each column. Then you'd need to render the two columns as a row in the front-end.
The Slice variation would have a differentiator. I can not tell the difference between the columns of the images you sent me, but I imagine it could be something like the title, or the icon.
Thank you for your prompt response!
Indeed, I use slicemachine and it seems like a good idea.
On the other hand, to display the slices on the front (NuxtJS), I use the following line: <slice-zone:components="components":slices="prismicDocument.data.slices" />
So I'm going to be forced to render each slice individually instead of using the line above?
Thus, the people responsible for the content will no longer be able to add blocks autonomously because these will not be rendered in a loop.
You should always render Slices using the Slice Zone component from the kits. That's the correct way of doing it. The rest should be managed using CSS. I suppose that if you want to have precisely the layout you showed me, you would need to put a conditional that would cover the case where there is only one column. But the loop shouldn't be a problem. You can make a conditional statement that renders one variation or the other.
Thanks for the suggestion to play with the css.
However, I think I found a solution by adding a flag in the repeatable type of the slice indicating whether the element should be displayed in the left or right list.
