Усовершенствованный модуль категорий [Аккордион и прочее - 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 и все.

[GeoSco]

Блин! Ошибся я 449722834

[GeoSco]

И ещё: не догнал (наверное торможу я) как в этом модуле реализыется следующее:
Есть 7 (семь) групп товаров со своими подкатегориями. Как посредством этого модуля реализовать 7 (семь) страниц со своими (непересекающимися) группами?
Ну например: есть Группа 1, Группа 2, ... Группа 7, каждая из которых привязана к конкретному пункту меню. Так вот, как исключить ненужные на странице Группы 1 группы я разобрался, но как назначить второму (третьему и т.д.) пункту меню этот модуль с соответствующим исключением других групп? Ведь если я в настройках модуля задаю привязку к конкреиному пункту меню (с соответствующими исключениями) то пытаясь привязать его же к другому пункту с другими исключениями я получаю вывод категорий уже в говом пункте меню, а старый не выводит ничего вовсе. Или это нормально? Или этих модулей должно быть по количеству групп? (но тогда смысл самого модуля теряется) Или этих групп не должно быть больше 2-х? Помоги разобраться, ато прям беда какая-то.

[danik.html]

не понял ничего... двай в асю ответь. я стукнул - молчек.

[dron]

а мой вопрос чета как-то никто не заметил...

отличный модуль, только не могу понять кое что... на сайте www.lemobile.ru сделал 3 таких модуля, каждый для своего меню: мтс, билайн и мегафон. В настройках отмечаю, какие пункты не надо выводить. А он мне почему-то во всех 3-х модулях выводит настройки первого модуля, т.е. ссылки только для мтс! в чем дело?

[артём-27-07]

тут кто нибудь помочь может?

[артём-27-07]

помогите как установить Joomla?

[danik.html]

Да, найдена еще одна ошибка. Надеюсь последняя. Грубая ошибка, связанная с кешированием. Ща залью обновленную версию

[GeoSco]

449722834 я днём доступен. А вопрос и правда я решить не смог с разными группами... Да и с аккордионом тож...

[GeoSco]

563031454 или вот

[GeoSco]

Вижу появился! Отзовись плз! geosco@mail.ru

[danik.html]

залил новый. там нет ошибок

[GeoSco]

Привет! Залил на хостинг, не работает :-(

[wisma]

Привет,делал все как ты говорил,даже связалься еще с тем кому ты помогал,но так и не вышло подкрутить акордион,или свой ксс,можешь стукнуть в аську? 9035125

[Xuga]

Заработал
папка залита корректно
уровни в 0
$assets = 'templates/ja_larix/html/mod_virtuemart_categories/assets/';

НО как сделать ему такой же стиль как и у родного древовидного меню? вируалмарта?


кому интересно как выглядит аккордино смотрите тут снизу http://alljap.ru/

[wisma]

а как подключить допустим Jqery?Или другие обычные ксс \ жава менюшки...


-------

Такс нашел где отвичает сам стиль,но не могу ничего изменить,если изменяю то становиться раскрытаая кака...


----- файлик templates/ТВОЙ ШАБЛОН/html/mod_virtuemart_categories/default.php---- и начиная с 50 строчки ---

<?php
   $assets = 'templates/ТВОЙ ШАБЛОН/html/mod_virtuemart_categories/assets/';
   $expand_img = "$assets/plus.gif";
   $contract_img = "$assets/minus.gif";

   $show_imgs = false;

   //JHTML::script('accordionmenu.js',$assets);
?>
<script type="text/javascript" src="<?php echo $assets ?>accordionmenu.js"></script>
<script type="text/javascript">
   window.addEvent('domready', function(){
   accordionMenu(
      "<?php echo $params->get('tag_id')?>", // Menu Tag ID (this id is assigned to menu parent ul tag)
      "<?php $show_imgs ? '' : $expand_img ?>", //path to image used to expand menu item
      "<?php $show_imgs ? '' : $econtract_img ?>", //path to image used to collapse menu item
      {duration: 200, transition:Fx.Transitions.Quart.easeOut}, // (optional argument) custom accordion options to override defaults, use null if you want to set next argument without changing this
      200, // (optional argument) hover delay in milliseconds over "parent menu item" to open its sublevels, default is 200
      1 // (optional argument) enable/disable opening of submenus on hovering
   );
   
   });
</script>
<?php

modVMCategoriesHelper::render($params,'decorator');

пыталься насильно вставлять код,но тогда дерево все раскрытое
Выходило чтото типо Грузиться главный скрипт Джеквери,Ксс...
А сюда

<script type="text/javascript">
   window.addEvent('domready', function(){
   accordionMenu(
      "<?php echo $params->get('tag_id')?>", // Menu Tag ID (this id is assigned to menu parent ul tag)
      "<?php $show_imgs ? '' : $expand_img ?>", //path to image used to expand menu item
      "<?php $show_imgs ? '' : $econtract_img ?>", //path to image used to collapse menu item
      {duration: 200, transition:Fx.Transitions.Quart.easeOut}, // (optional argument) custom accordion options to override defaults, use null if you want to set next argument without changing this
      200, // (optional argument) hover delay in milliseconds over "parent menu item" to open its sublevels, default is 200
      1 // (optional argument) enable/disable opening of submenus on hovering
   );
   
   });

подставлял вспомогательний скрипт джиквери...и выходила кака..

Hand Tools
Power Tools
*Outdoor Tools
*Indoor Tools
Garden Tools

а нужно...
Hand Tools
Power Tools (при нажатии вылазит то что ниже в {}{})
{Outdoor Tools}
{Indoor Tools}
Garden Tools

Скачивал Джиквери с http://www.i-marco.nl/weblog/jquery-accordion-menu/demo.zip

[wisma]

Ладно,вижу не ответять мне тут,хотябы скажи как свой ксс притулить?

[Xuga]

ребят значит так. кто решит проблему тому 300 вмр
ну помогите же!

[dron]

свой вопрос по одновременному выводу нескольких копий модуля снимаю! в версии 1.6.3 ошибка исправлена. огромное спасибо автору! отличный модуль!

[Xuga]

Ребята плачу 500 ВМР тому кто превратит этот модуль в дерево!

[Chij]

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

[danik.html]

Ребята плачу 500 ВМР тому кто превратит этот модуль в дерево!

А чем он не дерево? вывод древовидный
<ul>
  <li>категория</li>
  <li>
    <ul>
        <li>Подкатегория</li>
    </ul>
  </li>
</ul>

[wisma]

danik.html стукни мне в аську пож 9035125,у меня многое не выходит,а хочеться помощи...

[wisma]

После долгих мучений всетаки привязал свой акордеон меню,но теперь к сожелению не возможно отделять разные пункты меню..как в этом случае быть?
Код default.php в моем шаблоне...

Код

 
 
<?php
global $mosConfig_absolute_path, $VM_LANG,$database;
defined('_JEXEC') or die('Restricted access');
$database = & JFactory::getDBO();
if($mosConfig_absolute_path == ''){
  $mosConfig_absolute_path = dirname( __FILE__ ).'/../..';
}
  $database->setQuery("SELECT *
               FROM `#__menu`
               WHERE `link` LIKE '%com_virtuemart%'
               AND `published` =1");
  $GLOBALS['itemid'] = $database->loadResult();
// no direct access
$GLOBALS[parentmenuislink] = $params->get( 'parentmenuislink', '0' );
$GLOBALS[rememberlaststate] = $params->get( 'rememberlaststate', '0' );
 
$document =& JFactory::getDocument();
$document->addScript('media/system/js/mootools.js');
$document->addScript('modules/mod_vm_accordion/script/script.js');
$document->addStyleSheet('modules/mod_vm_accordion/styles/style.css');
require_once('administrator/components/com_virtuemart/classes/ps_database.php');
require_once('administrator/components/com_virtuemart/virtuemart.cfg.php');
$db =& new ps_DB;
$query = 'SELECT DISTINCT a.category_id, a.category_name, a.category_publish, a.list_order, f.category_parent_id, f.category_child_id FROM #__{vm}_category AS a, #__{vm}_category_xref AS f  WHERE a.category_publish="Y" AND a.category_id = f.category_child_id AND f.category_parent_id=\'0\'  ORDER BY a.list_order';
$db->query($query);
while($db->next_record()){
  $rows[] = $db->get_row();
}
$x=0;
if(count($rows) > 0){
  foreach($rows as $row){						
     $query = 'SELECT DISTINCT a.category_id, a.category_name, a.category_publish, a.list_order, f.category_parent_id, f.category_child_id'
     . ' FROM #__{vm}_category AS a, #__{vm}_category_xref AS f'
     . ' WHERE a.category_publish="Y" AND a.category_id = f.category_child_id AND f.category_parent_id='.$row->category_id
     . ' ORDER BY a.list_order';						
     $db->query( $query);
      while($db->next_record()){
        $sub_rows[$x][] = $db->get_row();
      }
        $y=0;
        if(isset($sub_rows[$x]) && count($sub_rows[$x]) > 0){
          foreach($sub_rows[$x] as $row){						
             $query = 'SELECT DISTINCT a.category_id, a.category_name, a.category_publish, a.list_order, f.category_parent_id, f.category_child_id'
             . ' FROM #__{vm}_category AS a, #__{vm}_category_xref AS f'
             . ' WHERE a.category_publish="Y" AND a.category_id = f.category_child_id AND f.category_parent_id='.$row->category_id
             . ' ORDER BY a.list_order';
             $db->query($query);
              while($db->next_record()){
                $sub_rows2[$x][$y][] = $db->get_row();
              }
              $y++;
          }
        }
      $x++;
  }
}else{
  return;
}
 
if(!function_exists("categoryLink")){
  function categoryLink($catId){
    return JRoute::_('index.php?option=com_virtuemart&page=shop.browse&category_id=' . $catId .'&Itemid='.$GLOBALS['itemid'] ) ;
  }
}
require(JModuleHelper::getLayoutPath('mod_vm_accordion', 'default'));
?>
 
 
 

Скрипт JS

Код

function accordionOfflajn(count,rememberlaststate){
     if(window.ie6){
        var heightValue = '100%';
     }else{
        var heightValue = '';
     } 
     var togglerName = 'dt.accordion'+count+'_toggler_';
     var contentName = 'dd.accordion'+count+'_content_';
     var counter = 1;
     var toggler = $$(togglerName + counter);
     var content = $$(contentName + counter); 
     while(toggler.length > 1) {
        op = -1;
        if(rememberlaststate == 1){
          toggler.each(function(item, index){
             if(Cookie.get(item.id) == "open"){
              op = index;
             }
          });
        }
        new Accordion(toggler, content, {
           opacity : false, display : op, alwaysHide : true, onComplete : function() {
                var element = $(this.elements[this.previous]);
                if(element && element.offsetHeight > 0) element.setStyle('height', heightValue); 
              }
           , onActive : function(toggler, content) {
              if(toggler.id != ''){
                Cookie.set(toggler.id, 'open', {duration: 10, path: "/"});
              }
              toggler.addClass('open');
              }
           , onBackground : function(toggler, content) {
              if(toggler.id != ''){
                Cookie.remove(toggler.id, {path: "/"});
              }
              toggler.removeClass('open'); 
            }
           }
        ); 
        counter++;
        toggler = $$(togglerName + counter);
        content = $$(contentName + counter); 
     }
}
 

Может ктото помоч?Для примера еще вывожу оригинальний код default.php

Код

<?php
 
// no direct access
defined('_JEXEC') or die('Restricted access');
 
 
if ( ! defined('modVMCategoriesXMLCallbackDefined') )
{
	function decorator(&$node, &$args)
	{
 
		// remove child items deeper than end level
		if ($args['end_level'] && ($node->attributes('level') >= $args['end_level']) && !($node->attributes('active') && $args['show_current']))
		{
			$children = $node->children();
			foreach ($node->children() as $child)
			{
				if ($child->name() == 'ul') {
					$node->removeChild($child);
				}
			}
		}
 
		// set parent class
		if (($node->name() == 'li') && isset($node->ul) && ($node->ul <> null)) {
			$node->addAttribute('class', 'parent');
		}
 
		// set current class
		if (($node->name() == 'li') && $node->attributes('current')) {
			$node->addAttribute('class', $node->attributes('class').' current');
		}
 
		// set active class
		if (($node->name() == 'li') && $node->attributes('active')) {
			$node->addAttribute('class', $node->attributes('class').' active');
		}
 
		$node->removeAttribute('id');
		$node->removeAttribute('parent');
		$node->removeAttribute('level');
		$node->removeAttribute('current');
		$node->removeAttribute('active');
 
	}
 
	define('modVMCategoriesXMLCallbackDefined', true);
}
?>
<?php
	$assets = 'templates/aquashop_by_wisma/html/mod_virtuemart_categories/assets/';
	$expand_img = "$assets/plus.gif";
	$contract_img = "$assets/minus.gif";
 
	$show_imgs = true;
 
	//JHTML::script('accordionmenu.js',$assets);
?>
<script type="text/javascript" src="<?php echo $assets ?>accordionmenu.js"></script>
<script type="text/javascript">
	window.addEvent('domready', function(){
	accordionMenu(
		"<?php echo $params->get('tag_id')?>", // Menu Tag ID (this id is assigned to menu parent ul tag)
		"<?php $show_imgs ? '' : $expand_img ?>", //path to image used to expand menu item
		"<?php $show_imgs ? '' : $econtract_img ?>", //path to image used to collapse menu item
		{duration: 200, transition:Fx.Transitions.Quart.easeOut}, // (optional argument) custom accordion options to override defaults, use null if you want to set next argument without changing this
		200, // (optional argument) hover delay in milliseconds over "parent menu item" to open its sublevels, default is 200
		1 // (optional argument) enable/disable opening of submenus on hovering
	);
 
	});
</script>
<?php
 
modVMCategoriesHelper::render($params,'decorator');
 

[djsanyok]

У меня не отображаются все подкатегории. Показыает только первых 3. Как исправить?

[Xuga]

значит так пациент http://alljap.ru
слева сверху стандартное дерево.
я хочу чтобы твой компонент выглядел точно токже, только слова построчкам переносил так как он делает сейчас.
Заплачу тебе 500 вмр. оч прошу сделай его именно так ) с нормальными картинками папочек, с плюсиками и минусиками оч оч прошу!

[Xuga]

Заплачу 800 рублей за решение ! НУЖНО СРОЧНО!

[wisma]

Такс чтобы вышло вот так вот как у меня (или подобнее) нужно сделать парочку шагов..

Скачиваем HTML.rar (в первом посте) открываем там Js скрипт блокнотом и заменяем вот эту строчку(гдето 89 строка)...

Код

eval("function accOnclickFunc(){return function(){ if( $('"+menuId+"').accElements["+i+"].style.height == '0px' ) { $('"+menuId+"').Accordion.display("+i+") }}}");

на...

Код

 eval("function accOnclickFunc(){return function(){ if( $('"+menuId+"').accElements["+i+"].style.height == '0px' ) { $('"+menuId+"').Accordion.display("+i+") } return false;}}");

Далее лезим в файлик default.php и ставим нолик вместо идинички вот в этой строке....

Код

   1 // (optional argument) enable/disable opening of submenus on hovering 

Далее лезим в ксс файл шаблона и пишем чтото наподобии..


-----------------------------------------------------------------------------------------------------------
ul#left li a /* это стиль ссылок категорий*/
{
display: block;
     color: #цвет по вкусу;
font-family: "шрифт по вкусу";
font-size: 13px;
font-style: normal;
     text-decoration: none;
     padding: 10px 0px  6px 23px;
     background: url(../images/картинка в папке с шаблоном.png) no-repeat;
}

u#left li li{ /*это стиль под категорий*/
     padding-left: 20px;
     margin: 2px 0;
 color: #цвет по вкусу;
   display: block;
font-family: "шрифт по вкусу";
font-size: 11px;
font-style: normal;
font-weight: bold;
text-align: left;
}

ul#left li li a{ /* Стиль ссылок под категоий*/
font-family: "шрифт";
font-size: 11px;
font-style: normal;
font-weight: bold;
    display: block;
    background: none;
    color: #цвет;
    text-decoration: underline;
text-align: left;
}
Где ul# обязательное! а Left (тоесть ul#left) это название Id тега списка

-----------------------------------------------------------------------------------------------------------

Потом идем в админку...к модулю...и в настройка (на картинке видно куда именно) пишем то что у вас после ul#XXX (где ХХХ это то что у меня left)


Спасибо danik.html за промучаное время со мной!))

[Stich SPb]

значит так пациент http://alljap.ru
слева сверху стандартное дерево.
....

Вот решение для дерева для переноса строк:

в файле dtree.css меняем это:

.dtree a.node, .dtree a.nodeSel {
font-size:11px;
padding:1px 2px;
white-space:nowrap;
}

на это:
.dtree a.node, .dtree a.nodeSel {
font-size:11px;
padding:1px 2px;
white-space:normal;
}

[danik.html]

white-space:normal;

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

[Chij]

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