Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

Level 2

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?

1 Accepted Solution

Avatar

Correct answer by
Level 6

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

View solution in original post

3 Replies

Avatar

Level 4

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

Avatar

Community Advisor

@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>

Avatar

Correct answer by
Level 6

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