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.
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).
ene 18, 20246:12 AM - editado ene 18, 202411:18 AM
Colaborador líder
Preventing JS from loading in the Page Editor
resolver
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>