Show and Hide Experience Fragment content on a Page on Edit and preview/publish mode respectively | Community
Skip to main content
A
anshul__
Level 2
January 16, 2023
Solved

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

  • January 16, 2023
  • 3 replies
  • 1453 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by rampai

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

3 replies

H
Harishv31
Level 3
January 16, 2023

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
    Community Advisor
    Siva_SogalapalliCommunity Advisor
    Community Advisor
    January 16, 2023

    @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
      Community Advisor
      rampaiCommunity AdvisorAccepted solution
      Community Advisor
      January 17, 2023

      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

        Terms & ConditionsAccessibility statement

        Loading footer...