Virtuemart 2 categories — неограниченное количество уровней

Итак, разработчики virtuemart 2.0 посчитали, что два уровня выпадающего меню категорий будет достаточно для нужд интернет-магазинов. То есть: mod_virtuemart_category — меню списка категорий выводит только первый (верхний) уровень категорий магазина, и его дочерние категории (если они есть).

Дальше список категорий в модуле попросту не формируется. Итак, выходов из этой ситуации было несколько:

формирование меню категорий, как пунктов отдельного меню, что требует дополнительной траты времени при заполнении;
переписать модуль, чтобы он смог формировать дерево категорий любого уровня вложенности.

Собственно, мною была сделана модификация модуля списка категорий mod_virtuemart_category для Virtuemart 2.0.16 Joomla 2.5.8 с неограниченным уровнем вложенности категорий (два и более уровня вложенности).

Нюансы: чтобы в дальнейшем не потерять функциональность модуля после очередного обновления virtuemart, весь соответствующий код пришлось поместить в представление (view) соответствующего модуля mod_virtuemart_category.

И вынести его в папку html текущего шаблона. То есть скопировать файл default.php в папку: /templates/ваш_шаблон/html/mod_virtuemart_category/

Процесс установки: скачайте default.php, зайдите в папку Вашего шаблона, найдите в ней подпапку html, в ней создайте папку mod_virtuemart_category (если таковая не существует) и скопируйте файл default.php в эту папку.

После чего перейдите в панель управления сайтом – в верхнем горизонтальном меню выберите: расширения – менеджер модулей – найдите необходимый модуль VirtueMart Категории (можно при помощи фильтров в выпадающем списке выбрать По типу — VirtueMart Категории), зайдите в него, щелкнув по названию модуля, в выпадающем списке Макет в верхнем правом углу выберите default, и сохраните.

В итоге даже после обновления самого модуля при получении более новой версии Virtuemart 2.0 Ваш список категории будет неограниченной вложенности. Документация для разработчиков. Оформляем mod_virtuemart_category.

HTML код, формируемый модулем:

<ul class="VMmenu vm-catelgries-level-0" id="VMmenu[moduleid]" >
 <li id="module-[moduleid]-vm-category-[catid]" class="vm-category-[catid] VmOpen">
 <div class="vm-category-title has-children">
 <a href="/[ссылка на категорию]" >Категория верхнего уровня 1</a>  <span class="VmArrowdown"></span>
 </div>
 <ul class="menu vm-catelgries-level-1">
 <li id="module-[moduleid]-vm-category-[catid]" class="vm-category-[catid] VmClose">
 <div class="vm-category-title has-children">
 <a href="/[ссылка на категорию]" >Категория второго уровня 1</a>  <span class="VmArrowdown"></span>
 </div>
  <ul class="menu vm-catelgries-level-2">
  <li id="module-[moduleid]-vm-category-[catid]" class="vm-category-[catid] VmClose">
  <div class="vm-category-title">
  <a href="/[ссылка на категорию]" >Категория третьего уровня 1</a>
 ............
  </div>
  </li>
 ............
  </ul>
   </li>
 <li id="module-[moduleid]-vm-category-[catid]" class="vm-category-[catid] VmOpen">
 <div class="vm-category-title has-children">
 <a href="/[ссылка на категорию]" >Категория второго уровня 2</a>  <span class="VmArrowdown"></span>
 </div>
 </li>
 ........
 </ul>
 </li>
</ul>

Где:

[moduleid] – id модуля;
[catid] – id категории;
[ссылка на категорию] – собственно, ссылка на категорию;

Пример css правил для оформления списка категорий:

