AEM <a href> not working when using JavaScript to concatenate string with currentPage.path

Question

I'm creating a project in Adobe Experience Manager and have run into problems in the implementation of my language switching component. The component is supposed allow the user to click on a link and have the language of the page change. For example, if they are on the English page /content/myproject/en/home.html and they click it, they are supposed to end up on /content/myproject/fr_ca/home.html.

As part of getting it up and running, I was trying to concatenate currentPage.path and "/profile.html" so that I could at least get the component to register some change to the string in the tag.

From the English home.html page, currentPage.path produces the string "/content/myproject/en/home". Concatenating it with /profile.html should produce the string "/content/myproject/en/home/profile.html" which it does if I use Sightly to do something like <p>${langinfo.goToPage}</p>.

However, if I try this: <a href="${langinfo.goToPage}"></a> the component will show a blank anchor tag. It will also blank anything I've written in between the two anchor tags.

So far I've tried returning a string I've written out by hand "/content/myproject/en/home/profile.html" as the goToPage value and it works in the anchor tag. Also, if I only return currentPage.path it works. It refuses to work like this <a href="It doesn't work here!"> if I try to concatenate but it will work like this: <a>It works here!</a>.

The best I can figure at this point is that currentPage.path is a Java String object that is being accessed by JavaScript and there are problems when JS tries to type it to a JavaScript string with +. It also doesn't work if I try to cast the statement as a string with either String(goToPage) or goToPage.toString(). It doesn't seem to matter when I cast it as a string. One blog I looked at seemed to hint that this was a problem with Rhino and that I should do a .toString() after the initial concatenation. That didn't work. Another post on stackOverflow seemed to point out that it could be a problem trying to concatenate a Java String object in JavaScript and pointed out that this should be taken into account but didn't go into how to deal with the issue.

I appending to a string isn't the intended end functionality of my component, but if I can't modify the string by concatenating, seems like I can hardly do a search and replace to change /en/ to /fr-ca/. If anyone has a more elegant solution to my problem than what I'm attempting, that would be appreciated as much as a fix for what I'm working on.

I've pasted my code here (as suggested) and posted screenshots of my code to help.

Javascript:

use(function() { 
    var pageLang = currentPage.properties.get("jcr:language", "en"); 
    var otherLangText; 
    var currPage = currentPage.name; 
    var currPagePath = currentPage.path; 
    var goPage; 

    if (pageLang == "fr_ca") { 
     otherLangText = "English"; 
     goPage = "/content/myproject/en/index/home.html"; 
    } else { 
     otherLangText = "Français"; 
     goPage = "/content/myproject/fr-ca/home/home.html"; 
    }; 


    return { 
     otherLanguage: otherLangText, 
     goToPage: goPage 
    } 


}) 

HTML:

<nav data-sly-use.langinfo="langcontact.js"> 
    <ul class="lang-list-container"> 
     <li class="lang-list-item"><a href="${langinfo.goToPage @ extension = 'html'}">${langinfo.otherLanguage}</a></li> 
     <li class="lang-list-item"><a href="/content/myproject/en/index/contact-us.html">Contact</a></li> 
    </ul> 
</nav> 

I'm pretty stumped here. What am I doing wrong?

Answer 1

The line <li class="lang-list-item"><a href="${langinfo.goToPage @ extension = 'html'}">${langinfo.otherLanguage}</a></li>

should actually be -

<li class="lang-list-item"><a href="${langinfo.goToPage}">${langinfo.otherLanguage}</a></li> 

What you are trying to do is pass an object to object which will not work, in case you want to pass the extension to be used in JS you need to do that in the USE call. Refer to the samples in this blog.

업데이트 -

당신의 코드가 한 링크가 유효 나를 위해 잘 작동합니다. 귀하의 링크가 유효하지 따라서 linkchecker가 제거되기 때문에

는

use(function() { 
    var pageLang = currentPage.properties.get("jcr:language", "en"); 
    var otherLangText; 
    var currPage = currentPage.name; 
    var currPagePath = currentPage.path; 
    var goPage; 

    if (pageLang == "fr_ca") { 
     otherLangText = "English"; 
     goPage = currPagePath+"/profile.html"; 
    } else { 
     otherLangText = "Français"; 
     goPage = currPagePath+"/profile.html"; 
    }; 


    return { 
     otherLanguage: otherLangText, 
     goToPage: goPage 
    } 


}) 

당신이 빈 HREF을 받고 유일하게 가능한 이유입니다. 저자 인스턴스를 확인하면 링크 텍스트와 함께 깨진 링크 심볼이 표시됩니다.

적절한 올바른 링크가 생성되도록 논리를 수정하는 것이 가장 이상적입니다. 개발 중에는 모든 링크가 작동하도록 링크 확인 기 및/또는 링크 변환기를 사용 불가능하게 할 수 있습니다 (심지어는 유효하지 않은 | 권장하지 않음). 두 서비스는 Day CQ Link Checker Service 및 Day CQ Link Checker Transformer