Перейти к содержанию
Официальный форум поддержки Simpla

Как назначить собственную разметку и стили для субкатегорий


Рекомендуемые сообщения

По умолчанию в меню категорий каталога подкатегории наследуют разметку и стили категорий. Как назначить собственную разметку и стили для субкатегорий?

 

Код по умолчанию: 

<!-- Меню каталога -->
<div id="catalog_menu">
		
{* Рекурсивная функция вывода дерева категорий *}
{function name=categories_tree}
{if $categories}
<ul>
{foreach $categories as $c}
	{* Показываем только видимые категории *}
	{if $c->visible}
		<li>
			{if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name|escape}">{/if}
			<a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape}</a>
			
			<!-- Подкатегории (здесь должны быть собственная разметка и стили-->
			{categories_tree categories=$c->subcategories}
			<!-- Подкатегории (The End) -->
			
		</li>
	{/if}
{/foreach}
</ul>
{/if}
{/function}
{categories_tree categories=$categories}
</div>
<!-- Меню каталога (The End)-->	

 

Ссылка на сообщение
Поделиться на другие сайты

Если я правильно понял,то вот пример:

{function name=categories_tree}
{if $categories}						
{foreach $categories as $c}			
{if $level == 0}
{if $c->visible}												
{* Первый уровень *}
<li><a {if in_array($category->id, $c->children)}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape} <span>1 категория</span></a>
{if $c->subcategories}						
<ul>
{categories_tree categories=$c->subcategories level=$level+1}
</ul>
{/if}
</li>
{/if}			
{else}
{* Второй уровень *}
{if $c->visible}								
<li><a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a></li>
{/if}
{/if}	
{/foreach}			
{/if}
{/function}
<ul class="menu">{categories_tree categories=$categories level = 0}</ul>

Третий и последующие уровни вложенности можно сделать дальше по аналогии.

Ссылка на сообщение
Поделиться на другие сайты

для вашего примера:

#catalog_menu > ul
#catalog_menu > ul > li 
#catalog_menu > ul > li > ul и т.д.
 

еще один пример:
 

<!-- Меню каталога -->
<div id="catalog_menu">
		
{* Рекурсивная функция вывода дерева категорий *}
{function name=categories_tree}
{if $categories}
{foreach $categories as $c}
	{* Показываем только видимые категории *}
	{if $c->visible}
		<li>
			{if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name|escape}">{/if}
			<a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape}</a>
			
			<!-- Подкатегории (здесь должны быть собственная разметка и стили-->
			{if $c->subcategories}<ul class="subcat level{$level}">{categories_tree categories=$c->subcategories}</ul>{/if}
			<!-- Подкатегории (The End) -->
			
		</li>
	{/if}
{/foreach}
{/if}
{/function}
<ul class="categories_tree">{categories_tree categories=$categories}</ul>
</div>
<!-- Меню каталога (The End)-->	
.categories_tree {}
.categories_tree > li{}
.categories_tree > li:hover{}
.categories_tree > li > a{}
.categories_tree > li > a:hover{}
.categories_tree > li > ul.subcat{}
.categories_tree > li > ul.subcat > li{}
.categories_tree > li > ul.subcat > li:hover{}
.categories_tree > li > ul.subcat > li > a:hover{}
.categories_tree > li > ul.subcat.level0 {}
.categories_tree > li > ul.subcat.level1 {}
.categories_tree > li > ul.subcat.level2 {}

 

напишите в скайп ps-avatar

подгоню вывод категорий под вашу верстку

п.с. но научитесь пользоваться поиском....

Ссылка на сообщение
Поделиться на другие сайты

Всем спасибо за помощь :) Буду пробовать!

 

п.с. поиском пользовался но не нашел решение для шаблона, а вот css решение знал, но верстка на фреймворке, поэтому решил что лучше будет в шаблоне реализовать.

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...