CMS Development

eldin
Member

Preventing JS from loading in the Page Editor

SOLVE

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();
  }
});

 

 

1 Accepted solution
eldin
Solution
Member

Preventing JS from loading in the Page Editor

SOLVE

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.

 

View solution in original post

4 Replies 4
eldin
Solution
Member

Preventing JS from loading in the Page Editor

SOLVE

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.

 

ojobson
Top Contributor

Preventing JS from loading in the Page Editor

SOLVE

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).

0 Upvotes
ojobson
Top Contributor

Preventing JS from loading in the Page Editor

SOLVE

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.

 

 

<script>
window.onload = function() {
   if (window.hsInEditor) { 
      return; //stops running here when in the editor
   } else {
      //this code runs on your live website, but not in the editor
   }
}
</script>

 

0 Upvotes
sharonlicari
Community Manager
Community Manager

Preventing JS from loading in the Page Editor

SOLVE

Thank you for sharing this @eldin 🙂


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes