Navigation - Shadow site structure not working as described

[tmartin-dS]

Hello. We have been trying to set up a shadow site structure to be more flexible when displaying navigation on our site. We've essentially been following the guide described here: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/navi... but it does not work as expected. If we mark the "Hide in navigation" checkbox, the entry will disappear entirely (which is to be expected), and if we do not mark it, it will always display the redirect target (including its title instead of the original pages title). Disabling shadowing on the component also does not work; it does display the title of the original, but it will also use the URL of the original, which we do not want.

Our use case

Given 3 pages A, B and C, where A is the target and B and C are the shadow pages that redirect to it (C is child of B), we want to be able to display the title of both pages B and C in the navigation, while maintaining the redirect to A.

Example Structure

/content
+-- ProjectX
   +-- de
      +-- de
         +-- A
         +-- shadowNav
            +-- B
               +-- C

The navigation component would in this case point to "shadowNav" as the root, therefore displaying B and C, who both redirect to A.This currently leads to both pages (parent and child) to display the title of A, so we get things like Sale > Sale (duplicate titles), which we want to avoid.

Side note: We are using the "Commerce Navigation" component of the CIF framework, but were also able to get the same result with the default navigation component, so I assume it's a general thing.

Any help on this would be greatly appreciated.

[AsifChowdhury · Accepted solution]

Hi @tmartin-dS 

Shadow pages display their own titles in the navigation while maintaining redirects, which may not be achievable using the out-of-the-box functionality of the navigation components in Adobe Experience Manager (AEM).

The shadow site concept in AEM is primarily intended for managing content variations across different locales or channels, rather than for creating navigation structures with different titles for shadow pages.

To achieve your desired behavior, you may need to consider customizing the navigation component or exploring alternative approaches.

• Custom Navigation Component: Create a custom navigation component that retrieves and displays the titles of the shadow pages instead of the redirect target page. This would involve developing a custom component or extending an existing navigation component to handle the specific logic of retrieving and displaying the desired titles.

• Custom Properties: Explore the possibility of adding custom properties to the pages in the shadow navigation structure to store and display alternative titles. You can then modify the navigation component to read and display these custom titles instead of the default page titles.

• Custom Sling Mapping: Investigate using custom Sling mappings or URL rewriting rules to create a more user-friendly URL structure that incorporates the desired titles for the shadow pages.

This is my idea. If you will find any workaround, please share it here.

[tmartin-dS]

Thank you for your reply.

We adjusted the navigation component to use our own NavigationImpl, implementing com.adobe.cq.commerce.core.components.models.navigation.Navigation. We then updated the function "addItems" and added our own logic to it, basically grabbing the redirectTarget property of the current item instead of the original URL (if it is set).

This only works if shadowing is disabled, because then it'll always get the original page with all of its information, including original title/navTitle and redirect:

private void addItems(
            PageManager pageManager,
            AbstractNavigationItem parent,
            com.adobe.cq.wcm.core.components.models.NavigationItem currentWcmItem,
            List<NavigationItem> itemList
    ) {
        Page page = pageManager.getPage(currentWcmItem.getPath());

        // Go to production version to get the configuration of the navigation panel
        if (currentWcmItem.getPath() != null && LaunchUtils.isLaunchBasedPath(currentWcmItem.getPath())) {
            String productionPagePath = currentWcmItem.getPath().substring(currentWcmItem.getPath().lastIndexOf("/content/"));
            Page productionPage = pageManager.getPage(productionPagePath);
            if (productionPage != null) {
                page = productionPage;
            } else {
                LOGGER.warn("Didn't find production page of given launch page: {}", page.getPath());
            }
        }

        if (shouldExpandCatalogRoot(page)) {
            expandCatalogRoot(page, itemList);
        } else {
            NavigationItem item;
            if (isCatalogRoot(page)) {
                item = new CatalogPageNavigationItem(null, page, currentWcmItem);
            } else {
                String title = currentWcmItem.getTitle();
                String targetUrl = currentWcmItem.getURL();

                // >>>>> custom logic: start
                // Grab redirect target from original resource.
                Object url = page.getContentResource().getValueMap().get("cq:redirectTarget");
                if (url != null) {
                    targetUrl = request.getResourceResolver().map(url + ".html");
                }
                // <<<<< custom logic: end

                boolean active = currentWcmItem.isActive();
                item = new PageNavigationItem(parent, title, targetUrl, active, currentWcmItem);
            }
            itemList.add(item);
        }
    }

 This way our navigation uses the original page titles while still maintaining the redirect target.