MEC looks broken in the page builder

[Thommynat0r]

Hi Theme.co Team,
if I open the page with the MEC events list, it looks broken if you scroll down a bit:

It seems like it loads the list multiple times with errors?

https://www.enjoybim.de/pro/content/134

Last time similar problem was visible in the frontend and your team has solved it by changing from “Content Area” element to “text element”.

Do you think there is a bug in the mec implementation in the pro theme or is it my site?

Do you suggest to eliminate all “classic elements” and replace it with the new elements?

Thanks!

[prakash_s]

Hello Thomas,

Thanks for writing to us.

I would suggest you use the “Raw Content” element where you can use the MEC events shortcode to list events.

Hope it helps
Thanks

[Thommynat0r]

hi prakash_s,
Thank you for the suggestion. Unfortunately this will break the formatting in the frontend similar as “content area” element

[marc_a]

Hi Thomas,

This could be a cache issue because when I check the page on the front-end, it is just working fine. I suggest that you clear your browser cache.

Logged in:

Logout:

Hope that helps.

Thank you.

[Thommynat0r]

Hi marc,

it happens in the pro page builder:

look at my scrollbar, how long the page is. All of that is buggy mec event elements. On the frontend it looks good.

whole page:
https://1drv.ms/u/s!Ar9xxoyu3-Zhkfxzqdl1iP_56H481w?e=z2ZVxS

I have cleared my browser cache before.

Thank you
Thomas

[marc_a]

Hi Thomas,

I investigate further about the issue on your website but I couldn’t find any reason why it is acting that way. I also found out that you had an outdated Pro theme and WordPress core. I suggest that you update your Pro theme to the latest version and also update your WordPress core version.

Hope that helps and let us know how it goes.

Thank you.

[Thommynat0r]

Hi marc,
I have updated wordpress and the pro theme. The issues in the editor are still there

Best,
Thomas

[ruenel]

Hello Thomas,

You should be inserting the MEC shortcode like this: [MEC id="17"] because wrapping the shortcode with a <span></span> will only give you an invalid HTML output.

Please be advised that the MEC shortcode will output a JS code:

<script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "Event",
            "eventStatus": "https://schema.org/EventScheduled",
            "startDate": "2021-07-27",
            "endDate": "2021-07-28",
            "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
            "location":
            {
                "@type": "Place",
                                "name": "EnjoyBIM Akademie",
                "image": "https://www.enjoybim.de/wp-content/uploads/2021/07/IMG_0921_800x450_hq.jpg",
                "address": "Karl-Frey-Str. 5, 70499 Stuttgart"
                            },
            "organizer":
            {
                "@type": "Person",
                "name": "EnjoyBIM",
                "url": "https://www.EnjoyBIM.de"
            },
            "offers":
            {
                "url": "https://www.enjoybim.de/veranstaltungen/dynamo/",
                "price": "799",
                "priceCurrency": "€",
                "availability": "https://schema.org/InStock",
                "validFrom": "2021-07-27T00:00"
            },
            "performer": [{"@type":"Person","name":"Thomas Vogt","image":"https:\/\/www.enjoybim.de\/wp-content\/uploads\/2021\/06\/Thomas.jpg","sameAs":""}],
            "description": "",
            "image": "https://www.enjoybim.de/wp-content/uploads/2021/07/Dynamo-fuer-Revit-Vector-remake-v5_hq85.jpg",
            "name": "Dynamo für Revit Basisschulung – Präsenz und Online (2 Tage)",
            "url": "https://www.enjoybim.de/veranstaltungen/dynamo/"
        }
        </script>

This JS code will not be rendered by the builder thus displaying it as plain text. We highly recommend that you remove the text element and use the Raw Content element where you will insert the MEC shortcode instead. The Raw Content element has the option that you can disable the preview of any custom code or shortcode that you have added to it.

Hope this makes sense.

[Thommynat0r]

Hi ruenel,
I have removed the span from the text.
I have tried to use raw content before. But this will destroy the frontend page. If I use “raw content” all the problems are then on the frontend:

By using “Text” Element, the problems are only visible in the page builder.

Best,
Thomas

[ruenel]

Hello Thomas,

I created two test pages and I still got the same result. The JS code is still displayed by the builder. The JS code did not get rendered by the builder. I would recommend that you ignore the builder view since it does not display on the frontend. I will have this reported to our issue tracker so that our developers can investigate why the MEC shortcode was not rendered properly.

Thank you for your understanding.