Dynamic Routing with Contentful

Developer Support
1

I’m trying to accomplish something similar to what’s laid out in the below link, but specifically with dynamic routing using record fields stored in the Contentful CMS instead of Shopify:

My specific use case is an array of “Founder” cards rendered by Contentful Fetcher (each corresponding to a “Founder” entry in Contentful) that could be clicked on to route to more specific information on the founder that references the same founder entry data with more fields, much like a shop page to an item description.

So, for instance, if I clicked on a card wrapped in a Contentful Fetcher slot child, I could pass a variable that matches a field in a Contentful content entry to an encapsulating link within the slot child (e.g. url destination is “/about/[slug]”, where [slug] = {{entryID}}), and then be able to check the slug on the resulting route to pull specific information from the contentful fetcher for that specific entry. As far as I can tell that sort of encapsulated context passing and string interpolation isn’t possible in the UI builder.

Does an elegant workaround come to mind? Seems like this kind of linking would be really important in any CMS integration, but I’m still fairly new at this.

I’m using the PlasmicLoader vs. strict Codegen paradigm (NextJS) for custom components if that adds some useful context.

Thanks for your help!

2

Hi Michael, that should be a well supported case.

In the list page, you can do exactly as you said, use a contentful fetcher to fetch a collection of founders. You can use this to automatically repeat some founder card a bunch of times, and inside of this card there can be a link to some other page in your plasmic project. When pointing to the other page, make sure to pass in the actual value for the slug, such as /founders/12. You may need to right click on the field to pass in a dynamic value.

This is the key, the other page that you are linking to must be a dynamic page that has a route parameter defined on it, such as /founders/[slug]. Then from there, you can include another contentful thatcher, which passes in the slug parameter as the item to fetch. You again must right click on the property to pass in a dynamic value like the route parameter.

Please let me know if this helps / makes sense. Here is a video on how to do this. Dynamic pages and routes in Plasmic - YouTube

3

Oh , there’s a right click :melting_face:

Well, that solves that. Thank you!

1 Like