Author unlocked component inside a locked component | Community
Skip to main content
ashwinka
ashwinka
February 13, 2024
Solved

Author unlocked component inside a locked component

  • February 13, 2024
  • 3 replies
  • 880 views

i have 3 components breadcrump , searchbox and topicsmenu

 

search box and navigation menu are embedded inside breadcrump  component using 

 

 <div data-sly-resource="${'./searchbox' @resourceType = 'myproject/components/content/video/searchbox'}">
 
<div data-sly-resource="${'./videosubnav' @resourceType = 'myproject/components/content/header/topicsmenu', selectors='videosubnav'}"></div>
 
i wants to author the breadcrump and searchbox in template level (in Structure, not in initial), but have to author topicsmenu component in page level (ie, in every page created with this template) , How can i acheive this.
 
currently i have locked the breadcrump and search box in strucure of the template and unlocked topicsmenu in the structure. But the topicmenu seems to be non authorable (it didnt appear in the page that is newly created with this template)
 

 

 
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 ashwinka

what i did was instead of <div data-sly-resource="${'./videosubnav' @resourceType = 'myproject/components/content/header/topicsmenu', selectors='videosubnav'}"></div>  i have added a parsys in this position and locked the same parsys in structure. Now for the newly added parsys , i added a policy to allow topicsmenu component in allowed components. And unlocked the topicsmenu component in structure so that in every page created using this template topicsmenu is editable

 

<div data-sly-resource="${'./subnav'container @resourceType = 'myproject/components/content/container/container', selectors='videosubnav'}"></div>

 

where myproject/components/content/container/container is a proxy implementation of parsys in my project

3 replies

Raja_Reddy
Community Advisor
Raja_ReddyCommunity Advisor
Community Advisor
February 13, 2024

Hi @ashwinka 

  1. Remove the breadcrumb and search box components from the topics menu component and create separate components for them.

  2. Include the breadcrumb and search box components in the template level by adding the following code to the template's HTML file:

    <div data-sly-resource="${'./breadcrumb' @ resourceType='myproject/components/content/breadcrumb'}"></div>
<div data-sly-resource="${'./searchbox' @ resourceType='myproject/components/content/searchbox'}"></div>

    This will include the breadcrumb and search box components in the template level.

  3. Make sure the topics menu component is authorable at the page level by unlocking it in the template's structure. You can do this by selecting the component in the structure and clicking on the "Unlock" button.

  4. When creating a new page with this template, the author can now add the topics menu component to the page and configure it as desired.

    Template Structure:
    - Template
    - Breadcrumb Component (Locked)
    - Search Box Component (Locked)
    - Main Content Area
    - Topics Menu Component (Unlock to allow authoring at page level)

    https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/breadcrumb.html?lang=en 

    ashwinka
    ashwinkaAuthor
    February 14, 2024

    any option keeping the components together itself

      kautuk_sahni
      Community Manager
      kautuk_sahniCommunity Manager
      Community Manager
      February 16, 2024

      @ashwinka Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

      Kautuk Sahni
        ashwinka
        ashwinkaAuthorAccepted solution
        February 17, 2024

        what i did was instead of <div data-sly-resource="${'./videosubnav' @resourceType = 'myproject/components/content/header/topicsmenu', selectors='videosubnav'}"></div>  i have added a parsys in this position and locked the same parsys in structure. Now for the newly added parsys , i added a policy to allow topicsmenu component in allowed components. And unlocked the topicsmenu component in structure so that in every page created using this template topicsmenu is editable

         

        <div data-sly-resource="${'./subnav'container @resourceType = 'myproject/components/content/container/container', selectors='videosubnav'}"></div>

         

        where myproject/components/content/container/container is a proxy implementation of parsys in my project

          Terms & ConditionsAccessibility statement

          Loading footer...