В этой статье я расскажу как можно создать меню VirtueMart построенное с помощью списка и стилизовать его под используемый шаблон.
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). Модуль бесплатный. Скачать его можно с сайта разработчика по этой ссылке.

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

XHTML Product Categories for Virtuemart

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

Теперь немного поговорим о настройке модуля. Я вижу 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>
 Т.е. первоначальный класс UL «vmLinkMenu». В CSS шаблона Joomla для меню класс будет другим. Это 100%. Т.е нам нужно либо изменить класс в модуле, либо создать CSS-код, аналогичный коду меню Joomla, только с добавлением  «vmLinkMenu». Первый вариант мне кажется проще, поэтому заходим в код модуля (modules/  mod_virtuemart_product_categories / mod_virtuemart_product_categories.php), находим там строчку:
 
1
$html='<ul'.($firstPass?' class="vmLinkMenu'.$class_sfx.'"':'').'>';
и выставляем требуемый класс, например, как в меню Joomla:
1
$html='<ul'.($firstPass?' class="menu'.$class_sfx.'"':'').'>';
Да, изначально это все кажется очень сложно. Человек, не знакомый с созданием меню, прочитав это вряд ли что-то поймет. Так что если в голове все спуталось, отсылаю к серии статей по созданию шаблона Joomla. Там есть статья и про меню. В любом случае, прежде чем все встанет на свои места, придется хорошенько попотеть.

Теперь, когда наше 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 созданные читателями, будут выложены в конце этой статьи с бонусом в виде прямых ссылок на сайты создателей.

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

Другие статьи серии

Комментарии  

+9 # RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.parsanches 15.11.2010 13:09
В очередной раз убеждаюсь что это лучший сайт по джумле. Все что нужно, четко, доходчиво и без воды. Огромный плюс владельцу!
Ответить | Ответить с цитатой | Цитировать
0 # RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.Ветал 23.11.2010 10:37
не совсем понял где менять код, чтоб SEF ссылки были красивыми...
Не подскажите в каком файле менять? (в том же где меняли вид модуля - не нашел)
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.Wedal 24.11.2010 03:56
Ветал, все в том же файле модуля. Ищите лучше, возможно не по всей строчке, а только по ее части. Оно там, проверено мною лично.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: RE: RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.Ветал 24.11.2010 14:16
Спасибо. Действительно. Нашел
Ответить | Ответить с цитатой | Цитировать
+3 # RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.Виталий 25.11.2010 21:56
Спасибо!!! Сайт феноменальный. Считаю, что ссылка на него должна быть на сайте разработчиков джумлы и виртумарта на самом видном месте! Спасибо еще раз!
Ответить | Ответить с цитатой | Цитировать
+1 # ПодкатегорииLimon 30.11.2010 12:11
как бороться с тем что после измененияя строки для корректного чпу, перестают отображаться подкатегории? все товары грзятся в главную
Ответить | Ответить с цитатой | Цитировать
+1 # RE: ПодкатегорииВетал 30.11.2010 12:14
попробуй отключить чпу и довериться компоненту SH404SEF
Мне помогло
Ответить | Ответить с цитатой | Цитировать
+4 # RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.Limon 30.11.2010 14:03
Спасибо, большое
Ответить | Ответить с цитатой | Цитировать
+3 # VirtueMartdruid 12.12.2010 13:29
Перечитал все части данной статьи - огромный труд автора...
И польза очень большая.
Большое ему за это СПАСИБО и уважение!!!
Ответить | Ответить с цитатой | Цитировать
+1 # VirtueMart Product CategoriesФедоров Сергей 27.12.2010 09:14
Люди! Поставил этот модуль но не могу сделать так, чтобы вывести все категории и подкатегории... помогите кто умный!
Ответить | Ответить с цитатой | Цитировать
0 # RE: VirtueMart Product CategoriesWedal 28.12.2010 05:14
Федоров Сергей, вопрос поднят на форуме:
http://wedal.ru/forum/VirtueMart/96-Vyvesti-na-glavnoj-spisok-kategorij-i-podkategorij.html
Далее обсуждаем там.
Ответить | Ответить с цитатой | Цитировать
0 # RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.Максим 09.02.2011 06:31
Добрый день.
Подскажите пожалуйста, необходимо сделать меню вида:

-Категория1
--Товар1
--Товар2
-Категория2
--Товар3

