Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

How to call language navigation in my Header Component

Heena91
Level 3
Level 3

Hi Team,

 

I have created language navigation component extending aem core components, in order to achieve the region change functionality. For that I am trying to add my language navigation component in header component which is also calling Navigation. 

 

But, I am not able to call.

1. please suggest which code I need to add the header.html to call this component.

2. Also, I need to call only English of all the regions which will be home page for all countries (NOTE: right now selected depth is 2). Please suggest how to achieve this.

Heena91_1-1622730143755.png

 

Required Functionality:

Heena91_0-1622730020453.png

 

Thanks,

1 Accepted Solution
kchaurasiya
Correct answer by
Level 6
Level 6

Hi Heena,

 

I think you have two options for this.

1. Either you can include the language-nav component in the header as per the below.

<div data-sly-resource="${'language-nav' @ resourceType='/apps/myproject/language-nav'}"></div>

 

2. You can also create a one more html inside the header component only . Lets say you have created the html as language-nav.html, So in this html you can write your fronted logic or markup for the language navigation and you can also call the sling model for the backed logic for the same, Now you can include this html to the header component. Please see the below snapshots for your reference.

 

kchaurasiya_1-1622773088548.png

Include the language-nav.html in to header component

<sly data-sly-use.languageNav="language-nav.html">

You can call the sling Model from the language-nav.html 

<sly data-sly-use.languageNavMod="com.ewbdigital.aem.core.models.LanguageNavigationModel">

Thank You.

View solution in original post

6 Replies
asutosh_jena
Community Advisor
Community Advisor

Hi @Heena91 

 

You do not need an additional component to achieve this. Using the CORE Navigation component you can achieve this functionality.

Just need to keep the pages in correct order and set the depth as 1 so all the child pages will be hidden and only the parent element will be shown as list.

 

Thanks!

rush_pawan
Community Advisor
Community Advisor

Hello,

 

1. To add a component use <div data-sly-resource="${'navigation' @ resourceType='/apps/myproj/navigationcomponent'}"></div>

2. as ashutosh mention, you need not require to do anything and just focus on structure of site, configuration level 1 will bring those navigation.

 

thanks!!

Heena91
Level 3
Level 3

Hi @asutosh_jena @rush_pawan 

 

If I set the depth at 1 and select root from global page, it is showing pages url underneath the global (For India - IN, For US - US). However, I want English page from all the countries should be synched here (Eg: For India - en_in, US - en_us). How I can do that??

 

  • Heena91_0-1622741595854.png

Thanks!!

rush_pawan
Community Advisor
Community Advisor
so, looking at your site structure now and assuming that it would grow based on country/language model OOTB way you can not achieve it because there will be parallel other language site will fall. you can just extend the core component and filter the result before display based on language (jcr:language, i hope you would be setting up) of the page. Also, if you decide to do that, you can extend further more by giving author an option of language in component dialog so that based on selected language the navigation will generate for that language only. I hope, it make sense!!
kchaurasiya
Correct answer by
Level 6
Level 6

Hi Heena,

 

I think you have two options for this.

1. Either you can include the language-nav component in the header as per the below.

<div data-sly-resource="${'language-nav' @ resourceType='/apps/myproject/language-nav'}"></div>

 

2. You can also create a one more html inside the header component only . Lets say you have created the html as language-nav.html, So in this html you can write your fronted logic or markup for the language navigation and you can also call the sling model for the backed logic for the same, Now you can include this html to the header component. Please see the below snapshots for your reference.

 

kchaurasiya_1-1622773088548.png

Include the language-nav.html in to header component

<sly data-sly-use.languageNav="language-nav.html">

You can call the sling Model from the language-nav.html 

<sly data-sly-use.languageNavMod="com.ewbdigital.aem.core.models.LanguageNavigationModel">

Thank You.

View solution in original post

kautuk_sahni
Community Manager
Community Manager
@kchaurasiya, phenomenal reply. Thank you for sharing the solution with AEM community. We need great SME's like you in the community. Keep doing the wonderful work. Looking forward to see you more in the AEM community.