Content Area Modal: Load its content after the click

[Misho]

Hi!

Do you guys have a quick solution for loading the Content area Modal’s content only after the button is clicked?

The reason is TheFork Booking iFrame that is placed behind the Book Now button on this site:

Restaurant & Bar | Core Bruxelles

It contains its own Google Analytics code added in the third-party backend, which triggers double view because that code is loaded along with the one in the page’s head.

So the way to avoid this would be to load the iframe (Content Area Modal’s content) only if the “Book Now” button is clicked. I guess that should be possible.

Thank you!

[ruenel]

Hello @Misho,

Thanks for writing in!

You may enable the Dynamic Rendering in your Content Area modal.

We would love to know if this has worked for you. Thank you.

[Misho]

Hi!

I did test that option. It resets the form fields if the modal is closed and then opened again. That is actually undesired behavior in my case, but I could live with it, if it actually didn’t load the content on page load.

But, it does load it, despite it says “Load… on element toggle”.

On the French page for example, https://www.core-bruxelles.be/, i have the toggle in three places (Header top, Mobile Header bottom, and the First section in the Body), all containing https://module.lafourchette.com/fr_BE/module in the content. When you inspect the source code on the page load, there are three instances of these loaded.

Thanks!

[christian]

Hey @Misho,

The contents inside the modal when Dynamic Rendering is enabled is not loaded or treated as regular HTML until the modal toggle/button is clicked.

In the source code, it’s wrapped in a script tag with a custom type. That is currently the method to access the modal’s content fast and without connection to the database.

Thanks.

[Misho]

Thank you @christian_y for your clarification!

It is loaded in the sense that if you place an element containing Google Analytics code, this code will be read and executed, causing double page view. So this method does not hide the code properly for this situation.

I guess it is an enough rare situations for the Dynamic Rendering to be acceptable in most cases.

Thanks again!

[christian]

Hey Misho.

Sorry, I forgot to take into account the GA code. I’m not sure why the GA code runs. I tested a Javascript code and it doesn’t run until I clicked the toggle.

Adding Javascript when Dynamic Rendering is enabled is not appropriate though as you’re putting script tags inside script tags so even if my test JS code runs after the toggle is clicked, it might just be a quirk.

If you don’t use script tags, the JS code will run on page load and break or display the code after you click the toggle.

I’ll post this as feature request. For now, though, you’d need to find a third-party solution. You’d essentially need some kind of AJAX loading.

Thanks.