Выпадающий список подкатегорий

[askor]

Озадачился следующим вопросом, как реализовать разворачивание списка подкатегорий при клике по родительской категории. Примерно как на скриншоте:

 

[Mr.Mrak]

Посмотрите вот эту тему

 

[feint]

Посмотрите вот эту тему

Не очень понравилось решение, нашел в коментах ссылку на другой вариант, тут его и выложу:

В main.php после <meta.... вставляем:

<script type="text/javascript">
    $(document).ready(function() {
        $('.subcategory').toggle();
        $('.expand').live('click',function(){
            $(this).parents('.category').find('.subcategory').toggle();
            if ($(this).attr("alt") == "Collapsed") {
                $(this).attr("alt", "Expanded").attr("src", "<?php echo osc_current_web_theme_url('images/down-arrow.png') ; ?>");
            }
            else
            {
                $(this).attr("alt", "Collapsed").attr("src", "<?php echo osc_current_web_theme_url('images/right-arrow.png') ; ?>");
            }
        });
    });
 
</script>

Там же ищем:

<div class="category">
                            <h1><strong><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span></strong></h1>
                            <?php if ( osc_count_subcategories() > 0 ) { ?>
                                <ul>
                                    <?php while ( osc_has_subcategories() ) { ?>
                                        <li><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span></li>
                                    <?php } ?>
                                </ul>
                            <?php } ?>
                        </div>

Меняем на:

<div class="category">
                        <img class="expand" src="<?php echo osc_current_web_theme_url('images/right-arrow.png') ; ?>" alt="Collapsed" class="expand" />
                        <h1><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a>
                            <span>(<?php echo osc_category_total_items() ; ?>)</span>
                        </h1>
                        <?php if ( osc_count_subcategories() > 0 ) { ?>
                        <ul class="subcategory">
                            <?php while ( osc_has_subcategories() ) { ?>
                            <li><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span></li>
                            <?php } ?>
                        </ul>
                        <?php } ?>
                    </div>

Изображения right-arrow.png и down-arrow.png можно подставить свои.

Спасибо tempolong за это решение.

 

[Mr.Mrak]

Не знаю что Вам понравилось, я просто варианты предложил.

 

[feint]

Да я как бы тоже просто предложил, понравившийся мне вариант.))

 

[profigrup]

при переходе на другую страницу, в верхнем левом углу начали появляться буквы с числами (на каждой странице разние). до установки вышеуказанного кода, этого не было. Хэлп!

 

[profigrup]

В шапке темы указаны картинки для категорий, а не две иконки по умолчания right-arrow.png и down-arrow.png. Как для каждой категории оставить свое изображение?

 

[feint]

В шапке темы указаны картинки для категорий, а не две иконки по умолчания right-arrow.png и down-arrow.png. Как для каждой категории оставить свое изображение?

Найти нужные вам картинки, подписать их как right-arrow.png и down-arrow.png, залить в директорию где эти изображения.

 

[Валентин]

Для темы bender это не работает. В main.php нету соответствующих кусков кода которые следовало бы заменить или отредактировать. Единственное что я нашел - это в header.php в самом низу

<?php osc_run_hook ( 'inside-main' ); ?>

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

 

[Валентин]

Решение найдено. Ищем functions.php, в нем находим

