Vanity Url and Navigation Component

[dilips52296497]

Hello AEM gurus

I am getting a strange issue in AEM 6.5 when I add VanityUrl to page and looks like the Navigation component is not liking the VanityUrl and is not rendering with Anchor tag.

For example

a) the below is the from we.retail sample site  where Highlighted in Yellow is he Navigation Component (out of box)

b) Highlighted in red is the page without having VanityUrl property added to the page and it has the hyperlink all is well

Now lets add the vanity Url the page highlighted in the above screen

a) the Page anchor tag is not rendered

Note: This is happening in my project as well

When I tried browsing AEM forums, I found this.  Did any one face the same issue and what is the workaround for it.

https://github.com/adobe/aem-core-wcm-components/issues/559   

Regards

Dilip

[Ravi_Pampana · Accepted solution]

Hi

I think because of link checker vanity url is not forming correctly. Can you try disabling it and see the vanity url link is forming correctly ?

[aj27]

@Ravi_Pampana tried it. still getting the same issue.

[BrianKasingli]

I agree with @Ravi_Pampana,

@dilips52296497 your problem definitely looks like a link checker problem. If you have some time, please spend a couple of minutes reviewing this Guide: AEM Link Checker Comprehensive Guide - https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-link-checker-comprehen...

[dilips52296497]

Thanks Brian, i have gone through the link provided in your email. so this is what is happening, when I disable the link checker, i can now see that the anchor tag is enabled, all fine till here. But when I click on the link

[dilips52296497]

But when click on the link, it gives 404

[dilips52296497]

But when click on the link, it gives 404 reason AEM is trying to find the vanityurl in the hierarchy.

[BrianKasingli]

Are you testing from the Author environment? In this case, you just need to go to page properties, and set a vanity url value. Checkout this article, where it teaches you how to properly set Vanity urls. https://blog.3sharecorp.com/enabling-vanity-urls-with-adobe-experience-manager

[BrianKasingli]

And way to go! We solved the link checker problem.

[dilips52296497]

Hi Brain, I am sorry as I could not explain clearly what the issue is after I disabled the link checker

[dilips52296497]

a) so when ever we give a vanityurl to a page using page properties then the way to browse the page is http://localhost:4503/<vanityurl name here> this works fine (b) when we go through the navigation menu (used navigation component) lets say the page is in we.retrail/en/xyz (page) and for xyz (page) given abc as vanity url , the Navigation component is trying to find "abc" in we.retal/en/abc.html which it does not find and throws 404 error . Let me know if you need more information

[dilips52296497]

Just to add , my problem is exactly mentioned here https://github.com/adobe/aem-core-wcm-components/issues/559

[BrianKasingli]

@dilips, I've spun up an FRESH AEM 6.4 instance and updated the vanity URL of http://localhost:4502/content/we-retail/us/en/men.html. I then visit http://localhost:4502/content/we-retail/us/en/women.html and hovered my mouse on the men.html link, and it shows the vanity URL path, and not the AEM JCR Path. The out of the box functionality is working as expected.

Does the vanity URL and we.retail navigation bar work in Author mode? 

In publish, can you find the property, sling:vanityPath, under the jcr:content node?

[dilips52296497]

Thank a ton for helping me Brian . This is what I have done with we.retail site in my local environment on port 4502. a) opened the properties for the page Men and add a vanity url as "a.html" b) edited the Women page to see how the vanity url is rendered and this is what I see <li class="cmp-navigation__item cmp-navigation__item--level-0"> <a href="a.html" title="Men" class="cmp-navigation__item-link">Men</a> </li> c) for the ones which does not have vanity url the html rendered is <li class="cmp-navigation__item cmp-navigation__item--level-0"> <a href="/content/we-retail/language-masters/en/equipment.html" title="Equipment" class="cmp-navigation__item-link">Equipment</a> </li> d) There is a difference between c & d e) When I click on Men it gives me 404 as it does not find a.html (all of the above is happening from the Navigation Component)

[BrianKasingli]

Hi there, 1) Why is a.html not available? You've defined the vanity url in step a). the Navigation is rendering a.html, and can you confirm if a.html is resolvable. 2) The navigation component from we.retail seems like it will render the <li><a href='"> items using the JCR Long Path; when vanity url config exist, it will show the vanity URL. This works as expected.

[monikachalla]

Hi Dilip, You are right I even face the same issue when I click on the link, it gives the 404 (Resource at '/content/we-retail/language-masters/en/abc' not found: No resource found). I have followed all the steps which Brian have mention but still I face the 404. I have been testing this in my AEM 6.5 author instance.

[BrianKasingli]

hey guys, I have AEM 6.4.2 installed, maybe this is an issue in AEM 6.5?