Best approach to design Header using XF and core Navigation Components | Community
Skip to main content
V
VinayHegde
Level 2
July 9, 2022
Solved

Best approach to design Header using XF and core Navigation Components

  • July 9, 2022
  • 4 replies
  • 1909 views

Requirement is like this:

 

Have Site A, Site B, Site C and Site D. All sites are built using same parent editable template.

These sites share a Header of similar structure but the navigation of header is depend of site specific pages.

 

Have configured Core navigation component in XF and that XP is placed in template structure.

 

As the pages of these sites may differ and they share same template ,the core navigation logic would not work. what would be the best approach to get site specific navigation links ?

 

Approach 1 - Have separate templates for all sites 

 

Approach 2 - Remove the "navigationRoot" from core navigation component dialog and customize that logic to fetch root path of site using custom model and  "getAbsoluteParent" - by sling delegacy pattern .

 

What would be best or any other efficient methods ?

    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 BrianKasingli

    Hi, I have created enterprise-scaled White Label websites in the past, and for each "BRAND", it's recommended that they have their own editable templates or you'll be over-engineering.

    This allows each "BRAND" to maintain its own templates with its own user permissions. 

    This approach worked really well for me. Another tip is to create experience fragment folders with names with the "BRAND". This will really support permissions as well.

    4 replies

    B
    BipinCh1
    Level 3
    July 9, 2022

    Hi @vinayhegde ,

     

    Please refer: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/get-started/localization.html?lang=en#example

     

    Detailed explanation with examples are provided in the above link.

     

     

     

      Shubham_borole
      Community Advisor
      Shubham_boroleCommunity Advisor
      Community Advisor
      July 10, 2022

      Hello @vinayhegde 

      I prefer Option 1 to have separate templates. One of the reasons is, this is just one scenario where your navigation template needs a change in how a given component (navigation in this case) differs. However in future there might be requests coming from owners of sites A, B , C & D to view things differently, hence I lean towards different templates (We may explore overlay approach for all templates pointing to one and changing things on site level) 

      We can utilize XF variations where all the variations will be same except the navigation component will be authored to different nav roots. Each site template can point to respective xf variation in the structure node.

       

      Thanks

       

        BrianKasingli
        Community Advisor and Adobe Champion
        BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
        Community Advisor and Adobe Champion
        July 11, 2022

        Hi, I have created enterprise-scaled White Label websites in the past, and for each "BRAND", it's recommended that they have their own editable templates or you'll be over-engineering.

        This allows each "BRAND" to maintain its own templates with its own user permissions. 

        This approach worked really well for me. Another tip is to create experience fragment folders with names with the "BRAND". This will really support permissions as well.

          arunpatidar
          Community Advisor
          arunpatidarCommunity Advisor
          Community Advisor
          July 11, 2022

          Hi,

          Please go with context-aware-configuration for brand specific changes.

          https://sling.apache.org/documentation/bundles/context-aware-configuration/context-aware-configuration.html 

          https://wcm.io/caconfig/editor/ 

           

          Create a path field in context-aware-configuration and browse the XF for header and Footer at site root.

           

          You can change this at any tree level within inside same site as well you can have another header/footer e.g. header without navigation for error pages.

           

          Arun Patidar
            V
            VinayHegdeAuthor
            Level 2
            July 12, 2022

            Hi @arunpatidar , Thanks for this solution. As of now I went with having multiple template approach. Reasons by @briankasingli and @shubham_borole are completely agreeable considering future scenarios.

             

            But this context-aware-configuration solution also seems interesting , will try it for learning purpose.

             

            Thanks,

            Vinay Hegde

             

             

              arunpatidar
              Community Advisor
              arunpatidarCommunity Advisor
              Community Advisor
              July 12, 2022

              Hi @vinayhegde 
              You must choose a solution that fits your business requirements and can be extended in future.

               

              But when you try this in local for learning purpose consider my feedback -

              I have used context-aware-configuration with 20+ sites and use only one template.

              I creates another template only when different set of component are allowed for Authoring or page has different set of configurations like e.g. clientlibs.

              I will avoid creating template just because content is different in template.

              Arun Patidar
                Terms & ConditionsAccessibility statement

                Loading footer...