Preventing JS from loading in the Page Editor

Résolue
Highlighted
Nouveau contributeur

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

 

 

Solution acceptée / Solutions acceptées

Solutions approuvées
Nouveau contributeur

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.

 

2 RÉPONSES 2
Nouveau contributeur

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.

 

Gestionnaire de communauté

Thank you for sharing this @eldin Smiley heureux

Répondre
0 Vote / Votes