Show and Hide Experience Fragment content on a Page on Edit and preview/publish mode respectively

[anshul__]

I have a requirement to show some Specific content of the experience Fragment on a page if it is in edit mode and the experience fragment should be hidden in preview/publish mode.

While using wcmmode.edit, i am getting the value as false at both edit and publish mode for the component authored as experience fragment. 

Can somebody help me with a way to fulfill this requirement?

[Harishv31]

Hi ,

Can you please try this using this below code.

if($.cookie('cq-editor-layer') == "Preview") {

console.log("Preview Mode");

}else if ($.cookie('cq-editor-layer') == "Edit") {

       console.log("Edit Mode");

}or

if($.cookie('wcmmode') == "preview") {

console.log("Preview Mode");

}else if ($.cookie('wcmmode') == "edit") {

       console.log("Edit Mode");

}

hope this helps.

Thanks

[Siva_Sogalapalli]

@anshul__ you can achieve this is simply by adding conditions in sightly code. 

Example:

<sly data-sly-test="${wcmmode.edit}">
             <p>Edit mode content/code goes here- this will be displayed on only edit mode of page/XF</p>
</sly>

You can explore other wcmmodes as well if you want. 

<sly data-sly-test="${wcmmode.disabled}">
             <p>Preview mode content /code goes here</p>
</sly>

[rampai · Accepted solution]

Hi @anshul__ ,

Have you tried refreshing the page to confirm this behavior? AEM does not auto-refresh page when you switch from edit to preview and vice-versa.

I tried this on local instance and I do see the changes after page refresh but not before that. Please check cq:listeners in case you need an auto refresh every time mode is switched.

Thanks,

Ram