javascripthtmlaemsightly

Should page navigation in AEM handled through javascript or anchor tag?

I have 4 button on homepage and upon clicking it I want to get navigated on another page.

I tried first something like this.

<a href="/content/travel/us/en/addticket.html" class="button-link">
<button class="add-ticket">
<span> ADD LEADS </span>
</button>
</a>

But it was not working.

Then I tried to do it using javascript and redirection was working.

Html

<button class="add-ticket">
<span> ADD LEADS </span>
</button>

Js

document.addEventListener('DOMContentLoaded', function(){
const addticketbutton =document.getElementById('add-ticket');
if(addticketbutton){
    addticketbutton.addEventListener('click', function(){
        window.location.href="/content/travel/us/en/addticket.html";
    });
});

What problem I'm facing with javascript is often i need to reload page or refresh. Sometimes redirection works sometimes not. Also achor tag gives us option to open in new tab.

I'm beginer in AEM and don't know how to do this.

Solution

  • I am not familiar with AEM, but maybe you could change the code.

    HTML - You do not need to wrap the text in a span, unless you want to change the color of certain text in it.

    <a href="/content/travel/us/en/addticket.html" class="button-link">
<button class="add-ticket">ADD LEADS</button>
</a>

    Also, do you really need the button?

    <a href="/content/travel/us/en/addticket.html" class="button-link add-ticket">ADD LEADS</a>

    Also some docs from Adobe about embedding links in AEM.