Landing Page Builder in 4.1.1 not working

Product Support Mautic 4 Install/Upgrade Support
1

Your software
My PHP version is : v7.4.27
My MySQL/MariaDB version is 15.1 Distrib 10.6.5-MariaDB
Mautic. Version: 4.1.1 (Fresh Install)

Problem
My problem is : I had all sorts of problems updating from 3.x to 4.1.1, so did a fresh install, and am getting everything set up again. So far all is good, except the Landing Page Builder.

When I go to edit a template and launch the Builder, I can see that there is something off with the builder itself just by looking at the screen. Still, if I try to 0 any content, it will not allow me to drag and drop anything into the builder area. There is no way to edit. The Save and Close buttons do not work, etc.

Screen Shot 2021-12-27 at 9.40.19 AM
Screen Shot 2021-12-27 at 9.40.19 AM3278×1822 296 KB

2

I have solved similar issues with regenerating the assets:

php bin/console mautic:assets:generate --env=prod

I cant say for sure this will resolve your issue, but its worth a shot.

Let us know how it goes.
Regards, M.

1 Like
3

Huh, got this error:

In FileLocator.php line 44:                                                                                       
                                                                                                                  
  The file "/var/www/mautic/app/config/config_prord.php" does not exist.

In thinking maybe you had a typo, I ran

php bin/console mautic:assets:generate --env=prod

That did run, but didn’t solve the problem

4

yes, thanks for pointing it out. I fixed it.

5

Still, that does not take care of the issue I am having. Any ideas?

6

What does it say, when you look into dev. console? It sounds like there is an issue with JS. Do you see any error messages if you right click somewhere on the page → click Inspect → go under Console tab?

7

I’m sorry I can’t be more helpful here, but I have had intermittent issues with both editors on both 3.3 and 4.x – sometimes it will let me edit but if I add too much it won’t save and I lose everything, sometimes the editor freezes similar to what you describe. I’ve posted about it here before too but haven’t been able to find someone who can reproduce the problem. One thing it might be related to is server memory – it seems like it occurs more frequently when the available memory is low but I couldn’t swear it’s related. Please, please do post your solution if you find one, and good luck to you.

1 Like
8

Same problem with landing pages and email with GrapedJSBuilder. I’m using same Mautic 4.1.1 update with PHP 7.4.3 & MariaDB 15.

Check you log for errors. Do you see the following?

These errors are showing in the Mautic log : [2021-12-31 05:33:36] mautic.CRITICAL: Uncaught PHP Exception RuntimeException: “Unable to write in the cache directory (/var/www/mautic/app/…/var/tmp/twig/06).” at /var/www/mautic/vendor/twig/twig/src/Cache/FilesystemCache.php line 57 {“exception”:"[object] (RuntimeException(code: 0): Unable to write in the cache directory (/var/www/mautic/app/…/var/tmp/twig/06). at /var/www/mautic/vendor/twig/twig/src/Cache/FilesystemCache.php:57)"}

Seems to be related to mautic install directory/var/tmp/twig directory permissions?
drwxrwxr-x 258 root root 4096 Dec 2 09:48 twig

I managed to fix by changing ownership to caddy:caddy (or whatever web server you are using). Now GrapesJS builder is loading correctly

9

The issue happens, because you have the wrong headers in your HTML file. (I know it’s a fresh install, I’m just saying what the reason is.)
Make sure you have proper html with doctype and head etc.
You can modify this via mysql or if you prefer UI: phpmyadmin or adminer.

10

Here is what I am getting in console when I load one of the default templates:

content.service.js:119 Uncaught Error: No valid HTML template found
    at Function.getOriginalContentHtml (content.service.js:119)
    at l.value (builder.service.js:153)
    at l.value (builder.service.js:102)
    at Object.s [as launchBuilder] (builder.js:33)
    at HTMLButtonElement.onclick (1:1496)
    at Object.trigger (libraries.js?v03e47807:683)
    at HTMLButtonElement.<anonymous> (libraries.js?v03e47807:688)
    at Function.each (libraries.js?v03e47807:153)
    at jQuery.fn.init.each (libraries.js?v03e47807:144)
    at jQuery.fn.init.trigger (libraries.js?v03e47807:688)
11

Thanks for this advice. No problem trying an edit in MySQL. What Table/Field am I looking for?

12

‘Page’ i believe, or ‘pages’

13

OK, this worked for me, but did expose a problem (at least in my install). Let me explain so this is all on record.

Remember, I created a Landing Page, and clicked Builder to edit it. The two templates I had available after a fresh 4.1.1 install were “Code Mode” and “Blank”. Regardless of which I chose, I got the legacy page builder with errors, inability to edit, or even click the Save or Close buttons.

I went into the database, in the pages table, and saw the custom_html field was blank. I pasted in the html content I had in a separate 2.8 install for the same landing page.

When I went back into the Mautic UI, I could now open the page, and I get the NEW editor. All works well for this page.

However:
The problem still exists if I create another landing page. I would need to go into the database and paste the HTML if I want it to work. So, I am assuming there is an issue in the theme? With that in mind, here is what I have in the config.json of the /mautic/themes/blank/config.json:

{
  "name": "Blank",
  "author": "Mautic team",
  "authorUrl": "https://mautic.org",
  "builder": ["legacy", "grapesjsbuilder"],
  "features": ["page", "email", "form"]
}

I am not sure if I should be seeing other themes, or where the “Code Mode” should be pulling from, or if I am even on the right track. But if I look at the config.json under each theme, the following themes have "page" listed under "features":

Sunday, Skyline, Oxygen, Neopolitan. Nature, Mauve, Fresh - Wide, Fresh - Left, Fresh - Fixed, Fresh - Center, and Coffee

None of these, however, have "builder": ["legacy", "grapesjsbuilder"],
in their corresponding config.json.

Hoping this detail sheds some light by chance?

14

The line:

 "builder": ["legacy", "grapesjsbuilder"],

has to be put to make old themes compatible with new GrapeJS editor: Email & Landing Page Builder | Mautic

15

OK, and that does make them show up, but when I try to open them, I still get a non-functional editor as I showed in the first post. So I can see the options in the UI, but cannot use them. I can force it in by directly inserting my HTML into the database, but that is a temporary workaround.

So the question is, is this a problem others are also experiencing, or do I have something messed up in relation to my file structure, config, or DB?

16

Hi,
The issue is, that your templates still generate ‘wrong’ html, which loads the old editor by error.
Joey

17

I’m also experiencing the same problem. This even happens after I edit something really small, like adding text. Something interesting is that it was working fine and it got this way after some edits. It happens every time I edit a landing page now.

My Mautic version is 4.1.2 (update from a fresh install) with PHP 7.4.27 and MariaDB 10.3.32.