Усовершенствованный модуль категорий [Аккордион и прочее - the best ;) ]

[danik.html]

Модуль категорий для VirtueMart 1.* - mod_virtuemart_categories

Если вам нужен аналогичный модуль для JoomShopping, вам сюда.


Скриншоты фронта:


Особенности:
1) Привязка к пункту меню - обязательно укажите эту опцию, иначе ссылки выдаваемые модулем буду "плавать" , тоесть зависить от текущей просматриваемой странице. Также не будет правильно работать подсветка активного пункта меню (в модуле меню)
2) Вывод только одной категории и ее субкатегорий
3) Создание списка категорий, выводить которые не нужно, или наоборот нужно.
4) Возможность выводить категории только с и до определенного уровня, то есть можно создать два связанных модуля (аналогично mod_mainmenu)
5) Имеется 4 шаблона модуля, принципиально отличающихся: Accordion, MooTree, Select, дефолтный. Можно их перекрывать в своем шаблоне сайта, или добавлять новые - они появятся в настройках.
6) Стандартные возможности указания суффиксов, кеширования и тд.
7) Две локализации - Русский и Английский.

Важно:
1) Корнем Mootree, если не задано в настройках, является пункт меню, если задан, или же пункт меню по умолчанию (главная сайта)
2) При включенном кеше модуля не будут работать Mootree и Accordion, а так же разворачиваться активные категории
3) При использовании Mootree и Accordion нужно отключить сворачивание меню
4) Стиль списка категорий может отличаться от стиля меню, из-за немного иной разметки. Решение проблемы описано в "Кастомизация. HTML".
5) В модуле нет каких либо js-файлов, используется стандартный функционал Joomla(mootools.js, accordion.js включенный в сборку mootools.js, mootree.js)
6) При использовании двух копий модуля с шаблоном mootree или accordion, как минимум в одном из них должен быть прописан параметр id списка, причем отличный от дефолтного(не mootree или accordion соответственно)

"Написание CSS-стилей для модуля"

ul в default и accordion имеет класс .menu{суффикс_если_задан}
в select тег не ul а select, и имеет класс .select{суффикс_если_задан}
Активные пункты имеют класс .active(как в mod_mainmenu), текущий - .current Родительские - .parent. В select выпадающие пункты так же имеют эти классы. Так же в Accordion имеется класс .expanded, помечающий развернутые пункты.
Пример:
Для accordion и default

Код

.menu .active a{
    color: red;
}
.menu .current a{
    text-decoration: underline;
}

Для select

Код

.select .active{
    background: #eee;
}
.select .current{
    color: #f00;
}

Для mootree нужно использовать классы .mooTree_text и .mooTree_selected, приписывая свойствам !important, потому как они уже определены в файле media/system/css/mootree.css

"Изменение HTML-разметки модуля"

Если нужно изменить основную html-разметку модуля, нужно создать папку templates/текущий_шаблон/html/mod_virtuemart_categories/
и скопировать туда нужный файл из modules/mod_virtuemart_categories/tmpl/ . Теперь в файл можно вносить изменения.
В этом файле вы не найдете ожидаемой разметки типа тегов ul, li, a и тд..
Модуль использует немного другой механизм создания html-кода.
Весь список представляет собой xml-объект, имеющий набор методов для добавления/изменения узлов - каждый узел впоследствии "рендерится" в соответствующий html-тег.
В файле имеется функция-декоратор, которой в цикле передается каждый узел списка. С ним можно делать что угодно.
К примеру, чтобы разметка совпадала с mod_mainmenu, допишем в раздел case: 'a' такой код:

Код

				// inject span into anchor
				$node->addChild('span')->setData($node->data());

"Добавление иконок. NEW"

Для этого категориям назначаем картинки, но не Полные изображения, а миниатюры (thumbnails).
Затем добавим в case: 'li' (читаем Кастомизация. HTML) этот код:

Код

				if ($node->attributes('image')) {
					$node->a[0]->addChild('img', array('src' => $node->attributes('image'), 'alt' => $node->a[0]->data()) );
				}

а в case: 'a' этот:

Код

				$node->addChild('span')->setData($node->data());

Добавил новый шаблон модуля(layout) - MooExplorer. Основан на MooTree. Отличие - подргужает через AJAX подкатегории и ТОВАРЫ.
Таким образом в нутри модуля умещается весь ваш магазин )
В модуль его добавляем так:
Качаем mooexplorer.layout.zip, распаковываем в папку вашего шаблона сайта. Идем в админку, выставляем в параметрах модуля Шаблон модуля - mooexplorer.
Внимание! в mooexplorer есть ошибка, изза которой со включенным sef-ом работать не будет. Чтоб заработал нужно заменить в коде index.html на index.php и все.

