Sitecore Experience Editor components hierarchy

-
In Experience Editor when clicking the Add a New Component button in the ribbon it will show +Add Here buttons to enable content authors to add multiple components but is it will be quite difficult for the Content author as when you start adding more and more components to placeholders on a given page, it becomes confusing where you’re placing what, especially if you’re nesting placeholders.

 where I need to identify easily the component hierarchy ie) under which rendering my component getting added. In Sitecore by Out of box, we always select the placeholder and use the Parent button 


To make this possible in the Experience Editor, we going to use custom pipeline extension,  This will add some helpful separation between the various components and their placeholders. It will also better define, visually, the layering and hierarchy of components within placeholders.

Creating Custom Pipeline:


  • Add reference to Sitecore.Mvc.ExperienceEditor.dll
  • Create a class inherits from IMarker


         public class EditorComponentRenderingMarker : IMarker 
       { 
             private string _componentName; 
             public EditorComponentRenderingMarker(string componentName) 
            { 
                 _componentName = componentName; 
             }   
            public string GetStart() 
           { 
                 string formatstring =  
                "<div class=\"component-wrapper {0}\"><span class=\"wrapper- 
                header\">{1}</span><div class=\"component-content clearfix\">"; 
                return string.Format(formatstring, _componentName.Replace( 
                " ", string.Empty), _componentName); 
           }  
           public string GetEnd() 
          { 
              return "</div></div>"; 
          } 
    }
  • Create a class inherits from Wrapper
              public class EditorRenderingWrapper : Wrapper 
            { 
                  public EditorRenderingWrapper(TextWriter writer, IMarker marker) 
                  : base(writer, marker) 
               { 
               } 
           } 
  • Create a class inherits from RenderRenderingProcessor
            public class AddEditorRenderingWrapper : RenderRenderingProcessor 
          { 
       public override void Process(RenderRenderingArgs args) 
       { 
          if (args.Rendered || Context.Site == null ||  
             !Context.PageMode.IsExperienceEditorEditing ||  
             args.Rendering.RenderingType == "Layout") 
          { 
             return; 
          }  
         var marker = GetMarker(args); 
          if (marker == null) 
          { 
             return; 
          } 
 
         args.Disposables.Add(new EditorRenderingWrapper(args.Writer, marker)); 
       } 
 
      public IMarker GetMarker(RenderRenderingArgs args) 
       { 
          var renderingContext = RenderingContext.CurrentOrNull; 
          IMarker marker = null; 
          var renderingItem = args.Rendering.RenderingItem;  
         if (renderingItem != null) 
          { 
             marker = new EditorComponentRenderingMarker(renderingItem.Name); 
          } 
 
         return marker; 
       } 
 
 
 
    } 
  • Create another class inherits from RenderRenderingProcessor
 

 public class EndEditorRenderingWrapper : RenderRenderingProcessor 
    { 
       public override void Process(RenderRenderingArgs args) 
       { 
          foreach (IDisposable wrapper in  
             args.Disposables.OfType<EditorRenderingWrapper>()) 
          { 
             wrapper.Dispose(); 
          } 
       } 
    } 

  • Register in config file 
 <!-- Rendering Wrappers --> 
 <mvc.renderRendering>  
   <processor  patch:after="processor[@type='Sitecore.Mvc.ExperienceEditor.Pipelines. Response.RenderRendering.AddWrapper, Sitecore.Mvc.ExperienceEditor']" type=" xxxxxx.AddEditorRenderingWrapper, xxxxxxx"/>  

   <processor  patch:before="processor[@type='Sitecore.Mvc.Pipelines.Response. RenderRendering.AddRecordedHtmlToCache, Sitecore.Mvc']" type=" xxxxxxxx.EndEditorRenderingWrapper, xxxxxxxx"/>  
