Помощь Как развернуть подкатегорию

Тема в разделе "Opencart", создана пользователем Anatoli777, 3 мар 2015.

Информация :
Внимание форумчане! При создании тем, или выкладывании какой-либо информации проверьте в какой ветке форума вы находитесь! Не путайте Opencart и Opencart2. При несоблюдении данного условия выносится соответствующее наказание! И потом не говорите что вас НЕ ПРЕДУПРЕЖДАЛИ! По возможности используйте обменники mail, yandex, google, dropbox, rghost Дабы избежать просьб перезалить и проблем с рекламой!
Модераторы: ZiX
  1. Anatoli777

    Anatoli777 Постоялец

    Регистр.:
    19 мар 2013
    Сообщения:
    124
    Симпатии:
    26
    При нажатии на категорию 'Чехлы' (левая колонка, магазин http://megamir.by/) разворачивается список подкатегорий. А как сделать, чтобы при нажатии на подкатегорию (например, 'чехлы SAMSUNG'), развернулась эта подкатегория? А при нажатии на другую категорию или подкатегорию, предыдущая (в нашем примере 'чехлы SAMSUNG') свернулась?
    Движок ocStore v. 1.5.5.1.1, планирую обновить до v. 1.5.5.1.2.
    Может быть стоит установить какой-то модуль?
     
  2. drozd22

    drozd22

    Регистр.:
    17 июн 2011
    Сообщения:
    317
    Симпатии:
    172
    В этой ситуации похоже стоит вообще заменить верстку и обработку модуля category. Взять один из премиум шабов (без модификации контроллера модуля category), например шаблон "R.Gen" , и взять из него нормальную реализацию. Немного поморочите голову, но получите более удобную для посетителя навигацию.
     
  3. Anatoli777

    Anatoli777 Постоялец

    Регистр.:
    19 мар 2013
    Сообщения:
    124
    Симпатии:
    26
    Русские шаблоны брать не советуете? Или что-то посоветуете?
     
  4. drozd22

    drozd22

    Регистр.:
    17 июн 2011
    Сообщения:
    317
    Симпатии:
    172
    Прямого совета какой шаб взять не решусь давать, т.к. идеального решения не встретил. Но могу описать как сам выбираю.
    Для своих проектов шаб подбираю как заготовку с уже реализованной адаптивностью, понятной структурой верстки с первого взгляда и уже неплохо проработанными элементами навигации. Но главное условие - шаб не должен переписывать контроллеры дефолтного OpenCart. Ставлю шаб на чистый OpenCart и даже доп. модули самого шаба могу не устанавливать. Устанавливаю необходимые для конкретного проекта модули (могу при необходимости взять и из других шабов).
    В результате (по значимости для меня) - адаптивная верстка, точно знаю структуру, легче в дальнейшем дорабатывать проект.
    А русский шаб или не русский - не важно (локализация занимает минуты), главное для меня качество реализованной адаптивной верстки.
     
    Последнее редактирование: 4 мар 2015
  5. Anatoli777

    Anatoli777 Постоялец

    Регистр.:
    19 мар 2013
    Сообщения:
    124
    Симпатии:
    26
    Ясно. В общем вы считаете "R.Gen" одним из лучших шаблонов, по крайней мере, с точки зрения адаптивной верстки.
     
  6. drozd22

    drozd22

    Регистр.:
    17 июн 2011
    Сообщения:
    317
    Симпатии:
    172
    У R.Gen есть недостатки и ограничения, начиная с того, что он только на две колонки. У него прозрачная структура, но подойдет далеко не для всех проектов.
    А по модулю category в ближайшее время посмотрю и опишу как вырезать и привязать к рабочему шопу.
     
  7. Anatoli777

    Anatoli777 Постоялец

    Регистр.:
    19 мар 2013
    Сообщения:
    124
    Симпатии:
    26
    Хорошо, буду ждать.
     
  8. drozd22

    drozd22

    Регистр.:
    17 июн 2011
    Сообщения:
    317
    Симпатии:
    172
    Попробуем перенести верстку модуля category из шаба R.Gen (вариант черно-серо-белой темы 4) на дефолтный шаб OpenCart 1.5.6.4.
    Осмотр пациента показывает, что сперва подключим шрифт (для значков + и - в кружочках). Копируем все файлы шрифта rgen-webfont.* из /image/rgen/icons/ в свою /image/icons/ и вставляем в самое начало нашего stylesheet.css следующее:
    Код:
    @font-face {
        font-family: 'rgenregular';
        src: url('../image/icons/rgen-webfont.eot');
        src: url('../image/icons/rgen-webfont.eot?#iefix') format('embedded-opentype'),
             url('../image/icons/rgen-webfont.woff') format('woff'),
             url('../image/icons/rgen-webfont.ttf') format('truetype'),
             url('../image/icons/rgen-webfont.svg#rgenregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    Там в стиле есть фон для открытых подкатегорий, находим в исходной теме Bullet.png и копируем в свою /image/.

    Теперь берем их обработчик (он хорошо выделен в исходнике) и вставляем в свой /catalog/view/javascript/common.js после $(document).ready(function() { , т.е. во вторую строку следующее:
    Код:
        /* CATEGORIES */
        $(".box-category .cc").each(function(index, element) {
            //alert($(".box-category .cc").parent().hasClass('cat-active'));
            if($(this).parent().hasClass('cat-active') == true){
                $(this).addClass('open');
                $(this).next().addClass('active');
            }
        });
        $(".box-category .cc").click(function(){
            if($(this).next().is(':visible') == false) {
                $('.box-category .col-subcat').slideUp(300, function(){
                    $(this).removeClass('active');
                    $('.cc').removeClass('open');
                });
            }
            if($(this).hasClass('open') == true) {
                $(this).next().slideUp(300, function(){
                    $(this).removeClass('active');
                    $(this).prev().removeClass('open');
                });
            }else{
                $(this).next().slideDown(300, function(){
                    $(this).addClass('active');
                    $(this).prev().addClass('open');
                });
            }
        });
    Берем новый кусок стилей, изменив путь к Bullet.png и поменяв цвет шрифта с #944737 на #333 (это для темы 4). Т.е. в stylesheet.css перед строкой /* box category */ вставляем фрагмент:

    Код:
    /*=====================================================  CATEGORY LINK  ==========*/
    
    .col-links {
        margin-top:-14px;
        margin-bottom:40px;
        }
    .col-links ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }
    .col-links > ul > li {
        padding:7px 0px;
        border-bottom:1px solid #e0e0e0;
        }
    .col-links > ul > li > ul {
        background-color: rgba(0, 0, 0, 0.02);
        padding:10px 15px;
        margin:11px 0 -11px 0;
        display: none;
        border-top:1px solid #e0e0e0;
        }
    .col-links > ul > li > a {
        text-decoration: none;
        color: #333;
        font-weight:12px;
        }
    .col-links > ul > li.cat-active ul {
        display: block;
        }
    .col-links > ul > li ul > li {
        padding: 3px 0 3px 10px;
        margin-bottom:1px;
        background:url(../image/Bullet.png) no-repeat left 9px;
        }
    .col-links > ul > li ul > li > a {
        text-decoration: none;
        color: #333;
        }
    .col-links > ul > li > a:hover {
        text-decoration: underline;
        color: #333;
        }
    .col-links a {
        color: #333;
        font-weight:12px;
        }
    .col-links a:hover {
        color: #333;
        text-decoration:underline;
        }
    
    .box-category, ul.box-category ul{
        margin-top:-15px;
        }
    .box-category ul > li {
        padding:11px 0px 11px 0px;
        position:relative;
        }
    .box-category > ul > li > a {
        font-weight:bold;
        }
    .box-category .cc {
        /*border: 2px solid rgba(0, 0, 0, 0.1);*/
        position: absolute;
        right: 2px;
        top: 9px;
        width: 20px;
        height: 20px;
        border-radius: 20px;
        cursor:pointer;
    }
    .box-category .cc:before {
        font-family: 'rgenregular';
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        position: absolute;
        right: 1px;
        top: 2px;
        content: 'B';
        text-align: center;
        font-size: 16px;
        line-height: 1;
        color:rgba(0, 0, 0, 0.2);
        font-size:17px;
        /*background:#090;*/
    }
    .box-category .cc.open:before {
        content:'C';
    }
    Переходим к category.tpl, так как я использую дефолтную тему, то нахожу кусок кода:
    Код:
        <ul class="box-category">
          <?php foreach ($categories as $category) { ?>
          <li>
            <?php if ($category['category_id'] == $category_id) { ?>
            <a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
            <?php } else { ?>
            <a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
            <?php } ?>
            <?php if ($category['children']) { ?>
            <ul>
              <?php foreach ($category['children'] as $child) { ?>
              <li>
                <?php if ($child['category_id'] == $child_id) { ?>
                <a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
                <?php } else { ?>
                <a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
                <?php } ?>
              </li>
              <?php } ?>
            </ul>
            <?php } ?>
          </li>
          <?php } ?>
        </ul>
    и меняю на следующее (прямо взятое из R.Gen)

    Код:
            <div class="box-category col-links">
                <ul>
                    <?php foreach ($categories as $category) { ?>
                    <?php if ($category['category_id'] == $category_id) { ?>
                    <li class="cat-active">
                        <a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
                    <?php } else { ?>
                    <li>
                        <a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
                        <?php } ?>
                        <?php if ($category['children']) { ?>
                        <b class="cc"></b>
                        <ul class="col-subcat">
                            <?php foreach ($category['children'] as $child) { ?>
                            <li>
                                <?php if ($child['category_id'] == $child_id) { ?>
                                <a href="<?php echo $child['href']; ?>" class="active"><?php echo $child['name']; ?></a>
                                <?php } else { ?>
                                <a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a>
                                <?php } ?>
                            </li>
                            <?php } ?>
                        </ul>
                        <?php } ?>
                    </li>
                    <?php } ?>
                </ul>
            </div>
    По ходу мне не понравилась строчка
    Код:
    <b class="cc"></b>
    Заменил на
    Код:
    <div class="cc"></div>
    И всё, теперь модуль дефолтного шаба у меня выглядит и работает как в R.Gen.

    Для шаба старого шопа остается внимательно прописать по аналогии стили в category.tpl

    Дольше описывал, чем делал, т.к. все необходимое было под рукой. Этот модуль планирую вставить в один из своих работающих шопов, там по плану глубокая переделка на адаптивный диз.
    А по первичному вашему вопросу нужно смотреть с целью переделки это место:
    Код:
    <script>
    $(document).ready(function(){
       
           var div;
        $('.header-table').click(function(){
            div=$(this).parent();
            tt=$(this);
            if(!$(this).hasClass('active')){
                tt.addClass('active');
                div.find('.v_dsc').slideDown(function(){
                   
                });
            } else {
               
                div.find('.v_dsc').slideUp(function(){
                tt.removeClass('active');   
                });
            }
        });
    });
    </script>
    Оно прямо в теле html, очень вероятно, что сидит в category.tpl.
     
    Последнее редактирование модератором: 2 май 2015
    Anatoli777 нравится это.