Как раскрыть категории второго уровня

k2825435 · 14 червня 2013

У меня проблема, поиском всё перелапатил не нашел, ни модуля ни решения:

Мне надо показывать второй уровень категорий всегда открытый, а третий и четвертый (да у меня и такие есть) только при нахождении в них.

Подскажите пожалуйста, очень надо! Буду признателен за любую наводку.

Спасибо!

lakbor · 15 червня 2013

Насколько я понял, эта фишка нужна для модуля "категории"?

Если да, то:

/catalog/view/theme/ТЕМА_МАГАЗИНА/template/module/category.tpl

в начало файла, перед первым дивом вставляем нечто подобное:

<style type="text/css">
	a.active.nonactive {
		color: #0E0e0e;
	}		
</style>

Затем в файле ищем строки

<?php } else { ?>
          <a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>

и добавляем к ссылке class="active nonactive"

<?php } else { ?>
          <a href="<?php echo $category['href']; ?>" class="active nonactive"><?php echo $category['name']; ?></a>
          <?php } ?>

Это для родительских категорий, далее субкатегории 1го порядка (чуть ниже), делаем то же самое:

<?php } else { ?>
              <a href="<?php echo $child['href']; ?>" class="active nonactive"> - <?php echo $child['name']; ?></a>
              <?php } ?>

Второй и третий уровень субкатегорий:

Для этого сначала нужно добавить их отображение в меню (в коде контроллера), затем немного видоизменить ксс'ку, которую в начале шаблона добавляли.

Если к вечеру еще будет актуально, я отпишусь как это сделать

k2825435 · 15 червня 2013

Очень актуально!

http://mebli-vo.com/ я сделал так как ты написал вышло вот так. Почти то что хотел только третий уровень открыт всегда, а очень надо только при активности.

Сам увидишь мою структуру поймешь, что другого варианта просто нет ))

Спасибо большое за то что аукнулся! Помоги пожалуйста далее.

k2825435 · 15 червня 2013

Кстати мой код выглядел так:

<div class="box">
  <div class="box-heading"><?php echo $heading_title; ?></div>
  <div class="box-content">
    <div class="box-category">
      <ul>
        <?php foreach ($categories as $category) { ?>
        <li>
          <a href="<?php echo $category['href']; ?>"<?php if ($category['category_id'] == $category_id) { ?> class="active"<?php } ?>><?php echo $category['name']; ?></a>
            <?php if ($category['children']) { ?>
            <ul>
              <?php foreach ($category['children'] as $child) { ?>
              <li>
                <a href="<?php echo $child['href']; ?>"<?php if ($child['category_id'] == $child_id) { ?> class="active"><?php } ?>> - <?php echo $child['name']; ?></a>
                    <?php if($child['sister_id']){ ?>
                      <ul>
                      <?php foreach($child['sister_id'] as $sisters) { ?>
                        <li>   
                        <a href="<?php echo $sisters['href']; ?>"<?php if ($sisters['category_id'] == $sisters_id) { ?> class="active"<?php } ?>>> - <?php echo $sisters['name']; ?></a>
                        </li>
                      <?php } ?>
                      </ul>
                   <?php } ?>              
              </li>
              <?php } ?>
            </ul>
          <?php } ?>
        </li>
        <?php } ?>
      </ul>
    </div>
  </div>
</div>

а теперь выглядит так

<style type="text/css">
	a.active.nonactive {
		color: #0E0e0e;
	}		
</style>
<div class="box">
  <div class="box-heading"><?php echo $heading_title; ?></div>
  <div class="box-content">
    <div class="box-category">
      <ul>
        <?php foreach ($categories as $category) { ?>
        <li>
          <a href="<?php echo $category['href']; ?>" class="active nonactive"><?php echo $category['name']; ?></a>
            <?php if ($category['children']) { ?>
            <ul>
              <?php foreach ($category['children'] as $child) { ?>
              <li>
                <a href="<?php echo $child['href']; ?>" class="active nonactive"> - <?php echo $child['name']; ?></a>
                    <?php if($child['sister_id']){ ?>
                      <ul>
                      <?php foreach($child['sister_id'] as $sisters) { ?>
                        <li>   
                        <a href="<?php echo $sisters['href']; ?>"<?php if ($sisters['category_id'] == $sisters_id) { ?> class="active"<?php } ?>>> - <?php echo $sisters['name']; ?></a>
                        </li>
                      <?php } ?>
                      </ul>
                   <?php } ?>              
              </li>
              <?php } ?>
            </ul>
          <?php } ?>
        </li>
        <?php } ?>
      </ul>
    </div>
  </div>
</div>

lakbor · 15 червня 2013

Попробуй сделать файл (category.tpl)с таким текстом (тот что у тебя сейчас - забэкапь обязательно!!):

<style type="text/css">

	a.active.nonactive {
		color: #0E0E0E;	
	}
		
</style>

