Несколько фокусов с CMS Joomla! Подсветка пункта меню типа «внешняя ссылка», или Как сделать ссылки на категории VirtueMart

: Автор: Станислав Огрызков; Опубликовано: 25.02.2017

Подсветка пункта меню типа «внешняя ссылка», или Как сделать ссылки на категории 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, на самом деле полученное решение (оба его варианта) хорошо применимо и в других случаях, когда надо подсветить как текущий пункт меню типа «внешняя ссылка».

Добавьте свой комментарий или войдите, чтобы подписаться/отписаться.

Загрузка…