Modal Popups/accordions not firing on Landing Pages

Developer Support CMS Development
1

Hi everyone,

Hoping someone can shed some light on an issue I’ve been having with a module and landing pages. I’m utilizing a module that has several content options, such as an accordion and modal pop up button. When I implement this module on our webpage template, it works perfectly fine. However, once it’s used on our Landing Page template, the js for both the accordion and modal pop up doesn’t fire. Both the webpage and landing page template use the base.html boilerplate with the caveat being '{% block header %}
{% global_partial path=‘./partials/header-landing-page.html’ %}
{% endblock header %}’ being used in the landing page template so that it hides our main navigation and replaces it with the standard landing page header.

I’ve realized it is this {% block header %} that is causing both the accordion and the modal pop up to not fire. Any suggestions on how I could get around this?

2

Hi @TAmaral7

It’s really hard to tell what’s causing this issue based on the details you have provided. Please share more details like the code snippet or the page’s URL if possible.

Thanks!

3

Hey Gaurav, here is an example of the module working as it should on a webpage, with the ‘Request a demo’ button firing the modal pop up: https://www.ecoonline.com/
Here is a an example of it not firing on a landing page: https://www-ecoonline-com.sandbox.hs-sites.com/test-lp-with-modal

Both pages are using the same base.html template but the Landing Page template has:
{% block header %}
{% global_partial path=‘./partials/header-landing-page.html’ %}
{% endblock header %} - in order to hide the main nav on Landing Pages

4

Hi @TAmaral7 ,

The problem is that jQuery isn’t loading on your landing page, but it is on your homepage:

Schermafbeelding 2024-09-25 om 21.11.41.png
Schermafbeelding 2024-09-25 om 21.11.41.png862×104 31.5 KB

That is why it is working on your homepage, but not on your landing page.

As the landing page is on a different domain, it could be that the setting to load jQuery isn’t checked in your page settings.

5

Thanks for the reply Teun. The difference in URL is because the LP is a staging link as I didn’t want to place the test page on our production side. I have checked off jQuery and it still made no difference. I can’t figure out what the file isn’t firing

6

Are you loading jQuery in the head or in the footer?

If it is the footer, could you try loading it in the head? I still see the same error in the console.

7

Hi @TAmaral7

I would suggest keeping the jQuery option checked on and using the 1.7.x version.
Are you using a third-party app for your modal?
Looking at your homepage, it looks like you are using a third-party app for your cookie consent modal.
I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!