Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

Avatar

Level 1

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 5

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 5

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