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

AEM sightly: redirect to new page on button click

Avatar

Community Advisor

Hi All,

I'm trying to a contact us component. It will provide the button, when the user clicks on the button, he will be redirected to the contact us page. I've added input button and trying to redirect to contact us page when the user clicks on the button, but it's not redirecting to the new page.

Sample code:

<div data-sly-test.myPath="/content/geometrixx/en/contactus" data-sly-unwrap></div>

<input type="Submit" onclick="location.href='${myPath}'" value="Contact Us" />

Please correct me i'm wrong.

Thanks in Advance

1 Accepted Solution

Avatar

Correct answer by
Level 7

If you want to use an external url you have to put also the protocol.

This should be the trick:

<sly data-sly-test.myPath="https://www.google.com" />


<input type="Submit" onclick="location.href='${myPath @ context='scriptString'}'" value="Contact Us" />

View solution in original post

8 Replies

Avatar

Level 7

You need to use the context:

${myPath @ context='uri'} or ${myPath @ context='scriptString'} just because it's in a javascript section.

Let me know. 

Avatar

Employee

This should do the trick:

<sly data-sly-test.myPath="/content/geometrixx/en/contactus" />

<input type="Submit" onclick="location.href='${myPath @ context='scriptString'}'" value="Contact Us" />

Avatar

Community Advisor

Feike Visser wrote...

This should do the trick:

<sly data-sly-test.myPath="/content/geometrixx/en/contactus" />

<input type="Submit" onclick="location.href='${myPath @ context='scriptString'}'" value="Contact Us" />

 

Thanks Feike,

It works for Internal url. But the same thing is not working when I give external urls.

<sly data-sly-test.myPath="www.google.com" />

<input type="Submit" onclick="location.href='${myPath @ context='scriptString'}'" value="Contact Us" />

Please advise.

Avatar

Employee

What do you see in the generated HTML-source? Should be the same.

Did you try with an http:// prefix?

Avatar

Community Advisor

Hi Feike,

Thanks for your prompt response.

I see the correct url in the source code (onclick="location.href='www.google.com'" ), but when I click on the button it is redirecting to

http://localhost:4502/content/geometrixx/en/www.google.com

Note: I'm testing the component at http://localhost:4502/content/geometrixx/en/products.html

Please advise.

Avatar

Correct answer by
Level 7

If you want to use an external url you have to put also the protocol.

This should be the trick:

<sly data-sly-test.myPath="https://www.google.com" />


<input type="Submit" onclick="location.href='${myPath @ context='scriptString'}'" value="Contact Us" />