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。

更新 -

あなたのコードはリンクが有効であれば問題ありません。

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が得られる唯一の理由はありません。著者インスタンスをチェックすると、あなたのリンクテキストと一緒に壊れたリンクシンボルが表示されます。

適切な有効なリンクが生成されるようにロジックを修正するのが理想的です。開発時には、リンクチェッカーやリンクトランスフォーマーを無効にして、すべてのリンクを動作させることができます（無効なリンクも推奨しません）。 2つのサービスはhttp://localhost:4502/system/console/configMgrで検索できます。Day CQ Link Checker ServiceとDay CQ Link Checker Transformer