VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.

Не секрет, что структура VirtueMart довольно сложна. Для людей, малознакомых с этим компонентом его подгонка под дизайн превращается в настоящую пытку. Все элементы разбросаны по разным файлам и их поиск вызывает затруднения. Особое место в этом хаосе занимает меню каталога товаров VirtueMart. Главным его недостатком является то, что при нескольких стилях отображения меню и различных скриптах, как это не странно, напрочь отсутствует возможность построения меню с помощью маркированного списка(UL LI). Это крайне неприятно, учитывая то, что во-первых, такую систему использует Joomla (меню очень многих шаблонов построены именно на подобных списках), во-вторых, UL LI используют большинство современных JQuery и Mootools-меню. В этой статье я расскажу как можно создать меню VirtueMart построенное с помощью списка и стилизовать его под используемый шаблон.

Первое, что нужно принять – встроенными средствами VirtueMart меню UL LI построить не удастся (конечно мы не говорим о переписывании кода модуля). Мне кажется очень странным, что разработчики не включили в модуль такой способ отображения меню, но рано или поздно это произойдет. Таким образом, нам понадобится дополнительное расширение для VirtueMart. К счастью такое имеется, и называется XHTML Product Categories for Virtuemart. XHTML Product Categories for Virtuemart это модуль, выводящий меню VirtueMart в виде маркированного списка (UL LI). Модуль бесплатный. Скачать его можно с сайта разработчика по этой ссылке.

Настройки модуля крайне скудны(смотрите ниже):

но свои функции он выполняет хорошо.

Теперь немного поговорим о настройке модуля. Я вижу 2 варианта создания меню:

1. Меню VirtueMart должно по стилю быть таким же, как и меню используемого шаблона Joomla.
2. Меню должно иметь уникальный стиль и быть построено с помощью отдельного скрипта. Как например в статье про создание выпадающего меню.

Так или иначе, с базовыми настройками меню будет иметь следующий вид:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<ul class="vmLinkMenu">
   <li class="item0">
      <a title="Hand Tools" href="/Hand-Tools.html"><span>Hand Tools</span></a>
   </li>

   <li id="active_menu" class="active item1">
      <a title="Power Tools" href="/Power-Tools.html"><span>Power Tools</span></a>

        		<ul>

            			<li class="item0">

               				<a title="Outdoor Tools" href="/Outdoor-Tools.html"><span>Outdoor Tools</span></a>
             </li>
             <li class="item1">

                <a title="Indoor Tools" href="/Indoor-Tools.html"><span>Indoor Tools</span></a>
             </li>
         </ul>
   </li>
   <li class="item2">
      <a title="Garden Tools" href="/Garden-Tools.html"><span>Garden Tools</span></a>
   </li>
   <li class="item3">
      <a title="Мониторы" href="/Мониторы.html"><span>Мониторы</span></a>
   </li>

</ul>

1

$html='<ul'.($firstPass?' class="vmLinkMenu'.$class_sfx.'"':'').'>';

1

$html='<ul'.($firstPass?' class="menu'.$class_sfx.'"':'').'>';

Теперь, когда наше VirtueMart-меню приобрело практически такой же вид, как и меню Joomla, остается еще немного поднастроить CSS и получить требуемый результат. В случае с уникальным меню все немного сложнее, но теперь делается аналогично выпадающему меню Joomla(ссылка на статью была выше).

Кроме всего прочего XHTML Product Categories for Virtuemart имеет пару дополнительных опций, позволяющих сделать нечто… Лично мне это «нечто» не понятно, но если кто-то придумает, как его толково использовать и напишет в комментариях, я, да и думаю многие другие читатели, будут ему благодарны. «Нечто» заключается в следующем:

Опции «Link list starting level» и «Link List last level» позволяют вывести только уровни вложенности меню от X до Y. Например, если установить в этих опциях 1 и 2 соответственно, будут показаны только пункты 1 и 2 уровней вложенности(т.е. выпадающий и подвыпадающий). Верхний уровень, как впрочем 3 и последующие будут скрыты. Если указать 0 и 0, будут показаны только основные пункты(без подпунктов). Да и ладно, если бы на этом все заканчивалось. Нет. Показываются только подкункты активного пункта меню. Тут, наверное, ничего непонятно. Постараюсь объяснить на примере.

Допустим, есть такое меню:

– пункт 1

–– подпункт 1.1

–– подпункт 1.2

– пункт 2

–– подпункт 2.1

–– подпункт 2.2

Если в модуле у нас выставлены настройки «1» и «1», то по идее должны быть показаны:

–– подпункт 1.1

–– подпункт 1.2

–– подпункт 2.1

–– подпункт 2.2

но реально получается следующее:

а) если активен пункт 1:

–– подпункт 1.1

–– подпункт 1.2

б) если активен пункт 2:

–– подпункт 2.1

–– подпункт 2.2

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

Еще одно замечание касается SEF. Т.к. модуль сторонний, изначально SEF-ссылки в нем не работают. Но это решается просто. Достаточно заменить всего одну строчку:

1

$link=JFilterOutput::ampReplace(JURI::base()."index.php?option=com_virtuemart&page=shop.browse&category_id=".$menu_element['id'].$Itemidmod);

1

$link= JRoute::_("index.php?option=com_virtuemart&page=shop.browse&
category_id=".$menu_element['id'].$Itemidmod);

После этого ссылки, построенные с использованием SH404SEF, в данном меню будут отображаться корректно.

К сожалению, выпустив версию модуля 1.0 в конце 2008 года, разработчики, по всей видимости, прекратили его совершенствование, поэтому он не имеет некоторых необходимых опций, которые сделали бы его просто незаменимым, например, вывод подкатегорий определенной категории через указание ее ID. Возможно, если будет свободное время, я немного усовершенствую этот модуль. Также предлагаю попрактиковаться вам и попробовать добавить несколько дополнительных опций, выводящих категории VirtueMart в разном виде. Код модуля прост, так что это не должно составить труда. При этом все работающие расширения  XHTML Product Categories for Virtuemart созданные читателями, будут выложены в конце этой статьи с бонусом в виде прямых ссылок на сайты создателей.