.VmArrowdown {
  cursor: pointer;
  width: 15px!important;
  padding: 0!important;
  height: 30px!important;
  display: block;
  margin: 0 12px 0 0!important;
  position: absolute;
  top: 0;
  right: 0;
}
li.VmOpen>div,li.VmClose>div{
  position: relative;
}
li.VmOpen>div{ pading-right: 15px!important}
li.VmOpen>div>span.VmArrowdown {
  background: url(./fonts.png) right center  no-repeat;  
}
li.VmClose>div>span.VmArrowdown {
  background: url(./fonts.png) left center  no-repeat;
}
li.VmOpen,li.VmClose,li.VmClose>div,li.VmOpen>div{
  float: none;
  clear: both;
  min-height: 0;
}
.VMmenu li {
  padding: 2px 0 2px 5px;
}
.VMmenu.vm-catelgries-level-0>li{
  padding: 2px 0 2px 0;
}

Связанные со списком категорий mod_virtuemart_category css стили:

li.VmClose>div. vm-category-title.has-children{} /* у данной категории есть подкатегории */
li.VmClose>div. vm-category-title.has-children>span.VmArrowdown{} /* элемент (находится после ссылки категории в названии категории), при щелчке по которому список подкатегорий будет показан */
li.VmOpen> div. vm-category-title.has-children>span.VmArrowdown{} /* элемент (находится после ссылки категории в названии категории), при щелчке по которому список подкатегорий будет скрыт */

Добавлена корректная возможность сворачивать/разворачивать список подкатегорий при помощи javascript. Возможность свернуть/развернуть подкатегории реализована щелчком мыши по элементу <span class=»VmArrowdown»></span>, который появляется после ссылки с именем текущей категории, если она содержит подкатегории (пример оформления см. выше).

В текущем примере используется спрайт url(./fonts.png), который содержит в себе нарисованные иконки +/- и отображает их в случае: когда подкатегории скрыты или видны, и мотивирует посетителя щелкнуть по данному элементу для получения списка подкатегорий, или же его сокрытия.

Для элемента div, который содержит в себе ссылку на саму категорию, добавлен класс vm-category-title, если у категории есть подкатегории, div.vm-category-title.has-children. Также были пронумерованы по уровням вложенности списки подкатегорий:

Родительские категории верхнего (первого) уровня получили класс — ul. vm-catelgries-level-0
Их дочерние категории второго уровня — ul. vm-catelgries-level-1
Третьего уровня — ul. vm-catelgries-level-2

Если Вы захотите как-то выделить стиль определенной категории во всех списках категорий, Вы сможете обратиться к ее классу:

li.vm-category-[catid]{}

Где [catid] заменяете на цифровой id категории, узнать его можно на странице категорий в панели управления – в верхнем горизонтальном меню – компоненты – virtuemart – Товары – категории – последний столбец ID.

Если Вы захотите выделить отдельно стиль определенной категории только в заданном списке категорий (если таковых списков на страницах Вашего магазина несколько), Вы можете сделать это так — уточняете выше приведенным способом ID категории, далее уточняете ID модуля.

Для уточнения ID текущего модуля в панели управления переходите в Расширения – Менеджер Модулей – находите нужный список категорий – в последнем столбце таблицы напротив списка находится ID модуля, дальше применяете css правила вида:

li #module-[moduleid]-vm-category-[catid]

Где:

[moduleid] – заменяете на id модуля;
[catid] – заменяете на id категории.

Чтобы настроить представление при помощи css стилей отдельного модуля списка категорий в целом, Вы можете использовать следующий css селектор:

ul#VMmenu[moduleid]{}

Где:

[moduleid] – заменяете на id модуля.

Чтобы узнать ID модуля в панели управления, переходите в Расширения – Менеджер Модулей – находите нужный список категорий – в последнем столбце таблицы напротив списка находится ID модуля.

Bugs: при работе с кэшем, так как результаты показа модуля будут кэшированы полностью, невозможно правильно выделить id текущей категории. Это общий баг модуля от создателей Virtuemart 2.0. Исправить можно только javascript ом в ближайшей версии.

Поделитесь со своими друзьями