Hola! ¡Tenemos nuestra Comunidad en Español!

Preventing JS from loading in the Page Editor

resolver
Highlighted
Nuevo colaborador

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 Soluciones aceptada

Soluciones aceptadas
Nuevo colaborador

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 Respuestas 2
Nuevo colaborador

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.

 

Gestor de la comunidad

Thank you for sharing this @eldin Emoticono feliz

Responder
0 Me gusta