Dynamic Content AND layouts with contentful

Plasmic Studio Questions
1

Hi everyone,

I am trying to use plasmic with contentful to create re-useable sections that work across all pages, but I am little stuck trying to create a structure that makes sense, and I’m a little confused on how I can have plasmic display dynamic components based on data coming from contentful.

My data structure is as follows

  • Page
    • List of Sections
      • Component 1
        • Fields Related to Component 1
      • Component 2
        • Fields Related to Component 2
      • Component 3
        • Fields Related to Component 3

Here is a diagram for reference

image
image1235×840 25.1 KB

How do I create a wrapper component that can draw components dynamically depending on the data received? I suppose the area mainly in question is in pink in the diagram. I want the layout of the page to change based on what users add in contentful.

This just allows for blocks of content to be moved across the site.

1 Like
2

You can try using a Condition Guard.

I made an example project to test this out.

I created a Custom Component called Conditional Component.

I create 3 more Custom Components: Circle Component, Square Component and Triangle Component.

In Conditional Component I’ve added 3 Condition Guards (assuming you only have 3 types of components you wish to render dynamically), and set the condition to render based on the dynamic value of a prop. And in each Condition Guard I’ve added a the Circle, Square and Triangle components.

Now if the prop value is “circle” it will render Circle Component, “square” will render Square Component etc…

In your case, instead of using a text prop, maybe you can use a object or data prop and render the component based on a property of the data fetched

2 Likes