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

How to call language navigation in my Header Component

Avatar

Avatar
Applaud 5
Level 1
Heena91
Level 1

Likes

0 likes

Total Posts

60 posts

Correct Reply

0 solutions
Top badges earned
Applaud 5
View profile

Avatar
Applaud 5
Level 1
Heena91
Level 1

Likes

0 likes

Total Posts

60 posts

Correct Reply

0 solutions
Top badges earned
Applaud 5
View profile
Heena91
Level 1

03-06-2021

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,

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
Level 3
kchaurasiya
Level 3

Likes

17 likes

Total Posts

20 posts

Correct Reply

4 solutions
Top badges earned
Establish
View profile

Avatar
Establish
Level 3
kchaurasiya
Level 3

Likes

17 likes

Total Posts

20 posts

Correct Reply

4 solutions
Top badges earned
Establish
View profile
kchaurasiya
Level 3

03-06-2021

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.

Answers (2)

Answers (2)

Avatar

Avatar
Boost 100
Level 7
rush_pawan
Level 7

Likes

120 likes

Total Posts

192 posts

Correct Reply

77 solutions
Top badges earned
Boost 100
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Boost 100
Level 7
rush_pawan
Level 7

Likes

120 likes

Total Posts

192 posts

Correct Reply

77 solutions
Top badges earned
Boost 100
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
rush_pawan
Level 7

03-06-2021

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!!

Avatar

Avatar
Give Back 100
Level 10
asutosh_jena
Level 10

Likes

551 likes

Total Posts

663 posts

Correct Reply

191 solutions
Top badges earned
Give Back 100
Boost 500
Affirm 100
Ignite 1
Establish
View profile

Avatar
Give Back 100
Level 10
asutosh_jena
Level 10

Likes

551 likes

Total Posts

663 posts

Correct Reply

191 solutions
Top badges earned
Give Back 100
Boost 500
Affirm 100
Ignite 1
Establish
View profile
asutosh_jena
Level 10

03-06-2021

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!