</mvc.renderRendering> 

  • Sample CSS to highlight placeholders in experience editor

 
 body.edit-mode .component-wrapper { 
   border: 1px solid #9dd; 
   border-top: none; 
   box-sizing: border-box; 
   margin: 10px; 
   overflow: hidden; } 
 
 
 
   body.edit-mode .component-wrapper span.wrapper-header { 
     display: block; 
     color: #111; 
     background-color: #9dd; 
     height: 24px; 
     line-height: 24px; 
     padding: 0 10px; 
     font-size: 12px; 
     font-family: Arial, sans-serif; 
     } 
   body.edit-mode .component-wrapper .component-content { 
     padding: 10px; 
     min-height: 50px; } 
     body.edit-mode .component-wrapper .component-content .component-wrapper { 
       margin: 10px 0; } 
 
 
 
  body.edit-mode .mdl-container .mdl-locations-container .scEmptyImage { 
   display: none; } 
  •   Add the CSS to the body tag when page in Experience editor mode 
      <body class="@(Sitecore.Context.PageMode.IsExperienceEditor ? "edit-mode" : string.Empty)"> 

Output:




Reference:
Professional-sitecore-8-development-phil-wicklund















 

Comments

Post a Comment

Popular posts from this blog

Custom Item Url and resolving the item in Sitecore - Buckets

-
Image
I have a situation to update the Item URL to be SEO friendly as my items in content tree looks like below. In the above image in order to resolve the item, Sitecore will find the item from the below URL http://domainname/en/dine/nv/chicken but I need to form a URL that is more SEO friendly like http://domainname/en/chicken In Sitecore by Out of box, we can achieve this by using Aliases , we can create an Aliases under System à Aliases and in the Linked Item field select the target item. But this is very tedious as we need to go to every item in the content tree and create Aliases, instead of that we will be going to do it programmatically using custom pipelines. ·          Link Provider (Provides the custom URL for the item based on the templates) ·          Item Resolver (Resolves the item based on the custom URL generated by CustomLinkProvider , that we going to create later. Sitecore could not resolve the item in the specified path in the content tree
Read more

Exploring Sitecore XM Cloud Forms: A Comprehensive Overview

-
Image
  The most awaited news came from Sitecore about the release of XM Cloud Forms.  Previously Sitecore enthusiasts / Marketers used different ways of forms implementation in Sitecore to reach the target customers like WFFM (Web Form For Marketers) Sitecore Forms Embeddable Forms Framework(EFF) XM Cloud Form is the latest addition by Sitecore and especially used to create Forms on XM Cloud pages. It will only work with the latest version of Sitecore JSS (21.6) Note:  I have tried to use XM Cloud Forms in my local docker setup by cloning the starter   repo , but I couldn't see the option of Forms in the XM Cloud dashboard to get started. Lets explore together on the features of Forms. Similar to Sitecore Components, we can navigate to  https://forms.sitecorecloud.io/  to start creating the Forms There are 2 important tabs in creating Sitecore Forms  Forms  Webhook(for triggering the submit action) We can create, modify, delete, and activate the form from the Form tab.  Once the form is
Read more

Sitecore Custom Rule (Action and Condition)

-
Image
I have a situation to create a custom Sitecore rule and action for it. v   Goto /Sitecore/system/Settings/Rules/Definitions/Elements v   Create a new item base on the template “ ElementFolder ” with a name “ Custom Rule ” v   Click on the item and create condition and Actions that are necessary for your requirements Condition Template Item: It has two important sections v   Data ·          Text (This is the condition Text which will use tokens to evaluate the condition and user input which will be in [ ] brackets.The brackets contain four positional parameters separated by commas (“,”). 1. The name of the property that the parameter sets in the .NET class that implements the condition. 2. The name of an item beneath the /Sitecore/System/Settings/Rules/Common/Macros item providing predefined functionality, or an empty string. For example, to activate a user interface allowing the user to select an item from the content tree, specify the value tree. 3. URL param
Read more