Reference Content/Sub Slices in Slicemachine

Developing with Prismic
1

Can someone help me understand the best way to do this?

I created a "table" creation system for our pages. It has a few parts:

  1. A "Table" custom document.
  2. Table content slices created in Slice Machine to let content authors create column headers and row content for the table.
  3. A slice created in Slice Machine for the "Page" custom document with a content reference to the "Table" so the content author can decide which table should show on the page and where in the layout it should go.

The issue is I'm unsure how, in the code for the page's slice in SM, I should get the referenced content and the sub-slices within that linked content piece.

I'm using Next.JS and I don't believe I can use getStaticProps within the slice component and what I get from the "slice" prop data on it's own is just the primary data items with the UID of the linked media.

Ideally, I'd be treating the slices in the Table custom doc as their own styled sub elements within the parent slice but I haven't found any documentation on if there's a way to do that.

4

Hi @dhayes,

I'm trying to construct a query to fetch the slices you have mentioned, but it will be really helpful if you can share with me your repository name (in a private message if necessary) and some basic queries of the content and I will try to correct and optimize.

I highly recommend you construct your query using the REST API by using the API browser.

Looking forward to your reply,
Fares

5

I think I found a solution since posting:

This is my parent slice, and I'm using SliceZone to have slices within the slice which are called by a useEffect function.

If you know a more optimized way to do this, though, it would be welcome.

export default function Table({ slice }) {

    const [table, setTable] = useState(null);

    useEffect(() => {
        async function getTableData(uid) {
            const client = createClient();
            const docs = await client.getByUID("table", uid);

            setTable(docs);
        }

        getTableData(slice?.primary?.table?.uid);
    }, [])

    if(table)
    {
        return (
            <div className="container mx-auto text-center py-20">
                <PrismicRichText field={slice?.primary?.title} />
                <h3 className="subtitle">
                    <PrismicText field={slice?.primary?.subtitle} />
                </h3>

                <PrismicRichText field={slice?.primary?.description} />

                <div className="max-w-7xl mx-auto mt-10">
                    <table className="table">
                        <SliceZone slices={table?.data?.body} components={components} />
                    </table>
                    {table?.data?.footer &&
                        <div className="table-footer">
                            <PrismicRichText field={table?.data?.footer} />
                        </div>
                    }
                </div>
            </div>
        )
    }

    return <LoadingSpinner />
}
1 Like
6

Thanks for letting us know