6

Ok, i see many examples of this online but none seems to work, maybe those examples are for older Sitecore. I simply want to detect if the user is on regular site view or if they are on experience editor using some JS. I was messing with console and saw this method Sitecore.PageModes.PageEditor.ExperienceEditor.length but it always return 0. I saw many examples with c#/razor but interested in js for now.

Improve this question

6 Answers 6

Reset to default
8 
var isPageEditor = function(){
    return !!(Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor);
};
 
if(isPageEditor()) {
    // Write your logic here
}

Here are some more details:

https://itsmycode.com/how-to-detect-page-editor-mode-in-sitecore-through-code/

https://mattneil.co.uk/2016/12/08/detect-sitecore-page-modes/

Improve this answer
2
  • i actually tried this but on regular view i am getting this error "Uncaught ReferenceError: Sitecore is not defined at pageEditorMode"" it works on editor mode . Basically i am trying to disable sticky nav on experiance editor. i put a try catch around like below to solve for now. Is there a better way to solve this? . i am putting code as one of the answer
    – jsPlayer
    Mar 5, 2019 at 20:07
  • Needs a type check (typeof Sitecore !== "undefined" && Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor)
    – Dan
    Dec 20, 2019 at 11:25
4

This has worked for us. Note that we adjusted our layout view to add the sc-edit-mode CSS class to the body, which also helps identify Experience Editor mode.

isPageEditor() function

function isPageEditor() {
    return (!!((typeof Sitecore !== "undefined") && (typeof Sitecore.PageModes !== "undefined") && (typeof Sitecore.PageModes.PageEditor !== "undefined")) || (document.body && document.body.getAttribute("class") === "sc-edit-mode"));
};

View modifications

<html class="@(Sitecore.Context.PageMode.IsExperienceEditor ? "sc-edit-mode" : string.Empty)">
Improve this answer
2

Sitecore.PageModes.PageEditor.ExperienceEditor is an internal EE function that you can`t call direct to return true/false.

As @Vlad mentioned, in EE you can check it with

var isExperienceEditor = !!(Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor)

(it means that all these objects are not undefined == you are in EE).

But 'Sitecore' namespace doesn`t exist in Normal page mode and as a workaround you can use your custom global variable that is initialized in a layout of your page (with razor or aspx syntax)

<script>
    var isExperienceEditor = Json.Encode(Sitecore.Context.PageMode.IsExperienceEditor);
</script>
Improve this answer
2

Here's what I'm using which works in regular view too (and no double bang (!!) or try/catch needed):

const isExperienceEditor = () => window.Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor ? true : false;
Improve this answer
1

Thanks to vlad lobagiu. I tried vlad lobagiu answer but on regular view i am getting this error "Uncaught ReferenceError: Sitecore is not defined at pageEditorMode"" it works on editor mode, i am guessing sitecore object is not available on published site(make sense) . Basically i am trying to disable sticky nav on experiance editor, I put a try catch around like below to solve for now. Is there a better way to solve this?

    try {
     // Sitecore global name space in page editor or preview mode
     var pageEditorMode = function () {
        return !!(Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor);
     };

     if (pageEditorMode()) {
        console.log("Experience editor detected, not adding sticky white header")
     }
     else {
        function()

     }
  } catch (error) {
     if (error) {
                    function()

     }
  }
Improve this answer
1

A combination of the two best answers here works well.

var isEditMode = function() { 
    return typeof Sitecore !== "undefined" && Sitecore 
        && Sitecore.PageModes && Sitecore.PageModes.PageEditor;
}

var isPreviewMode = function() { 
    return typeof Sitecore !== "undefined" && !isEditMode()
}

var isNormalMode = function() { 
    return typeof Sitecore === "undefined"
}


if (isEditMode ()){
    // runs if page is in edit mode
}

if (isPreviewMode()){
    // runs if page is in preview mode
}

if (isNormalmode()){
    // runs if page is in normal mode
}

Vlad's answer returns Uncaught ReferenceError: Sitecore is not defined if Sitecore doesn't exist.

Other Dan's answer relies on a css class which is unneeded for detection, but is useful for .

Improve this answer

Your Answer

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

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