Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Sightly can't generate exactly url

Avatar

Level 4

Hello,

I am using sightly to generate the content from AEM jcr:content. My code here   

 

    "<div data-sly-use.news="inTheNews.js">

    <div class="read-acticle-btn">

    <p>${news.hyperlink}</p>

    <a href="${news.hyperlink}">${"read acticle" @ i18n, context= 'html'}

    </a>

    <p><a href="http://hyperlink.com">Hyperlink</a></p>

    </div>

    </div>"

 

When I preview and test the result can't display tag in the html. My result here:   

  "<div data-sly-use.news="inTheNews.js">

    <div class="read-acticle-btn">

    <p>http://hyperlink.com</p>

    read acticle

 

    <p>Hyperlink</p>

    </div>

    </div>"

I don't know why the sightly generate with error. The html result must be   

 

    "<div data-sly-use.news="inTheNews.js">

    <div class="read-acticle-btn">

    <p>http://hyperlink.com</p>

    <a href="http://hyperlink.com">read acticle</a>

    <p><a href="http://hyperlink.com">Hyperlink</a></p>

    </div>

    </div>"

 

How to fix this bug? Why sightly can't generate tag with href="http:hyperlink.com" and some other case. Thank & Best regards,/lyf-service/api/

1 Accepted Solution

Avatar

Correct answer by
Level 7

Hi,

Please refer to the following link for best practices to follow while writing code in Sightly :

https://helpx.adobe.com/experience-manager/htl/using/getting-started.html

We tried the same html with the following javascript and a valid link and it seems to be working fine.

use(function() {

    var hyperlink = "http://google.com" ;

    return {

        hyperlink: hyperlink

    };

});

The only possible reason you are getting empty href is because your link is not valid and thus link checker is removing it. If you check on author instance you will see broken link symbol along with your link text for "http://hyperlink.com".

You can try to disable the link checker service and see if you are able to get the link in the output.This will let all links work, even the invalid ones (not recommended).The following link will guide you on how to disable link checker:

http://www.aemcq5tutorials.com/tutorials/aem-link-checker-comprehensive-guide/

Incase you are still facing this issue, please share your JS file. There might be some error in how you are returning the link from javascript.

You can follow this link for better understanding on how to use Sightly with Javascript:

http://blogs.adobe.com/experiencedelivers/experience-management/htl-javascript-use-api/

Regards,

TechAspect Solutions

View solution in original post

2 Replies

Avatar

Correct answer by
Level 7

Hi,

Please refer to the following link for best practices to follow while writing code in Sightly :

https://helpx.adobe.com/experience-manager/htl/using/getting-started.html

We tried the same html with the following javascript and a valid link and it seems to be working fine.

use(function() {

    var hyperlink = "http://google.com" ;

    return {

        hyperlink: hyperlink

    };

});

The only possible reason you are getting empty href is because your link is not valid and thus link checker is removing it. If you check on author instance you will see broken link symbol along with your link text for "http://hyperlink.com".

You can try to disable the link checker service and see if you are able to get the link in the output.This will let all links work, even the invalid ones (not recommended).The following link will guide you on how to disable link checker:

http://www.aemcq5tutorials.com/tutorials/aem-link-checker-comprehensive-guide/

Incase you are still facing this issue, please share your JS file. There might be some error in how you are returning the link from javascript.

You can follow this link for better understanding on how to use Sightly with Javascript:

http://blogs.adobe.com/experiencedelivers/experience-management/htl-javascript-use-api/

Regards,

TechAspect Solutions