<ul class="r-list">
<li>
<h1><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span></h1>
<?php if ( osc_count_subcategories() > 0 ) { ?>
<ul>
<?php while ( osc_has_subcategories() ) { ?>
<li>
<?php if( osc_category_total_items() > 0 ) { ?><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span>
<?php } else { ?><span><?php echo osc_category_name() ; ?> (<?php echo osc_category_total_items() ; ?>)</span></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</li>
</ul>

Меняем на

<ul class="r-list">
<li>
<img class="expand" src="<?php echo osc_current_web_theme_url('images/right-arrow.png') ; ?>" alt="Collapsed" class="expand" />
<h1><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a>
<span>(<?php echo osc_category_total_items() ; ?>)</span>
</h1>
<?php if ( osc_count_subcategories() > 0 ) { ?>
<ul class="subcategory">
<?php while ( osc_has_subcategories() ) { ?>
<li><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span></li>
<?php } ?>
</ul>
<?php } ?>
</li>
</ul>

Далее после

................function bender_draw_categories_list(){ ?>

вставляем скрипт

<script type="text/javascript">
	$(document).ready(function() {
		$('.subcategory').toggle();
		$('.expand').live('click',function(){
			$(this).parents('.r-list').find('.subcategory').toggle();
			if ($(this).attr("alt") == "Collapsed") {
				$(this).attr("alt", "Expanded").attr("src", "<?php echo osc_current_web_theme_url('images/down-arrow.png') ; ?>");
			}
			else
			{
				$(this).attr("alt", "Collapsed").attr("src", "<?php echo osc_current_web_theme_url('images/right-arrow.png') ; ?>");
			}
		});
	});
 
</script>

Готово!

 

[Валентин]

В шапке темы указаны картинки для категорий, а не две иконки по умолчания right-arrow.png и down-arrow.png. Как для каждой категории оставить свое изображение?

Нужно немного переделать код, а именно

<img class="expand" src="<?php echo osc_current_web_theme_url('images/right-arrow.png') ; ?>" alt="Collapsed" class="expand" />

заменить на

<img class="expand" src="<?php echo osc_current_web_theme_url('images/') . osc_category_id() .'.png' ?>" alt="Collapsed" class="expand" />

убрать функции if//else из скрипта, и оставить только

<script type="text/javascript">
	$(document).ready(function() {
		$('.subcategory').toggle();
		$('.expand').live('click',function(){
			$(this).parents('.r-list').find('.subcategory').toggle();
				   });
	});
 
</script>

И вуаля! Готово. Теперь в базе берем id категории, и в папку с изображениями заливаем "id_категории".png для каждой категории

 

[UsPlaton]

Сделал все как описано. Картинки добавились, а вот выпадающего меню нет. Тема Bender OC 3.4.1

 

[Кок]

А как вообще организован вывод категорий? я так понял на 1 скриншоте тема russia.

 

[administrator]

Выкладывайте код, так о чем можно вообще говорить!

 

[administrator]

А как вообще организован вывод категорий? я так понял на 1 скриншоте тема russia.

Что вас интересует? Вывод происходит при помощи функции обернутой в html код.

 

[Кок]

Прошу прощения за неточность. Интересует как сделать так же в теме Russia. Т.е. что бы карта сворачивалась, и на ее месте отображались категории или просто ниже карты категории. Стандартный код темы Россия, я не представляю на данный момент как вообще это сделать, поэтому никаких наработок=( но думаю через пару дней что-то будет..

 

[administrator]

Все просто, в шаблоне скрываем необходимый текст:

<div style="display: none;">	  
<div class="ваш класс">
	   <!-- То что нужно скрыть -->
</div>
</div>

Далее задаете сами стили. Оформляете как угодно, но они должны быть внутри скрываемого текста и вызываем их при необходимости.

 

[Renaissance]

Интересует решение под Модерн...
Проблема при реализации выплыла такая. точнее не одна:
1. т.к. категории с лого, то ап/даун переписал на лого категории - сворачивает/разворачивает, но если развернуть и не трогать секунды 3 - перебрасывает во внутрь категории(upd. я то понимаю, что работает как и должно - ссылка..)
2. тестовый стоит на Хостингере, после использования скрипта появились ошибки - нет доступа к базе - это от оскласса, и от хоста -
Resource Limit Exceeded

The website is temporarily unable to service your request as it exceeded resource limit. Please try again later.

может кто поможет правильно копнуть, я больше дизайнер. чем кодер))) желательно реализация вывода категорий/подкатегорий как на олх.уа

 

[administrator]

Вы сами почитайте что тут написали =)
Черным по белому, почти по русски: "Превышен лимит запроса". Бесплатный хостинг, что вы от него хотели?

 

[Renaissance]

Читал))) без скрипта - работает четко - с ним, через каждое обновление