Prefab Render Issue in Page Builder

Support
#1

I’m really stumped with this one. I’ve been working on making a site using atomic design structure as per the Web Design Magic course and have hit an odd issue.

I’m creating prefabs to build my pages with. My first prefab worked exactly as intended, but my second prefab refuses to render the children inside of Cornerstone once added to a page. I’ve triple checked and the only difference between my first prefab and this one is that I created a slot component for the section first.

So here’s how it looks as a component:

image
image3819×1386 389 KB

Everything works as intended here. Structure is using a component from my #slots cause i wanted to create a few different layout from it. Inside of that slot is a row element with 2 columns, The 2 columns are set as slots for this prefab. I’ve populated those slots with my atom elements.

image
image422×510 11.9 KB

So far so good, however when I then go to use that Prefab in my page it’s not rendering any of the atoms:

image
image3312×606 191 KB

Though they definitely are there according to the sidebar and I can interact with them in the inspector:
image

And it shows up as intended on the actual page itself:

image
image3804×1343 276 KB

So I’m stumped on this one… Any help appreciated.

#2

Hi @adsmedia,

Thanks for reaching out.
I have checked the Home Page and found the problem while checking in the Cornerstone. There might be some different reasons behind your issue, I would like to suggest troubleshooting the following common issue to help us to recognize the reason.

1.Theme Related Issue
2.Plugin Conflict
3.Theme Update related issue
4.Child Theme Related issue
5.CSS/JS Customization
6.Disabling Cache
7.Disabling CDN

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins unless you are subscribed to One. If not subscribed, kindly consult with a developer or contact the plugin author.
Please note that we do not provide support for custom codes and 3rd party plugins unless you are subscribed to One service.
If none of the above helps, please copy your live site to a staging server so we can troubleshoot freely without breaking your live site.
And give us access in the secure note including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

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

secure-note
secure-note1040×250 15.3 KB

Thanks

#3

I network disabled all plugins, then disabled all plugins on the subsite. Purged all caches. Removed each piece of CSS I had on components/global and tested and there was no change in the behavior. No theme file modifications.

I’ve left them all off for now so you have a clean test environment. I added the secure note already to the opening post when I created it.

Any help/guidance is appreciated.

#4

Hey @adsmedia,

The given URL seems incorrect. It returns and Error 404.

  • See the secure note below

Thanks.

#5

Yes, as mentioned in the secure note.

#6

Hello @adsmedia,

You may need to check the structure of your elements. I have created a duplicate prefab.

  • See the link in the secure note below.

Thanks.

#7

Thanks for looking into it but I’m still seeing an issue here. You didn’t actually create a prefab. Slots were not enabled on the 2 columns nor was it set as a prefab in the element settings. So while you created a component that looked the same, it’s lacking the functionality.

image
image766×568 39.8 KB

image
image364×918 9.13 KB

As soon as I make those tweaks to your section the same thing happens. So I’m just trying to find out where the problem/bug stems from.

My structure is:

  • Slot Component (Set as prefab once loaded into #prefabs from #slots)
    • Row (2 Columns)
      • Column 1 (Slot)
        • Components
      • Column 2 (Slot)
        • Components

So the “Section” is a component created in #slots with a div acting as the slot. Then in #prefabs I added that component in and inserted a row element in it’s slot that I set to 2 columns as I wanted this prefab to have 2 columns. I set each column as a slot and added my components. I then checked the Enable Prefab box in the element settings for the section which is the slot. component so that when I add it to my page I should be able to a) change the content in the components in the slots and b) add additional components/content if I want to when I reuse that prefab elsewhere. However whenever I try and use that prefab in a page the contents are blank in the page builder, though the controls work in the inspector and it renders fine on the front end page.

So something is going on here. Is there a bug that’s preventing the render when a slot is nested like this? I could not find anything in the documentation that indicates this shouldn’t work.

Ryan

#8

Just a heads up i needed to resume this project. I saw you made a test page while you figure this out this morning. I’m assuming from the looks of it you’ve managed to recreate the problem.

In the meantime I have to push ahead so I’ve started building out content to the home page. I wont touch the test page so you can continue testing there if you need to.

Thanks,
Ryan