topic Re: Preventing JS from loading in the Page Editor in CMS Development

Preventing JS from loading in the Page Editor

eldin — Wed, 09 Oct 2019 10:57:59 GMT

I have inserted a Slick carousel into a page template in the "Additional markup before </body>". It works great while viewing the page, but the problem I am facing is in the editor, the script also runs when rendering the page therefore preventing me from editing the original content as the slick construct modifies the content to display it as a carousel (not desired).

I have attempted to prevent the script from running by checking if the body tag contains the hubspot-disable-focus-styles class, but the condition seems to be ignored when rendering in editor.

When running the script from the console, it does correctly detect the class and returns the correct boolean from the console in both the editor and out of editor page render. The if statement appears to be ignored and the script runs disregarding if the condition was met or not and triggers the slick construct from within the page editor.

jQuery(document).ready(function(){
  if( jQuery('body.hubspot-disable-focus-styles').length ) {
     return false;
  } else {
     jQuery('.slick-group').slick();
  }
});

Re: Preventing JS from loading in the Page Editor

eldin — Wed, 09 Oct 2019 14:57:20 GMT

The solution has been provided by the support team, they pointed me to this article.

https://designers.hubspot.com/how-to-make-custom-code-work-with-cms

How to use window.hsInEditor provided the answer.

In my instance it was just a matter of checking window.hsInEditor in the conditional.

jQuery(document).ready(function(){
    if( window.hsInEditor ) {
        return;
    } else {
        jQuery('.slick-group').slick({});
    }
});

Worked a treat.

Re: Preventing JS from loading in the Page Editor

sharonlicari — Thu, 10 Oct 2019 15:43:34 GMT

Thank you for sharing this @eldin 🙂

Re: Preventing JS from loading in the Page Editor

ojobson — Thu, 18 Jan 2024 11:07:36 GMT

This prevents the code running in the editor, but if you do not have jQuery on your website, then the code will also not run on the web page. An error is thrown because jQuery is unknown.

I tried wrapping it in a try / catch statement, but that still ran in the editor (although the code does now work on the web page).

Re: Preventing JS from loading in the Page Editor

ojobson — Thu, 18 Jan 2024 16:18:53 GMT

Solution found!! ✅

I have amended the recomended code on the support article to start the window onload check with native javascript (instead of jquery) and have tested it and it works well.

Re: Preventing JS from loading in the Page Editor

ACBlack — Thu, 03 Oct 2024 14:51:31 GMT

This works, but there's a Hubl solution:

{% if !is_in_editor %} // code snippets or files that need NOT loading when in page editor {% endif %}

Re: Preventing JS from loading in the Page Editor

LJanssens — Fri, 16 May 2025 09:51:47 GMT

@ACBlack, where do you need to add this to work?

Re: Preventing JS from loading in the Page Editor

Albusis — Fri, 16 May 2025 10:11:37 GMT

This comes to the module into the HTML/HuBL part since in the JS part you cannot use HubL.