Author unlocked component inside a locked component

[ashwinka]

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)

[Raja_Reddy]

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/brea... 
   
   

[ashwinka]

any option keeping the components together itself

[kautuk_sahni]

@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.

[ashwinka · Accepted solution]

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