Должна ли навигация по страницам в AEM осуществляться с помощью JavaScript или тега якоря?

Вопрос или проблема

<a href="/content/travel/us/en/addticket.html" class="button-link">
<button class="add-ticket">
<span> ДОБАВИТЬ ЛИДЫ </span>
</button>
</a>

<button class="add-ticket">
<span> ДОБАВИТЬ ЛИДЫ </span>
</button>

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";
    });
});

Ответ или решение

Вопрос о том, как организовать навигацию в Adobe Experience Manager (AEM) – с использованием JavaScript или HTML с якорными тегами, представляет собой важный аспект веб-разработки. Давайте разберёмся в этом по порядку и рассмотрим ключевые моменты.

1. Функциональность и простота

Использование якорных тегов (<a>):

• Преимущества:

  • Простота реализации. Создание ссылки на другую страницу требует лишь указания местоположения в атрибуте href.
  • Поведение по умолчанию. При нажатии на ссылку браузер автоматически производит переход на указанную страницу, что является ожидаемым поведением.
  • Поддержка таких функций, как открытие в новой вкладке. При добавлении атрибута target="_blank" можно осуществить навигацию без потери текущей страницы.

• Недостатки:

  • Возможные ограничения в случае динамического обновления контента, если планируется использовать AJAX.

Использование JavaScript:

• Преимущества:

  • Гибкость в управлении поведением кнопки. Можно делать различные обработчики событий, например, проверять какие-либо условия перед переходом.
  • Возможность интерактивного взаимодействия с пользователем, например, появление модальных окон перед переходом.

• Недостатки:

  • Зависимость от JavaScript. Если у пользователя отключён JavaScript, то кнопка не будет функционировать.
  • Проблема с кэшированием и редиректами, как вы уже заметили, может вызывать необходимость обновления страницы, что снижает удобство работы для пользователя.

2. Рекомендации по реализации

В вашем случае, предпочтительным решением будет использовать якорный тег. Вот как это можно грамотно реализовать:

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

При этом <button> не должен использоваться внутри <a>, так как это может вызвать неожиданные поведения в некоторых браузерах. Однако можно стилизовать ссылку, чтобы она выглядела как кнопка через CSS:

.button-link {
    text-decoration: none; /* убираем подчеркивание */
}

.button-link .add-ticket {
    /* ваши стили кнопки */
}

3. Доступность и SEO

Используя a теги, вы улучшаете доступность контента для поисковых систем и пользователей, использующих вспомогательные технологии, такие как считыватели экрана. Поисковые системы распознают ссылки проще, чем JavaScript редиректы, что положительно сказывается на SEO.

4. Заключение

В заключение, рекомендую использовать якорные теги для навигации на странице в AEM. Это обеспечит большую надёжность, простоту в использовании и улучшенную доступность контента. JavaScript можно использовать для создания более сложных интерактивных функций, но для навигации он не является предпочтительным решением, учитывая проблемы, с которыми вы столкнулись.

Если у вас останутся дополнительные вопросы или потребуется больше информации, не стесняйтесь обращаться – мы всегда рады помочь!