CouchCMS • View topic - Page Builder - pb_wrapper duplicating footer (not head)

Problems, need help? Have a tip or advice? Post it here.

9 posts Page 1 of 1

Page Builder - pb_wrapper duplicating footer (not head)

: scratz; Registered User

: Posts: 106; Joined: Tue Feb 03, 2015 9:10 pm; Location: Tucson, AZ

by scratz » Sun Oct 27, 2024 3:53 am

Hello Crack Team of Couch!

Please excuse all the details. The crux of my problem is at the end in bold.

I've run into a problem with Page Builder that is baffling me. Per the instructions when it comes to the html wrapping for the iframe:

For wrapper, because we only have a single one, we'll go with the default name pagebuilder searches for - that is 'pb_wrapper'.
Copy the code for the wrapper we extracted above in a file named 'pb_wrapper.html' and place it within 'couch/snippets/pb/misc/theme/'.

this is my pb_wrapper.html

Code: Select all

<cms:embed 'page_elements/head.htm' />
<cms:show pb_tile_content />
<cms:embed 'page_elements/tail.htm' />

This is the embedded 'head' code:

Code: Select all

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <base href="<cms:show k_site_link />">
        <title> Website</title>
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta content="" name="keywords">
        <meta content="" name="description">

        <!-- Google Web Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Edu+TAS+Beginner:wght@400..700&family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

        <!-- Icon Font Stylesheet -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

        <!-- Libraries Stylesheet -->
        <link rel="stylesheet" href="<cms:show k_site_link />/lib/animate/animate.min.css"/>
        <link href="<cms:show k_site_link />/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">


        <!-- Customized Bootstrap Stylesheet -->
        <link href="<cms:show k_site_link />/css/bootstrap.min.css" rel="stylesheet">

        <!-- Template Stylesheet -->
        <link href="<cms:show k_site_link />/css/style.css" rel="stylesheet">
    </head>

    <body>

And this is the embedded 'tail' code:

Code: Select all

        <!-- JavaScript Libraries -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
        <script src="lib/wow/wow.min.js"></script>
        <script src="lib/easing/easing.min.js"></script>
        <script src="lib/waypoints/waypoints.min.js"></script>
        <script src="lib/owlcarousel/owl.carousel.min.js"></script>
        

        <!-- Template Javascript -->
        <script src="js/main.js"></script>
    </body>

</html>

These are obvioulsy just the minimum I need for the iframe rendering correctly. This is my pagebuilder template:

Code: Select all

<cms:pagebuilder name='main_pb' label='PageBuilder' skip_custom_fields='1' order='-1'>
         
        <cms:section label='Team' name='team_module'  masterpage='blocks/team.php' mosaic='blocks' />
        <cms:section label='Services' name='service_module'  masterpage='blocks/service.php' mosaic='blocks' />
        <cms:section label='Projects' name='project_module'  masterpage='blocks/project.php' mosaic='blocks' />
        <cms:section label='About' name='about_module'  masterpage='blocks/about.php' mosaic='blocks' />
        
    </cms:pagebuilder>

and here is my pagebuilder rendering code on the page:

Code: Select all

<cms:capture into='pb_tile_content' >
    <cms:show_pagebuilder 'main_pb'>
        <cms:show k_content />
    </cms:show_pagebuilder>
</cms:capture>
<cms:render 'pb_wrapper' 'page' />

My problem comes when I look at the rendered page. The 'tail' code is rendering twice. Once after my final block renders and then again as the full page (which is the normal time it should). The block looks fine in the Admin panel, but when I get to the actual site, the duplication of the 'tail' affects the page. I've removed my 'tail' embed from pb_wrapper.html and it will look perfect on the rendered site page, but looks horrible in the Admin panel (as you can imagine).

My 'head' code is not doubled on the site rendered page. It seems as if the code that strips away pb_wrapper.html when the page renders is missing stripping out the 'tail' portion, or something in the pb_tile_content is causing that process to stop running.

