Nesting Components

[toddbenton]

I have a similar question which was answered by Alex in this thread: Nested Components. I don’t understand his answer “One caveat is that you can’t use a Component within the same set where it gets exported from. So you’ll need to make multiple component sets.”

Here’s my case:
I’ve created a component of tabs using the Tab element. I want all of the tabs and the content within the tabs to be added onto multiple pages. I know I used to be able to do this with global blocks but shouldn’t I also be able to do this with Components? The important part is that if I need to update the content, I want to be able to do it in one place rather than having to edit the individual product pages where this component is being added. I watched the videos on Components, etc. in Web Design Magic. I understand the use of Parameters with Components but in this use case, I don’t need that. My case is much simpler. How can I accomplish this?

[tristup]

Hi @toddbenton,

Thanks for reaching out.
Yes, you can use the Nested Components as said by Alex in the reference thread. Can you please login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password
– Specific component where you have used the nested component.

To create a secure note, click the key icon underneath any of your posts.

Thanks

[toddbenton]

How about a video showing how to do it? In the documentation here https://theme.co/docs/component-builder-overview there is an explanation of nesting in the Enable Prefab bullet point of the Advanced Component Usage section, but there is no explanation of how to do it or any examples. It says “any children you have nested within your Component will come out looking exactly like that as well.” With “that” meaning the way you have it styled in the component builder is how it will be output when you drag it in.

After reading this explanation, I created a section and within it I created the tabs and the other elements (all children of the section). So I assumed that when I exported the section as a prefab it would mean that all of the children of that section would be included when I added the component to my page. But that doesn’t happen. I get the section and tabs, but I don’t get the headlines, images, text, etc. Obviously, I’m not grasping what is meant by nested in this context. Do I have to export each element separately? I tried that and it said you can’t export this because it’s an ancestor of …or you can’t export this because it’s a parent of…

Compare this image to the one added to the previous post:

I can give you access but if you do it for me, then I don’t learn how to do it myself.

Thanks, Todd

[charlie]

Without seeing your site we’re not sure why you wouldn’t have elements in your tab showing up. If you want the component to just show up in it’s entirety you probably don’t need prefab enabled. Prefab helps if you have a component slot and you want elements in that slot to be placed into the page when you insert a component. Much like the components in WDM: Section. You don’t need to export each item in the tab if you don’t need to. But if you did you would need to export in another component like in WDM: Atoms which are smaller reusable components. Let us know if this helps.

[toddbenton]

Thanks Charlie for writing. I removed the prefab and tried again but it still didn’t work. I’m sending credentials in a secure note so you can investigate, but maybe it has to do with the fact that it’s a multisite? Could that be a factor? I’ll send credentials for the America’s site which is where the Component is located.

[charlie]

I think you discovered a bug with components that have a child element that is a tab with elements. I noticed the component works on the frontend, but not in the preview. We’ll get that fixed in a release or two. You aren’t doing anything improperly with your component though. Have a great day.