[danik.html]

чета типа

Код

#accordion img{
    vertical-align: middle;
    margin: 4px;
    float:none;
}
#accordion > li > a{
    text-decoration: none;
}
#accordion > li > a span{
    display:inline-block;
    vertical-align: middle;
    width: 170px;
}

[kiriamba]

подскажи пожалуйста
на сайте www.omilo.ru поставил меню но как сделать чтобы оно раскрывалось только тогда когда кликаеш на категорию ?

[kpk17]

жаль во втором вирте не работает

[Misterfox]

Подскажите пожалуйста, как сделать аналогичное меню:

[danik.html]

Misterfox, а где возникают трудности. Это вид шаблона MooTree по умолчанию. Поставь этот шаблон в параметрах модуля и все. Требует мутулз, так что если он у тебя вырезан на сайте (например чтоб использовать jquery), то работать не будет.

[Misterfox]

Misterfox, а где возникают трудности. Это вид шаблона MooTree по умолчанию. Поставь этот шаблон в параметрах модуля и все. Требует мутулз, так что если он у тебя вырезан на сайте (например чтоб использовать jquery), то работать не будет.

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

[danik.html]

Требует мутулз, так что если он у тебя вырезан на сайте (например чтоб использовать jquery), то работать не будет.

Так что давай ссылку если сам  не можешь разобраться.

[vertix]

У меня несколько категорий товаров, мне нужно чтоб например, в категории ламинат был одна меню, в категории паркет другая менюшка и так далее. Но для этого нужно как то каждую категорию сделать отдельным пунктом меню, а как. Подскажите пожалуйста.

[vertix]

Нашел мне кажется очень серьезную ошибку или просто сильно туплю, ставлю ваш модуль и стандартный Joomla модуль с хлебными крошками,  когда я перехожу по ссылкам категорий со стандартного модуля категорий в виртуалмарте то хлебные крошки работаю отлично, когда же с вашего модуля хлебные крошки тупят, так как почему то, ваш модуль формирует свою ссылку на категорию.
Стандартная ссылка
index.php?page=shop.product_details&flypage=flypage.tpl&product_id=29&category_id=6&option=com_virtuemart&Itemid=9
Эта же страница но перешел на нее с вашего модуля, ссылка изменилась
index.php?page=shop.product_details&product_id=32&flypage=flypage.tpl&pop=0&option=com_virtuemart&Itemid=2

[danik.html]

А в параметрах указана Привязка к пункту меню? Там должен быть указан пункт меню ведущий на компонент VirtueMart

[sek]

Я прикручиваю модуль, но с ним проблема.
ДВАЖДЫ слева показывается пункт - Главная.
Если привязываю новому пункту меню, ссылающемуся на компонент VirtueMart, то всё равно повторно выводится наименование пункта меню.

Простите, РАЗОБРАЛСЯ.
ОЧЕНЬ ХОРОШИЙ МОДУЛЬ, СПАСИБО ЗА НЕГО!

[den_caruk]

Пробовал ли кто переделать на jquery? Как вообще можно всунуть jquery вместо мутулза, возможно ли такое, для этого модуля?

[danik.html]

Пробовал ли кто переделать на jquery? Как вообще можно всунуть jquery вместо мутулза, возможно ли такое, для этого модуля?

Вопрос - зачем? Ведь VirtueMart работает на mootools, так что от этого фреймворка все равно не откажешься.
Если же всетаки нужно, то сам модуль модифицировать даже не обязательно. Нужно перекрыть лэйаут в своем шаблоне и переписать код на jquery (там отсилы строчек 10 получится). Это для аккордиона. Для mootree сделать аналог на jquery гораздо сложнее...

[den_caruk]

danik, чтобы сделать по шаблону что то такое http://ruseller.com/lessons.php?rub_id=29&id=459 ......вообще возможно к примеру такой шаблон себе сделать, но на jquery и вертикальный...например такое http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
Спрашиваю, потому, что под jquery есть куча готовых классных менюшек, которые можно легло подстроить под свои нужды, а с mootools никогда не работал....

[danik.html]

