Несколько фокусов с CMS Joomla! Подсветка пункта меню типа «внешняя ссылка», или Как сделать ссылки на категории VirtueMart
- Опубликовано: 25.02.2017
- Автогенерация и отображение эскизов фотоальбомов модулем RokBox
- Доработка горизонтального меню-списка для динамического разворачивания подпунктов
- Единая кнопка «Сохранить изменения» для корзины Интернет-магазина VirtueMart
- Изменение/снятие ограничений на длину строки поиска и его попутная доработка
- Исправление ссылки на главную/домашнюю в горизонтальном меню старого стиля
- Модернизация сайтов на Joomla! старых версий 1.5/2.5 до актуальной 3.6
- Отображение заглушки «сайт в разработке» для всех и всего сайта для избранных
- Подсветка пункта меню типа «внешняя ссылка», или Как сделать ссылки на категории VirtueMart
- Преобразование адресов сайта в дружественные (SEF) для внешних нужд
- Реализация двуязычного сайта с постраничным переключением языков
- Удаление значка печати из списка статей при сохранении его на странице статьи
Подсветка пункта меню типа «внешняя ссылка», или Как сделать ссылки на категории VirtueMart
Первая часть заголовка говорит о том, что данный «фокус» имеет более широкое применение, чем его изначальный контекст (вторая часть заголовка). Я выразился слишком туманно? 😊 Ничего, сейчас всё объясню по порядку.
В одном из моих проектов – Интернет-магазине на основе Joomla и её компонента VirtueMart – понадобилось в меню сделать ссылки на отдельные (крупные) категории каталога товаров. И тут выявилась вот какая проблема: при наличии на сайте более одного пункта меню специального типа “VirtueMart”, ссылающегося на (под)категорию каталога, при перемещении по ним в строке адреса оказываются неадекватные адреса (например, в адресе подкатегории одной категории используется SEF-псевдоним совершенно другой категории), а в навигационной строке-подсказке («хлебных крошках») отображается неправильный путь к выбранной (под)категории. Быстрый поиск описания проблемы в Интернете подтвердил, что VirtueMart (по крайней мере, использованной версии 1.1.7a) плохо переносит наличие более одного пункта меню собственного специального типа. В качестве варианта решения предлагалось использовать пункты меню другого типа – «внешняя ссылка» (URL).
Новые пункты меню с адресами вида /catalog?page=shop.browse&category_id=# работали как надо, и не искажали «хлебные крошки». Однако выяснилось другое ограничение: пункты меню такого типа не могут обычным образом подсвечиваться как текущие (они не получают id="current"). Оно и понятно, почему так: ведь внешняя ссылка должна уводить пользователя на другой Интернет-ресурс, где данная Joomla и её стили уже невластны. Но мою проблему всё равно надо было как-то решать… Было решено использовать те же стили, но обеспечить их срабатывание за счёт присвоения недостающего id="current" посредством JavaScript. Сначала я сделал это через определение адреса текущей страницы и его сравнение с адресом пункта меню:
…
<script>
function setExternalLinkStyle()
{
var url = location.href;
url = url.substr(url.indexOf('//') + 2, url.length);
url = url.substr(url.indexOf('/'), url.length);
if (url = '/catalog?page=shop.browse&category_id=1')
document.getElementById('leftmenu').childNodes[0].childNodes[0].id = 'current'
else if (url = '/catalog?page=shop.browse&category_id=2')
document.getElementById('leftmenu').childNodes[0].childNodes[1].id = 'current';
};
</script>
<body onload="setExternalLinkStyle();">
…
А потом заказчик попросил подсвечивать эти пункты меню не только когда открыты соответствующие категории, но и когда открыты их подкатегории. Тогда я переориентировался на проверку «хлебных крошек»:
…
<script>
function setExternalLinkStyle()
{
var breadcrumbs = document.getElementById('breadcrumbs');
if (breadcrumbs.innerHTML.indexOf('Название первой категории каталога') > -1)
document.getElementById('catalogmenu').childNodes[0].childNodes[0].id = 'current'
else if (breadcrumbs.innerHTML.indexOf('Название второй категории каталога') > -1)
document.getElementById('catalogmenu').childNodes[0].childNodes[1].id = 'current';
};
</script>
<body onload="setExternalLinkStyle();">
…
В обоих случаях “catalogmenu” – это то самое Joomla-меню, в котором созданы соответствующие пункты меню типа «внешняя ссылка». childNodes[0] и childNodes[1] говорят о том, что подсвечиваемые пункты в этом меню являются первым и втором соответственно.
А теперь вернёмся к заголовку данного «фокуса». Ещё раз поясню: хотя изначально я решал проблему создания ссылок на категории каталога VirtueMart, на самом деле полученное решение (оба его варианта) хорошо применимо и в других случаях, когда надо подсветить как текущий пункт меню типа «внешняя ссылка».