Категории

[ХАК] Категории в виде аккордеона в блоке

Много просьб было на эту тему....

В общем, решение не сложное и при желании, с минимальными знаниями, можно встроить почти любой скрипт аккордеона.

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

1 - в папке themes/ваш шаблон/javascript создать файл menu.js и вставить туда этот код
(function($){
$.fn.extend({

accordion: function(options) {

var defaults = {
accordion: 'true',
speed: 300,
closedSign: '',
openedSign: ''
};

var opts = $.extend(defaults, options);
var $this = $(this);

$this.find("li").each(function() {
if($(this).find("ul").size() != 0){
$(this).find("a:first").append("<span>"+ opts.closedSign +"</span>");

if($(this).find("a:first").attr('href') == "#"){
$(this).find("a:first").click(function(){return false;});
}
}
});

$this.find("li.active").each(function() {
$(this).parents("ul").slideDown(opts.speed);
$(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);
});

$this.find("li a").click(function(e) {
if($(this).parent().find("ul").size() != 0){
e.preventDefault();
if(opts.accordion){
if(!$(this).parent().find("ul").is(':visible')){
parents = $(this).parent().parents("ul");
visible = $this.find("ul:visible");
visible.each(function(visibleIndex){
var close = true;
parents.each(function(parentIndex){
if(parents == visible){
close = false;
return false;
}
});
if(close){
if($(this).parent().find("ul") != visible){
$(visible).slideUp(opts.speed, function(){
$(this).parent("li").find("span:first").html(opts.closedSign);
});

}
}
});
}
}
if($(this).parent().find("ul:first").is(":visible")){
$(this).parent().find("ul:first").slideUp(opts.speed, function(){
$(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);
});

}else{
$(this).parent().find("ul:first").slideDown(opts.speed, function(){
$(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
});
}
}
});
}
});
})(jQuery);

$(document).ready(function() {
$("#CatNavi").accordion({
accordion:true,
speed: 500,
closedSign: '',
openedSign: ''
});
});

В файле themes/ваш шаблон/javascript/general.js.php добавить строчку

Открыть файл themes/ваш шаблон/source/boxes/categories.php и все содержимое заменить на этот код
<?php
$box = new osTemplate;
$box_content = '';
$id = '';
$box->assign('tpl_path', _HTTP_THEMES_C);

global $MaxLevel, $HideEmpty, $ShowAktSub;

$MaxLevel = 10;
$HideEmpty = false;
$ShowAktSub = true;

function os_show_category($cid, $level, $foo, $cpath)
{
global $old_level, $categories_string, $MaxLevel, $HideEmpty, $ShowAktSub;

$Empty = true;
$pInCat = os_count_products_in_category($cid);
if ($pInCat > 0)
$Empty = false;

$Show = false;
if ($HideEmpty)
{
if (!$Empty)
$Show = true;
}
else
$Show = true;

$ShowSub = false;
if ($MaxLevel)
{
if ($level < $MaxLevel)
$ShowSub = true;
}
else
$ShowSub = true;

if($Show)
{
if ($cid != 0)
{
$category_path = explode('_',$GLOBALS['cPath']);
$in_path = in_array($cid, $category_path);
$this_category = array_pop($category_path);

for ($a = 0; $a < $level; $a++) ;

$ProductsCount = false;

if (SHOW_COUNTS == 'true')
$ProductsCount = ' <em>(' . $pInCat . ')</em>';

$Aktiv = false;
if ($this_category == $cid)
$Aktiv = ' Current active ';
elseif ($in_path)
$Aktiv = ' CurrentParent';

$SubMenue = false;

if (os_has_category_subcategories($cid))
$SubMenue = " SubMenue";

$MainStyle = 'CatLevel'.$level;

$Tabulator = str_repeat("\t",$level-1);

if($old_level)
{
if ($old_level < $level)
{
$Pre = "\n<ul>";
$Pre = str_replace("\n","\n".$Tabulator, $Pre)."\n";
}
else
{
$Pre = "</li>\n";
if ($old_level > $level)
{
for ($counter = 0; $counter < $old_level - $level; $counter++)
{
$Pre .= str_repeat("\t", $old_level - $counter -1)."</ul>\n".str_repeat("\t", $old_level - $counter- 2)."</li>\n";
}
}
}
}

$categories_string .= @$Pre.$Tabulator.
'<li class="'.$MainStyle.$SubMenue.$Aktiv.'">'.
'<a href="' . os_href_link(FILENAME_DEFAULT, os_category_link($cid, $foo['name']) ) . '">'.
$foo['name'].$ProductsCount.
'</a>';
}

$old_level = $level;

foreach ($foo as $key => $value)
{
if ($foo['parent'] == $cid)
{
if (@$ShowAktSub && @$Aktiv)
$ShowSub = true;

if ($ShowSub)
os_show_category($key, $level+1, $foo, ($level != 0 ? $cpath . $cid . '_' : ''));
}
}
}
}

$categories_string = '';

if (GROUP_CHECK == 'true')
$group_check = "AND c.group_permission_".$_SESSION['customers_status']['customers_status_id']." = 1 ";
else
$group_check = '';

$categories_query = osDBquery("
SELECT
c.categories_id, cd.categories_name, c.parent_id
FROM
".TABLE_CATEGORIES." c, ".TABLE_CATEGORIES_DESCRIPTION . " cd
WHERE
c.categories_status = '1' ".$group_check." AND c.categories_id = cd.categories_id AND cd.language_id='".(int)$_SESSION['languages_id']."'
ORDER BY
sort_order, cd.categories_name
");

if (os_db_num_rows($categories_query, true))
{
while ($categories = os_db_fetch_array($categories_query,true))
{
$foo] = array
(
'name' => $categories['categories_name'],
'parent' => $categories['parent_id']
);
}

os_show_category(0, 0, $foo, '');

$CatNaviStart = "\n<ul id=\"CatNavi\">\n";

for ($counter = 1; $counter < $old_level+1; $counter++)
{
@$CatNaviEnd .= "</li>\n".str_repeat("\t", $old_level - $counter)."</ul>\n";
if ($old_level - $counter > 0)
$CatNaviEnd .= str_repeat("\t", ($old_level - $counter)-1);
}
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////

$box->assign('BOX_CONTENT', $CatNaviStart.$categories_string.$CatNaviEnd);
$box->assign('language', $_SESSION['language']);

if (USE_CACHE=='false')
{
$box->caching = 0;
$box_categories= $box->fetch(CURRENT_TEMPLATE.'/boxes/box_categories.html');
}
else
{
$box->caching = 1;
$box->cache_lifetime=CACHE_LIFETIME;
$box->cache_modified_check=CACHE_CHECK;
$cache_id = $_SESSION['language'].$_SESSION['customers_status']['customers_status_id'].$current_category_id;
$box_categories= $box->fetch(CURRENT_TEMPLATE.'/boxes/box_categories.html',$cache_id);
}

$osTemplate->assign('box_CATEGORIES',$box_categories);
?>

В файле themes/ваш шаблон/style.css вставить

#CatNavi {margin:0;padding:0;}
#CatNavi li {}
#CatNavi li a {display:block;padding:2px 0 2px 0;}
#CatNavi li a:hover {}
#CatNavi li.Current a {color:#ef7d00;}
#CatNavi li.Current a:hover {color:#6a6a6a;}
#CatNavi ul {margin:0 0 0 15px;display: none;}

Но! Это стили без оформления. Вам нужно будет оформить стили под свой шаблон. Данное решение просто как пример!
Скрываются ПОДкатегории в меню с помощью этого кода

#CatNavi ul {margin:0 0 0 15px;display: none;}

Т.е. #CatNavi задается основному списку ul, а #CatNavi ul всем вложенным в него.

Скачать файлы в архиве можно ниже.

Для корректной работы скрипта необходимо обновить jQuery.
1 - Скачиваем скрипт тут http://jquery.com/
2 - Открываем файл jscript/jquery/jquery.js и заменяем содержимое на скачанное.
или
скачиваем прикрепленный архив jqyery.rar и заменяем файл jscript/jquery/jquery.js

.

Делал как описано 3 раза. К сожелению вот что получалось.

Fatal error: Smarty error: : syntax error: unrecognized tag 'global' (smarty_compiler.class.php, line 590) in /home/tehnokhu/domains/tehno.kh.ua/public_html/includes/lib/smarty/smarty.class.php on line 1108

Жаль.

выложите сюда содержимое grin/boxes/box_categories.html

{config_load file="$language/lang.conf" section="boxes"}
<div class="yjsquare">
<div class="h3l">
<div class="h3r">
<div class="greenblock_header"><h3>Разделы</h3></div>
<div class="block_center">
<div class="leftmenu">
<ul class="leftmenu_list">
<li class="mainlevel"><h3 class="menu">{$BOX_CONTENT}</h3></li>
</ul>

</div> </div></div>
</div>
<div class="block_bot"></div>
</div>
<div class="navhead_blank"> <b></b></div>

Правильнее тут будет

{config_load file="$language/lang.conf" section="boxes"}
<div class="yjsquare">
<div class="h3l">
<div class="h3r">
<div class="greenblock_header"><h3>Разделы</h3></div>
<div class="block_center">
<div class="leftmenu">
{$BOX_CONTENT}

</div> </div></div>
</div>
<div class="block_bot"></div>
</div>
<div class="navhead_blank"> <b></b></div>

{$BOX_CONTENT} уже содержит в себе полную структуру списков. Однако нарушиться вывод видимо из-за разных стилей.

А ошибка не понятно откуда.
В блоке все правильно.

обновил прикрепленный файл в первом топике под шаблон default. Там рабочий код на 100%

Новую версию попробовал на переработанном шаблоне Default Red и тоже не работает.
Тестовый сайт kn19.ru
Открывать нужно пробовать первую категорию. Остальные категории открываются, но лишь благодаря использованию другого скрипта, найденного тут же.

Может конфликт происходит? Попробую еще нулевую версию поставить Шопоса.

jQuery подключен позже, чем меню. а должно быть наоборот.
И второе меню зачем подключать, если это подключаете?

Сейчас исправлю и перезалью

Установил шаблон Default (без модификаций).
Один раз разворачивает подкатегории, а потом записает и другие уже категории не разворачиваются и эта тоже не сворачивается при повторном клике.
Посмотрите, плз kn19.ru

jQuery может обновить. У меня 7 версия, у тебя 3.

Точно! С 1.7 версией Jquery все отлично работает!

Тогда выложите, плз, и jquery 1.7 версию в архиве, а то ведь по умолчанию в ШОпосе 1,3 идет, так что подобный глюк может быть у многих.

обновил первый топик.

У меня конфликтует Jquery 1.7 с jQuery JavaScript Library v1.4.2. Если убрать второй Jquery, то не работает каруселька, если оставить оба, то не работает аккордеон.
Не разбираюсь в разных версиях Jquery. Случаем это не одни и те же срипты разных версий?

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

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

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

Я установил. Работает. Но изменился шрифт на маленький, а я незнаю к сожалению как поменять.
Подскажите пожалуйста как сделать чтоб "Разделы" опять был жирным шрифтом и фон блока то же изменился на фон шаблона(silver) а остальные то с белым фоном..да на белом как то и лучше вроде видно. Как изменить шрифт в боксе РАЗДЕЛЫ и востановить фон на белый. Спасибо.

у вас там видимо свои стили были. нужно соединять код стилей из первого топика со своим.
основным там является #CatNavi ul {margin:0 0 0 15px;display: none;}
так как скрывает вложенные блоки ul

а покажите хоть пример, кто сделал...хочеться увидеть это на шопосе....

прикрепил слайд картинок и аккордион перестал работать. в чем проблемма?

конфликт джава скриптов

и как быть, что делать?

не допускать эскалации конфликта ...... )
найти чего еще подключилось такого в слайде картинок и устранить

Понятно....только ни чего не понятно :-\

Подскажите, что править чтоб подкатегории раскрывались при наведении мыши, а не при клике. При клике чтоб раскрывалась сама, родительская категория?

можно попробовать, чтобы открывалось вообще все без клика.
попробуйте заменить
$this.find("li a").click(function(e) {
на
$this.find("li a").hover(function(e) {

При таком способе происходит что-то страшное с меню. По крайней мере из-за отсутствия задержки. Спасибо.

нужно переписывать значит. Меню заточено под Клик. Я в JS не силен, так что подсказать не смогу что-то конкретное.

Все работает а как сделать чтобы при наведении они плавно в право открывались ?

Источник