0

I have developed a website utilizing Sitecore XP 10.3, and I am currently encountering an issue wherein the Experience Editor's code is interfering with the functionality of my website. Specifically, the header, which is intended to remain fixed at the top of the page, is being obscured by the Experience Editor ribbon. Additionally, I am experiencing similar conflicts with JavaScript functionality.

Furthermore, I have observed that a YouTube video link is automatically playing upon opening or refreshing the website within the Experience Editor.

Would it be advisable to modify the CSS and JavaScript to accommodate the Experience Editor's requirements?

Improve this question

1 Answer 1

Reset to default
1

Yes, when building the CSS for your site you must account for the CSS and view of Experience Editor.

The easiest way to do this is by adding a CSS class to the <body> element of your page when you are in edit mode. The way to do this will vary depending on whether you are headless or MVC.

If you are MVC you can add the following JS to your site:

var isPageEditor = function(){
     return !!(Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor);
};

Now you can set a body CSS class, you could also do it in your Razor view by checking:

Sitecore.Context.PageMode.IsPageEditor

or

Sitecore.Context.PageMode.IsPageEditing

There are some other page modes too that you might want to check for: IsPreview, IsPageEditorDesigning, IsPageEditorNavigating

You will need to figure out which work for your implementation.

If you are headless, then it will depend on the front end stack you are using, but there will be a Sitecore Context where you can check the page mode.

Improve this answer
1
  • Okay, Thank you.
    – Yash Gupta
    Commented 2 days ago

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.