Посмотрел я примеры. Ни на ruseller ни тем более на динамикдрайве не понял зачем там вообще используется javascript. Этож все делается на чистом CSS.
Единственное, на CSS (пока) не сделать анимации, ее надо делать на js. Но блин, подключать jquery тупо ради создания fadeIn/fadeOut эффекта это глупо.
Вот пример на mootools как можно плавно растворять и проявлять вновь элемент наводя на него мышкой:

Код

$("id-of-my-element").addEvents(
	{
		mouseover: function(e){
			this.fade('out');
		},
		mouseleave: function(e){
			this.fade('in');
		}
	}
);
 

Этот пример легко переделать для плавного проявления/исчезания пунктов меню. Но сначала его надо сделать на CSS, а уж дальше анимировать на js (пока css3 не вошел в массы)

[den_caruk]

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

[danik.html]

За вывод аккордиона в моем модуле отвечает файл /tmpl/accordion.php .
В нем ничего особого - описывается функция-декоратор для xml-дерева для добавления нужных атрибутов. Ничего связанного с javascript нет. В конце файла идет подключение файла accordion_assets.php :

Код

require JModuleHelper::getLayoutPath('mod_virtuemart_categories', 'accordion_assets')
 

Вот уже в нем есть такие строчки:

Код

// require mootools
JHTML::_('behavior.mootools');
 
// get document
$document =& JFactory::getDocument();
$document->addScriptDeclaration($script);
 

Тоесть требуем мутулз, и подключаем свой скрипт содержащийся в вышеобъявленной переменной $script

[FLAGG]

чета типа

Код

#accordion img{
    vertical-align: middle;
    margin: 4px;
    float:none;
}
#accordion > li > a{
    text-decoration: none;
}
#accordion > li > a span{
    display:inline-block;
    vertical-align: middle;
    width: 170px;
}

Спасибо:)

[alpha-helix]

Стилизую подпункты. Нужно чтобы один от другого был отделен запятой
Для элементов li в CSS прописываю

Код:

li::after{
content: ",";
}

Получаю следующую картину :
(http://prntscr.com/6pb2f)
Т.е. запятая отделена от текста. padding и margin по  нулям.

Код:

<li class=" catid126">
  <a href="/catalog/category/126">Кронштейны</a>
  <::after>
</li>

Это код подпункта этого самого меню. Если в FireBug его вытягиваю в строчку - удаляю все пробелы и переносы строк, то все становится нормально


Подскажите пожалуйста как правильнее запятую к тексту притянуть.

[danik.html]

Да уж, не ожидал что пробелы могут помешать, поэтому даже такой опции не сделал, хотя даже в джумловском меню опция есть.
Так что лезьте в helper.php, 52-я строка:

Код

echo JFilterOutput::ampReplace( $xml->toString(true) )
 

Поменяйте true на false, модуль будет генериться без пробелов между тэгами

[dreamer85]

почему стандартный модуль формирует нормальное дерево (пример 1), а этот модуль показывает все вперемешку (пример 2)?

[danik.html]

Чет не сталкивался с таким безобразием. Да, в модуле имеется небольшая проблема связанная с неправильной сортировкой.
Но у вас что-то другое. И откуда эти странные пробелы? И цифры, вы что прям в название категории вбиваете? Помоему вы чегото перемудрили...
Другие варианты отображения, например дефолтный, нормально работают?

[dreamer85]

список категорий выгружаеться с  1с модулем.  в вашем модуле  все 3 темы почему то так отображают все в перемешку

[danik.html]

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

[danik.html]

Наверняка кого-то заинтересую:
Начал разработку аналогичного модуля для JoomShopping с примерно таким же функционалом, и даже больше.
На днях выложу бетаверсию.

[alpha-helix]

Да уж, не ожидал что пробелы могут помешать, поэтому даже такой опции не сделал, хотя даже в джумловском меню опция есть.
Так что лезьте в helper.php, 52-я строка:

Код

echo JFilterOutput::ampReplace( $xml->toString(true) )
 

Поменяйте true на false, модуль будет генериться без пробелов между тэгами

О, спасибо большое. Теперь все отлично

[webleer]

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

Есть категория товара "Самокаты" и в ней подкатегория "Самокаты для взрослых"

Пункт меню "Самокаты для взрослых" выдает ссылку:  www.saite.ru/samokaty-dlya-vzroslyh

А нужно чтобы было www.saite.ru/samokaty/samokaty-dlya-vzroslyh

[danik.html]

Это не к модулю вопрос а к роутеру VirtueMart, ссылками занимается он.

[warlocksp]

У меня вообще не работает...
То есть, устанавливаться, а выбор параметров нет?

[Amid1210]

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