Раскрывающееся дерево категорий

Тема в разделе "Сторонние элементы от других разработчиков", создана пользователем VMerk, 21 ноя 2015.

  1. VMerk

    VMerk Moderator

    [​IMG]
    Для того чтобы сделать раскрывающееся дерево категорий нужно:
    В файле шаблона /home/2x2cms/build/templates/themes/имя текущей темы/catalog_category_products.tpl.php найти блок

    PHP:
    <?
    if(isset(
    $tree_categories['all']) && !empty($tree_categories['all'])){
    ?>
        <div class="sidebar" style="margin-top: 20px;">
            <ul>
                <li>
                   <div class="accordion open">
                        <p class="accordion-link">Категории</p>
                        <div class="accordion-box">
                            <?
                                
    function CategoryTree($cats$link_catalog$category_id$parent_id 0){
                                    if(
    is_array($cats)){
                                        if(empty(
    $parent_id)){
                                            
    $tree '<ul class="cat-main">';
                                        }else{
                                            
    $tree '<ul class="sub">';
                                        }
                                        foreach(
    $cats as $cat){
                                            if(
    $cat['parent']==$parent_id){
                                                
    $link SITE_URL.$link_catalog."/".$cat['full_link']."/";
                                                
    $class "";
                                                if(
    $category_id==$cat['id']){ $class ' class="bold"'; }
                                                
    $tree .= "<li {$class}><a href=\"{$link}\"><p>{$cat['title']}</p></a>";
                                                
    $tree .=  CategoryTree($cats,$link_catalog,$category_id,$cat['id']);
                                                
    $tree .= '</li>';
                                            }
                                        }
                                        
    $tree .= '</ul>';
                                    }
                                    else return 
    null;
                                    return 
    $tree;
                                }
                            
    ?>
                            <? echo CategoryTree($tree_categories['all'], $this->pages->get_full_link_module('catalog'), $category['id']);?>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    <?
    }
    ?>

    и заменить его на

    PHP:
    <?
    if(isset(
    $tree_categories['all']) && !empty($tree_categories['all'])){
    ?>
        <div class="sidebar" style="margin-top: 20px;">
            <ul>
                <li>
                   <div class="accordion open">
                        <p class="accordion-link">Категории</p>
                        <div class="accordion-box">
                            <?
                                
    function CategoryTree($cats$link_catalog$category_id$parent_id 0$path = array()){
                                    if(
    is_array($cats)){
                                        if(empty(
    $parent_id)){
                                            
    $tree '<ul class="cat-main">';
                                        }else{
                                            
    $tree '<ul class="sub">';
                                        }
                                        foreach(
    $cats as $cat){
                                            if(
    $cat['id']>0){
                                                
    $is_child false;
                                                if(
    $cat['parent']==$parent_id){
                                                    foreach(
    $cats as $cat1){
                                                        if(
    $cat['id']==$cat1['parent']){
                                                            
    $is_child true;
                                                            break;
                                                        }
                                                    }
                                                }
                                                if(
    $cat['parent']==$parent_id){
                                                   
                                                    
    $link SITE_URL.$link_catalog."/".$cat['full_link']."/";
                                                    
    $classes = array();
                                                 
                                                    if(
    $category_id==$cat['id']){ $classes[] = 'bold'; }
                                                    if(
    in_array($cat['id'], $path)){
                                                        
    $classes[] = 'opened';
                                                    }
                                                 
                                                    
    $class "";
                                                    if(!empty(
    $classes)){
                                                        
    $class "class=\"".implode(" "$classes)."\"";
                                                    }
                                                 
                                                    
    $tree .= "<li {$class}>";
                                                    if(
    $is_child){
                                                        
    $tree .= "<div class=\"drop\"></div>";
                                                    }
                                                   
                                                    
    $tree .= "<a href=\"{$link}\"><p>{$cat['title']}</p></a>";
                                                    
    $tree .=  CategoryTree($cats,$link_catalog,$category_id,$cat['id'],$path);
                                                    
    $tree .= '</li>';
                                                       
                                                }
                                            }
                                        }
                                        
    $tree .= '</ul>';
                                    }
                                    else return 
    null;
                                    return 
    $tree;
                                }
                             
                                function 
    get_path($three$category_id$children 0){
                                    
    $cats = array();
                                    foreach(
    $three as $cat){
                                        if(
    $category_id==$cat['id']){
                                            
    $cats[] = $cat['id'];
                                            if(!empty(
    $cat['parent'])){
                                                
    $cats array_merge($catsget_path($three$cat['parent']));
                                            }
                                        }
                                    }
                                    return 
    $cats;
                                }
                                
    $path array_reverse(get_path($tree_categories['all'], $category['id']));
                             
                            
    ?>
                            <? echo CategoryTree($tree_categories['all'], $this->pages->get_full_link_module('catalog'), $category['id'],0,$path);?>
                            <script>
                                $(".cat-main div.drop").click(function() {
                                    if($(this).parent().hasClass("opened")){
                                        $(this).find(".opened").removeClass("opened");
                                        $(this).parent().removeClass("opened");
                                    }else{
                                        $(this).parent().addClass("opened");
                                    }
                                });
                            </script>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    <?
    }
    ?>
    Открыть файл стилей текущей темы
    /templates/themes/имя текущей темы/css/style.css

    и вставить в конец

    HTML:
    /*cat-main*/
    .cat-main .sub {width: 100%; max-height:0px;overflow: hidden;-webkit-transition: all 0.1s cubic-bezier(1, 0, 1, 0);-moz-transition: all 0.1s cubic-bezier(1, 0, 1, 0);-ms-transition: all 0.1s cubic-bezier(1, 0, 1, 0);-o-transition: all 0.1s cubic-bezier(1, 0, 1, 0);transition: all 0.1s cubic-bezier(1, 0, 1, 0);}
    .cat-main .opened > .sub {display: block;max-height:5000px;}
    .cat-main li {position: relative;}
    .cat-main div.drop {background-image: url('../img/accordion-plus.png');background-repeat: no-repeat;background-position: center center;background-color: #5e5e5e;position: absolute;left: -15px;top: 16px;width: 12px;height: 12px;border-radius: 100%;text-align: center;opacity: 1;cursor: pointer;}
    .cat-main .opened > div.drop {background-image: url('../img/accordion-minus.png');}
    Сохранить изменения
     
    Последнее редактирование: 4 дек 2015
  2. Работает, отлично! Спасибо
     
  3. Administrator

    Administrator Administrator Команда форума

    Пожалуйста.
     

Поделиться этой страницей