Is it possible that since my Snippets are in another folder than default ( https://www.couchcms.com/forum/viewtopic.php?f=5&t=13148&start=30#p39332 this is affecting the process?

Otherwise, I have scoured the forum and gone over the instructions line-by-line and I can't figure out why this is happening. Any ideas? I'm happy to PM site creds for a quick peek if needed.

the page is online here where you can see the code duplicating (if you look at source)
https://smbcustomwebs.com/sandbox/staging/mods-pagebuilder/pages.php

Re: Page Builder - pb_wrapper duplicating footer (not head)

: trendoman; Registered User

: Posts: 2893; Joined: Thu May 22, 2014 3:57 pm

by trendoman » Fri Nov 01, 2024 3:16 pm

Can't test this at the moment

Perhaps somebody else with existing installation could have a look?

https://t.me/couchcms_chat

Re: Page Builder - pb_wrapper duplicating footer (not head)

: KK; Moderator

: Posts: 8687; Joined: Wed Dec 01, 2010 5:35 pm

by KK » Tue Nov 05, 2024 2:35 pm

@scratz
Apologies for a delayed response (but, as I am sure you know, I am convalescing).

Apropos the problem you mentioned, I don't see any issue with the code below you are using so let us try and debug things a bit.

Code: Select all

<cms:capture into='pb_tile_content' >
    <cms:show_pagebuilder 'main_pb'>
        <cms:show k_content />
    </cms:show_pagebuilder>
</cms:capture>
<cms:render 'pb_wrapper' 'page' />

The docs for pagebuilder (viewtopic.php?f=5&t=13148) says this for the mentioned code -

The <cms:show_pagebuilder 'main_pb'> block in the code above fetches in the rendered HTML of all the blocks selected for the page being displayed.
It, however, does *not* fetch the 'wrapper' HTML. So, you can either manually place that wrapper HTML in the template itself or use the technique shown above
where we capture and pass on the blocks HTML to <cms:render 'pb_wrapper' 'page' /> which automatically wraps that in the wrapper code we used in the admin-panel.

Which means that using <cms:render 'pb_wrapper' 'page' /> is just a convenience to put the wrapper code (head, body, footer etc.) around the bare code of the blocks used in the pagebuilder. If we choose to use just the following, it would output only the code for the blocks -

Code: Select all

<cms:show_pagebuilder 'main_pb'>
    <cms:show k_content />
</cms:show_pagebuilder>

I suggest you please use just this bit of code in your frontend template and make sure the HTML outputted matches exactly with the blocks. Of course, the output will look wonky as all the styling etc would be missing (the 'head' and 'tail' code would be missing) but that is expected - we just want to make sure that there is no extraneous code appearing.

Assuming you find that the outputted code is as per expectation, next try directly embedding the 'head' and 'tail' snippets around the code we used e.g.

Code: Select all

<cms:embed 'page_elements/head.htm' />
<cms:show_pagebuilder 'main_pb'>
    <cms:show k_content />
</cms:show_pagebuilder>
<cms:embed 'page_elements/tail.htm' />

Examine the output and it should differ from the first instance in only the addition of the embedded head and tail.
This should be the output you are looking for and you can continue using it.

Any anomalies found in the two steps above should give you a clue as to what is going wrong.

Please test and let me know.

Re: Page Builder - pb_wrapper duplicating footer (not head)

: scratz; Registered User

: Posts: 106; Joined: Tue Feb 03, 2015 9:10 pm; Location: Tucson, AZ

by scratz » Wed Nov 06, 2024 4:22 am

OMG @KK, it's sooooooo nice to hear from you. Please make sure you take it easy on yourself.

Thank you for this. I will test it asap and get back with you with the results. I'm in America, but please let me know if there is anything I can do for you

Re: Page Builder - pb_wrapper duplicating footer (not head)

: scratz; Registered User

: Posts: 106; Joined: Tue Feb 03, 2015 9:10 pm; Location: Tucson, AZ

by scratz » Thu Nov 07, 2024 1:18 am

@KK,

Thank you, I've gotten some time to test this today.

One of the first things I did was to take off 'nested pages' - there was no change after that, I just thought I'd mention it.
When I remove the code as you mentioned,

Code: Select all

<cms:show_pagebuilder 'main_pb'>
    <cms:show k_content />
</cms:show_pagebuilder>

the rendered page on the site AND in the admin panel looks normal. What I mean is, it looks like I would want it to look with everything working correctly. It wasn't wonky at all. I'm only seeing one "tail" in the source code on both the site rendered page and the admin panel rendered page. To be sure, I cleared cache, I "edited" by blocks and re-saved, I created new blocks, deleted some... and still everything renders in both places exactly as it should normally. Doing a source in both the admin and site page, I am seeing the head and tail both as I normally would if there were never any issues.
But you are saying:

Of course, the output will look wonky as all the styling etc would be missing (the 'head' and 'tail' code would be missing) but that is expected - we just want to make sure that there is no extraneous code appearing.

So, is this 'head' and 'tail' code extraneous in the Admin Panel?

This has always been my full template (except now without nested pages and stripping the coder you mentioned):

Code: Select all

<?php require_once('mods_admin/cms.php') ?>
<cms:template title='Pages' order='-1' clonable='1' >
    
     <cms:pagebuilder name='main_pb' label='PageBuilder' skip_custom_fields='1' order='-1'>
         
        <cms:section label='Team' name='team_module'  masterpage='blocks/team.php' mosaic='blocks' />
        <cms:section label='Services' name='service_module'  masterpage='blocks/service.php' mosaic='blocks' />
        <cms:section label='Projects' name='project_module'  masterpage='blocks/project.php' mosaic='blocks' />
        <cms:section label='About' name='about_module'  masterpage='blocks/about.php' mosaic='blocks' />
        
    </cms:pagebuilder>

    <cms:config_list_view  exclude='default-page' searchable='1' >

    </cms:config_list_view>
    
</cms:template>
<cms:embed 'page_elements/head.htm' />
<cms:embed 'page_elements/spinner.htm' />        
<cms:embed 'page_elements/nav_search.htm' />

    <cms:show_pagebuilder 'main_pb'>
        <cms:show k_content />
    </cms:show_pagebuilder>
<cms:embed 'page_elements/footer.htm' /> 

<cms:embed 'page_elements/tail.htm' />
<?php COUCH::invoke(); ?>

So it looks like the solution is stripping off the capture into='pb_tile_content'. Still, though, it never doubled the 'head' section, so I'm wondering what's happening.

It looks like that specific problem is solved. Thank you KK and I'm really glad you're back!

Also, thank you @trendoman for your help with everything as well!

Re: Page Builder - pb_wrapper duplicating footer (not head)

: KK; Moderator

: Posts: 8687; Joined: Wed Dec 01, 2010 5:35 pm

by KK » Thu Nov 07, 2024 12:55 pm

Thank you KK and I'm really glad you're back!

Thank you @scratz

I am glad to be back too!

As for the code duplication, going with what you said "This has always been my full template", your original code would have been something like this -

Code: Select all

<cms:embed 'page_elements/head.htm' />
<cms:embed 'page_elements/spinner.htm' />        
<cms:embed 'page_elements/nav_search.htm' />

<cms:capture into='pb_tile_content' >
    <cms:show_pagebuilder 'main_pb'>
        <cms:show k_content />
    </cms:show_pagebuilder>
</cms:capture>
<cms:render 'pb_wrapper' 'page' />

<cms:embed 'page_elements/footer.htm' /> 

<cms:embed 'page_elements/tail.htm' />

As can be seen, the 'head' and 'tail' elements are already present.
Now when the <cms:render 'pb_wrapper' 'page' /> in the code above executes, it gets replaced by the contents of 'pb_wrapper.html' so effectively the template now becomes as follows -

Code: Select all

<cms:embed 'page_elements/head.htm' />
<cms:embed 'page_elements/spinner.htm' />        
<cms:embed 'page_elements/nav_search.htm' />

<cms:capture into='pb_tile_content' >
    <cms:show_pagebuilder 'main_pb'>
        <cms:show k_content />
    </cms:show_pagebuilder>
</cms:capture>
<cms:embed 'page_elements/head.htm' />
<cms:show pb_tile_content />
<cms:embed 'page_elements/tail.htm' />

<cms:embed 'page_elements/footer.htm' /> 

<cms:embed 'page_elements/tail.htm' />

Notice how the 'head' and 'tail' elements get introduced by the wrapper thus duplicating them.

So, is this 'head' and 'tail' code extraneous in the Admin Panel?

In the admin panel, each block is an IFRAME so essentially it is a complete page on its own (i.e. each block has a header and a footer wrapped around the blocks content). This is done by the 'pb_wrapper.html' snippet.

Usually, the header and footer part as used in the admin-panel is exactly the same as you would on the frontend and so we can use the 'pb_wrapper.html' snippet again. For example, this could be your code (notice we are not embedding any header or footer explicitly)-

Code: Select all

<?php require_once('mods_admin/cms.php') ?>
<cms:template title='Pages' order='-1' clonable='1' >
    
     <cms:pagebuilder name='main_pb' label='PageBuilder' skip_custom_fields='1' order='-1'>
         
        <cms:section label='Team' name='team_module'  masterpage='blocks/team.php' mosaic='blocks' />
        <cms:section label='Services' name='service_module'  masterpage='blocks/service.php' mosaic='blocks' />
        <cms:section label='Projects' name='project_module'  masterpage='blocks/project.php' mosaic='blocks' />
        <cms:section label='About' name='about_module'  masterpage='blocks/about.php' mosaic='blocks' />
        
    </cms:pagebuilder>

    <cms:config_list_view  exclude='default-page' searchable='1' >

    </cms:config_list_view>
    
</cms:template>

<cms:capture into='pb_tile_content' >
    <cms:show_pagebuilder 'main_pb'>
        <cms:show k_content />
    </cms:show_pagebuilder>
</cms:capture>
<cms:render 'pb_wrapper' 'page' />

<?php COUCH::invoke(); ?>

Which would then expand into the following bringing in the header and footer-

Code: Select all

<?php require_once('mods_admin/cms.php') ?>
<cms:template title='Pages' order='-1' clonable='1' >
    
     <cms:pagebuilder name='main_pb' label='PageBuilder' skip_custom_fields='1' order='-1'>
         
        <cms:section label='Team' name='team_module'  masterpage='blocks/team.php' mosaic='blocks' />
        <cms:section label='Services' name='service_module'  masterpage='blocks/service.php' mosaic='blocks' />
        <cms:section label='Projects' name='project_module'  masterpage='blocks/project.php' mosaic='blocks' />
        <cms:section label='About' name='about_module'  masterpage='blocks/about.php' mosaic='blocks' />
        
    </cms:pagebuilder>

    <cms:config_list_view  exclude='default-page' searchable='1' >

    </cms:config_list_view>
    
</cms:template>

<cms:capture into='pb_tile_content' >
    <cms:show_pagebuilder 'main_pb'>
        <cms:show k_content />
    </cms:show_pagebuilder>
</cms:capture>

<cms:embed 'page_elements/head.htm' />
<cms:show pb_tile_content />
<cms:embed 'page_elements/tail.htm' />

<?php COUCH::invoke(); ?>

Which is exactly how things are rendered in the admin-panel.

However, in your case, this approach would not have been sufficient as the header part on the frontend had more elements in it than what was sufficient in the admin-panel - namely the

Code: Select all

<cms:embed 'page_elements/spinner.htm' />        
<cms:embed 'page_elements/nav_search.htm' />

So, using the technique that we are now would be the way to go.

Hope this sheds some light on the problem.

Re: Page Builder - pb_wrapper duplicating footer (not head)

: trendoman; Registered User

: Posts: 2893; Joined: Thu May 22, 2014 3:57 pm

by trendoman » Thu Nov 07, 2024 1:31 pm

KK wrote: Hope this sheds some light on the problem.

Happy to see you've recuperated enough to give this thread a resolutive conclusion!

https://t.me/couchcms_chat

Re: Page Builder - pb_wrapper duplicating footer (not head)

: KK; Moderator

: Posts: 8687; Joined: Wed Dec 01, 2010 5:35 pm

by KK » Thu Nov 07, 2024 2:29 pm

Thanks @trendoman

I also sincerely thank you for the diligence with which you tended to the forum in my absence.

Re: Page Builder - pb_wrapper duplicating footer (not head)

: scratz; Registered User

: Posts: 106; Joined: Tue Feb 03, 2015 9:10 pm; Location: Tucson, AZ

by scratz » Fri Nov 08, 2024 2:26 am

I agree with @KK, @trendoman, you have been magnificent!

Thank you @KK for your thoughtful explanation. This really is a magnificent setup!

Post a reply

Previous Next

9 posts Page 1 of 1

Return to Bug Reporting and Troubleshooting