Итак, выходов из этой ситуации было несколько:

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

Собственно, мною была сделана модификация модуля списка категорий 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 ом в ближайшей версии.

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

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Скачать файл:

Комментарии   

 
0 #6 Сергей 23.08.2014 13:40
Все работает замечательно кроме одного - первое меню остается открытым и не сворачивается когда распахиваешь другое меню. С меню более старшего уровня все нормально - распахиваешь новое - старое сворачивается
Цитировать
 
 
0 #5 Костя 12.08.2014 15:04
Решил проблему автоматического свертывания, которая возникает при установке более чем одного такого меню.
Правок в коде не нужно, просто второй модуль и все последующие нужно привязать к другому макету (я переименовал старый макет в default_old и все последующие модули привязал к нему), тогда код не дублируется и все работает ок!
Цитировать
 
 
0 #4 nik 12.01.2014 09:14
добрый день,
подскажите пожалуйста почему при установке более чем одного такого меню, перестает работать свертывание-развертывание?
точнее оно разворачивает, но тут же сворачивает обратно и если уже развернуто - то сворачивает и тут же разворачивает обратно.
не работает при одновременной установке более 1-го такого модуля на странице
Цитировать
 
 
0 #3 Александр 21.11.2013 17:28
Огромное спасибо, отличная статья, даже сохранил html страницу со статьёй.
Цитировать
 
 
0 #2 FreshTouch 12.09.2013 14:43
Как получить активную категорию?
Цитировать
 
 
+7 #1 Prosto-Chups 22.04.2013 22:00
Есть проблема, когда в родительском элементе нажимаешь раскрыть, то расскрываются все дочерние элементы.
Подскажите, как это вылечить?
Цитировать
 

Добавить комментарий


Яндекс.Метрика