<div class="box">
  <div class="box-heading"><?php echo $heading_title; ?></div>
  <div class="box-content">
    <div class="box-category">
      <ul>
        <?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']; ?>" class="active nonactive"><?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 if($child['sister_id']){ ?>
        <ul>
          <?php foreach($child['sister_id'] as $sisters) { ?>
            <li>   
<a href="<?php echo $sisters['href']; ?>"
<?php if ($sisters['category_id'] == $sisters_id) { echo 'class="active"'; } else { echo 'class="active nonactive"'; } ?>
>> - <?php echo $sisters['name']; ?>
</a>
            </li>
      <?php } ?>
   </ul>
<?php } ?>
<!-- ======================================================================================-->
				
     <?php } else { ?>
         <a href="<?php echo $child['href']; ?>" class="active nonactive"> - <?php echo $child['name']; ?></a>
			  
              <?php } ?>
            </li>
            <?php } ?>
          </ul>
          <?php } ?>
        </li>
        <?php } ?>
      </ul>
    </div>
  </div>
</div>

Как-то так должно заработать. Но с этим макс. вложенность 3 уровня. для четвертого надо будет новых "сестричек" дописывать.

k2825435 · 16 червня 2013

Спасибо большое! А можешь еще подсказать как сделать чтоб все категории не были жирным шрифтом?

lakbor · 16 червня 2013

Дописываешь строку в шаблон, который я в предыдущем посте писал, чтобы получилось так:

<style type="text/css">

	a.active.nonactive {
		font-weight: normal;
		color: #0E0e0e;
	}
	
    .box-category > ul > li > a                    { font-weight: normal; }
    .box-category > ul > li a.active               { font-weight: normal; }
    .box-category > ul > li a.active + ul          { font-weight: normal; }
    .box-category > ul > li ul > li > a            { font-weight: normal; }
    .box-category > ul > li ul > li > a.active     { font-weight: normal; }

</style>

Этим действием мы устанавливаем активные и неактивные ссылки (класс active nonactive) в меню обычным шрифтом.

Если нужно выделить жирным категории 1го уровня, то просто поиграйся с font-weight'ом - у него 2 основных значения: bold и normal. Если что пиши, скину пример...

Змінено 16 червня 2013 користувачем lakbor

k2825435 · 17 червня 2013

Дописываешь строку в шаблон, который я в предыдущем посте писал, чтобы получилось так:
<style type="text/css">

	a.active.nonactive {
		font-weight: normal;
		color: #0E0e0e;
	}
	
    .box-category > ul > li > a                    { font-weight: normal; }
    .box-category > ul > li a.active               { font-weight: normal; }
    .box-category > ul > li a.active + ul          { font-weight: normal; }
    .box-category > ul > li ul > li > a            { font-weight: normal; }
    .box-category > ul > li ul > li > a.active     { font-weight: normal; }

</style>
Этим действием мы устанавливаем активные и неактивные ссылки (класс active nonactive) в меню обычным шрифтом.

Если нужно выделить жирным категории 1го уровня, то просто поиграйся с font-weight'ом - у него 2 основных значения: bold и normal. Если что пиши, скину пример...

Большое тебе, человеческое, Спасибо!!!

Всё работает, и работает хорошо!

Единственное что я не понял как сделать активный пункт жирным шрифтом.

Остальное же очень классно получилось!

lakbor · 17 червня 2013

Большое пожалуйста)

Заглянул на сайт - и правда гораздо лучше стало!

Насчет активного пункта - попробуй поиграться с

.box-category > ul > li a.active              { font-weight: normal; }
.box-category > ul > li a.active + ul          { font-weight: normal; }

вместо normal поставь bold, если не выйдет, то в

.box-category > ul > li ul > li > a.active     { font-weight: normal; }

Но послкдняя строка оч капризная почему-то...

k2825435 · 18 червня 2013

Большое пожалуйста)

Заглянул на сайт - и правда гораздо лучше стало!

Насчет активного пункта - попробуй поиграться с
.box-category > ul > li a.active              { font-weight: normal; }
.box-category > ul > li a.active + ul          { font-weight: normal; }
вместо normal поставь bold, если не выйдет, то в
.box-category > ul > li ul > li > a.active     { font-weight: normal; }
Но послкдняя строка оч капризная почему-то...

Не помогло, но это уже не критично!

В любом случае огромное спасибо!

Реально выручил!

Я весь инет перерыл искал как такое сделать!

tereshinmikhail · 18 вересня 2014

Дописываешь строку в шаблон, который я в предыдущем посте писал, чтобы получилось так:

<style type="text/css">

	a.active.nonactive {
		font-weight: normal;
		color: #0E0e0e;
	}
	
    .box-category > ul > li > a                    { font-weight: normal; }
    .box-category > ul > li a.active               { font-weight: normal; }
    .box-category > ul > li a.active + ul          { font-weight: normal; }
    .box-category > ul > li ul > li > a            { font-weight: normal; }
    .box-category > ul > li ul > li > a.active     { font-weight: normal; }

</style>

Добрый день! Если вдруг увидите это сообщение)

А есть вариант открыть только некоторые из родительских категорий? Например первый 5 должны быть открыты по умолчанию, а остальные открываются только при выборе.

Вхід

Как раскрыть категории второго уровня

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information