Customization of Out of the box Language Navigation

[Mahesh_Gunaje]

Hello Team,

I have created a custom language selector component which has resource super type

as core/wcm/components/languagenavigation/v1/languagenavigation

I have authored these

Navigation root: /content/abc/xyz/

Language Structure Depth: 2

Under the path /content/abc/xyz/ I have

/content/abc/xyz/US/en

/content/abc/xyz/US/fr

/content/abc/xyz/FR/fr

/content/abc/xyz/FR/en

By using out of the box feature, I will get the Country details and its language details.

Now, my current page is: /content/abc/xyz/FR/en/home/support

This page has my custom language selector component. I am able to see list of Country and its language details in my component.

Also, if I click on those languages, that will point to support.html with the country, language details

For above scenario, I have to create just a proxy component which has sling resource super type as: core/wcm/components/languagenavigation/v1/languagenavigation

Out of the box class name: com.adobe.cq.wcm.core.components.internal.models.v1.LanguageNavigationImpl

Now, based on some condition(say page property of support page has the property "isSpecialPage"

If this is selected, then I need to display different name for Country, languages. Consider Navigation Title. For this one, I have crated a custom method in my sling model.

import com.adobe.cq.wcm.core.components.models.LanguageNavigation;

  @Self

  @Via(type = ResourceSuperType.class)

  @Delegate

  private LanguageNavigation langNavigation;

  public List<MyCustomLanguageNavigationItem> getCustomItems() {

    List<NavigationItem> items = langNavigation.getItems();

    List<MyCustomLanguageNavigationItem> customItems =  Fetch the details from items

Read the country, language names from the path (which is present in items object)

But, for my surprise, NavigationItem object has details about Country Name, children (i.e each languge details) along with the current page URL. No, where I am able to get the country, language url details.

Can someone help me with this?

cc: @arunpatidar  @aanchal-sikka  @Raja_Reddy  @Asutosh_Jena_  @VeenaVikraman  @AMANATH_ULLAH  @AmitVishwakarma 

[ManviSharma]

Hi Mahesh,

To retrieve detailed URL information for country and language in your custom language navigation component, you would typically extend the existing functionality provided by AEM's Core Components.

Since you're already using a proxy component with a Sling resource super type of core/wcm/components/languagenavigation/v1/languagenavigation, you need to ensure that your custom method within the Sling model is correctly set up to extract the URL details.

Your custom method getCustomItems() should iterate over the items and fetch the details from the paths. Since you're not finding the URL details directly, consider checking:

• If the NavigationItem has any child nodes or properties that might contain URL segments.
• If there's a need to construct the URL using a combination of properties (e.g., base path, language code).

[giuseppebag · Accepted solution]

hi @Mahesh_Gunaje, 

it's not completely clear what's your question so waiting for your feedback I'll try some guesses.

It sounds like you’re running into the expected behaviour of the out‐of‐the‐box LanguageNavigationImpl: the NavigationItem objects are built based on the current page context, which is why you’re seeing the current page URL instead of what you might expect for the language/country details.
Since you need to show different country/language names (for example, using a “Navigation Title”) when your support page has the property isSpecialPage, one approach is to post-process the list returned by langNavigation.getItems(). In your custom model, you can iterate over each NavigationItem, check the current page for the isSpecialPage flag, and then—if true—fetch the custom titles and URLs from the underlying resource (or via the Page API).

public List<MyCustomLanguageNavigationItem> getCustomItems() {
    List<NavigationItem> items = langNavigation.getItems();
    List<MyCustomLanguageNavigationItem> customItems = new ArrayList<>();
    boolean isSpecial = currentPage.getProperties().get("isSpecialPage", false);

    for (NavigationItem item : items) {
        String title = item.getTitle();
        String url = item.getURL();

        if (isSpecial) {
            // Attempt to adapt the underlying resource to access custom properties
            ValueMap properties = item.getResource().adaptTo(ValueMap.class);
            if (properties != null && properties.containsKey("navTitle")) {
                title = properties.get("navTitle", title);
            }
            // Optionally, adjust the URL if needed by resolving the correct page path.
        }

        // Create your custom navigation item with the modified title (and optionally URL)
        customItems.add(new MyCustomLanguageNavigationItem(title, url, item.getChildren()));
    }
    return customItems;
}

While the out-of-the-box LanguageNavigationImpl provides a good starting point, your scenario requires some custom logic. By post-processing the navigation items to override titles and URLs based on your conditions, you should be able to achieve the desired behaviour.

Hope this helps. Let me know if you need further clarification or run into any issues.