Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Vanity Url and Navigation Component

Avatar

Level 2

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)

dilips52296497_0-1591198962645.png

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

dilips52296497_1-1591199259290.png

 

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.

Regards

Dilip

 

 

 

 

 

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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 ?

View solution in original post

16 Replies

Avatar

Correct answer by
Community Advisor

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 ?

Avatar

Community Advisor

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

Avatar

Level 2
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

Avatar

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

Avatar

Community Advisor
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

Avatar

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

Avatar

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

Avatar

Level 2
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

Avatar

Community Advisor

@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?

Avatar

Level 2
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)

Avatar

Community Advisor
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.

Avatar

Level 1
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.

Avatar

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