Выжеуказанный модуль выводит исключительно категории.
Как с наименьшими усилиями можно это сделать?
Заранее спасибо
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.Wedal 09.02.2011 07:37
Максим, посмотрите здесь:
http://extensions.joomla.org/extensions/extension-specific/virtuemart-extensions/virtuemart-navigation
может что подойдет.
А вообще(я так понимаю товаров у вас не много) это можно сделать создав меню Joomla и вручную назначив каждому из его пунктов категорию VirtueMart, а каждому подпункту - товар.
Ответить | Ответить с цитатой | Цитировать
0 # RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.Максим 09.02.2011 09:58
Спасибо за ссылочку.
Товаров действительно мало, но хотелось, чтобы тот кто будет заполнять, не ссовершал лишних движений.
Спасибо.
Ответить | Ответить с цитатой | Цитировать
0 # VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.vadim 04.04.2011 08:21
в моем меню большая иерархия, когда я перехожу в другую категорию остальные меню не выпадывают... как сделать так чтобы в выпадающем меню отображались все подкатегории всех корневых категорий
Ответить | Ответить с цитатой | Цитировать
0 # МенюИлья 21.04.2011 08:25
А как добавить в список категорий пункт меню "главная страница"? Все перерыл, все перепробовал, так и не нашел решения. Подскажите, как сделать. Огромнейшее Вам спасибо!
Ответить | Ответить с цитатой | Цитировать
0 # VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMartЕвгений7 21.04.2011 17:56
Сайт на самом дел самый продвинутый, спасибо огромное, только проблемка вот решилась только отчасти, у меня шаблон из artisteera, вместо class="menu' вставляю class="art-vmenu', в результате категории некорректно как и было, а вот подкатегории и под-подкатегории -так как доктор прописал, роюсь копаюсь, может кто посоветует что?
Ответить | Ответить с цитатой | Цитировать
0 # МенюRUS125 06.07.2011 08:48
Wedal, опять не могу понять работу любимой Joomla :-).

У меня на сайте меню virtuemart-a организованно следующим образом:

1. Японские КМУ
1.1. UNIC
1.2. TADANO
....
1.6. SAKAI

2. Корейские КМУ
2.1. SOOSAN
2.2. KANGLIM
.....
2.5 DONGYANG

и т.д. в такой иерархии, т.е. есть основная категория и дочерняя и всё. Соответственно, на сайте меню показывается не развернутым, т.е. только первые категории, т.е.:

1. Японские КМУ
2. Корейские КМУ

Раньше всё было хорошо, и при нажатии на ссылку "Японские КМУ" открывались её дочерние категории, т.е.:

1. Японские КМУ
1.1. UNIC
1.2. TADANO
....
1.6. SAKAI

А теперь не понять из-за чего при нажатии на ту же ссылку "Японские КМУ" появляется надпись,... "В данной категории нет товаров." и не открываются дочерние категории, т.е. пользователь попадает в тупик ...


В чём может быть проблема? :sigh:
Ответить | Ответить с цитатой | Цитировать
0 # RE: МенюWedal 07.07.2011 03:32
RUS125, мало информации. Что за модуль меню используется?
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: МенюRUS125 07.07.2011 06:34
Wedal,

Тип модуля: mod_virtuemart, тот который отвечает за вывод стадартного меню категорий, подкатегорий в магазине VirtueMart. :-)
Ответить | Ответить с цитатой | Цитировать
0 # Зачем нужны ненужные опцииВладимир 06.07.2011 14:59
Здравствуйте, давно занимаюсь программированием, вот решил ознакомиться с Джумлой. По поводу ненужных функций. Смотрите. Например в шапке сайта Вам нужно Вывести только родительские категории, а слева дочерние. Так вот берем две копии данного модуля, который вверху с настройками 0,0, а который слева 0,X (зависит от уровня вложенности)
Ответить | Ответить с цитатой | Цитировать
0 # Зачем нужны ненужные опцииВладимир 06.07.2011 22:46
Почитал свой коммент. Не совсем как то понятно получилось. Не сочтите за рекламу. Вот пример зачем нужны настройки wshop.com.ua. Только во втором случае настройки 1, Х (описался просто)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Зачем нужны ненужные опцииWedal 07.07.2011 03:30
Владимир, ммм, а вы правы. Вообще, тогда хорошая штука получается. Спасибо.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: RE: Зачем нужны ненужные опцииВладимир 09.07.2011 17:48
Для создания серьёзного меню модуль не годится:(. Он формирует дочернии категории только когда родительская категория активна, а надо чтоб выводил полностью весь список. Ну а дальше мудрим уже с CSS
Ответить | Ответить с цитатой | Цитировать
0 # RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.Семен 21.08.2011 13:58
Здравствуйте. Скачал модуль, опубликовал, теперь отображается и меню постореное модулем и старое меню с категориями... Задвоилось меню. Что то я упустил
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.Wedal 22.08.2011 02:59
Семен, так отключите старое меню(модуль).
Ответить | Ответить с цитатой | Цитировать
+1 # подкатегорииtoxuin 09.09.2011 04:03
Как же заставить его вывести подкатегории? У меня выводит только родительские категории. Даже не знаю куда копать уже.
Ответить | Ответить с цитатой | Цитировать
0 # RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.Oleg 05.11.2011 02:40
Цитирую RUS125:
Wedal, опять не могу понять работу любимой Joomla :-).
Раньше всё было хорошо, и при нажатии на ссылку "Японские КМУ" открывались её дочерние категории, т.е.:
А теперь не понять из-за чего при нажатии на ту же ссылку "Японские КМУ" появляется надпись,... "В данной категории нет товаров." и не открываются дочерние категории, т.е. пользователь попадает в тупик ...
В чём может быть проблема? :sigh:

Возможно Вы используете версию VirtueMart 1.1.9 ,а в ней действительно есть глюк с товарами в подкатегории!
Решение: в файле \administrator\components\com_virtuemart\html\shop.browse.php в строке 86:
elseif( $num_rows == 0 && empty($product_type_id) && empty($child_list)) {
echo $VM_LANG->_('EMPTY_CATEGORY');
Нужно изменить условие, поставив перед empty($child_list) восклицательный знак:
elseif( $num_rows == 0 && empty($product_type_id) && !empty($child_list)) {
echo $VM_LANG->_('EMPTY_CATEGORY');
Ответ нашел сдесь: http://slaffko.name/blog/item/oshibka-v-virtuemart-119-v-dannoj-kategorii-net-tovarov.html
Ответить | Ответить с цитатой | Цитировать
0 # такой же вид, как и меню JoomlaЮрий 28.12.2011 19:56
У меня получилось повторить стиль меню joomla без изменения css!
Суффикс класса модуля моего меню был art-vmenu. Поэтому строку
$html='';
я заменил на
$html='';
Кроме того уже в самом этом новом модуле я поставил суффикс класса модуля art-vmenu.
Получилось меню магазина, как меню joomla!!!
НО, у меня меню раздвигалось (скрипт какой-то). А в этом измененном меню оно не открывается и отображается только верхний уровень. Хотя пытался играть с этими странными параметрами
Ответить | Ответить с цитатой | Цитировать
0 # такой же вид, как и меню JoomlaЮрий 28.12.2011 19:59
class="vmLinkMenu' поменял на class="art-vmenu'
Ответить | Ответить с цитатой | Цитировать
0 # такой же вид, как и меню JoomlaЮрий 28.12.2011 19:57
блин, код в комментах обрезался
Ответить | Ответить с цитатой | Цитировать
0 # RE: такой же вид, как и меню Joomlaroggi 12.04.2012 09:03
Юрий день добрый! У вас какая версия вирта?
Ответить | Ответить с цитатой | Цитировать
0 # Накажите плагиатщика!!!Юрий 28.12.2011 20:10
Уважаемый Wedal, спасибо вам за ваш труд! Вот нашел копию вашей статьи без ссылки на вас http://www.jdownloads.ru/joomla/78-virtuemart-----joomla--23----virtuemart.html
Нехороший человек стибрил!!!
Ответить | Ответить с цитатой | Цитировать
0 # RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.droffick 21.02.2012 20:01
Как добавить уникальный css класс подкатегориям?
Никак иначе не получается настроить стиль вывода подкатегорий отличный о стиля вывода категорий.
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.Wedal 22.02.2012 01:57
droffick,

.baseclass ul li ul
.baseclass ul li ul li
.baseclass ul li ul li a
Ответить | Ответить с цитатой | Цитировать
0 # RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.droffick 22.02.2012 05:30
Цитирую Wedal:
droffick,

.baseclass ul li ul
.baseclass ul li ul li
.baseclass ul li ul li a

Спасибо, но так не работало, перекрывались классы.
Вообщем я добавил класс, если нужно выложу код, там пару условии...
Ответить | Ответить с цитатой | Цитировать
0 # RE: VirtueMart – интернет-магазин на Joomla. Часть 23. Создание стилизованного меню VirtueMart.roggi 12.04.2012 06:09
День добрый! Стоит VirtueMart 1.1.9 не могу понять где поменять стиль меню вирта, видимо на этой версии структура отличается
Ответить | Ответить с цитатой | Цитировать

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

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх