CSS для Левого сайдбара с категориями (features.tpl)

Правила раздела: faq.php?mode=okay
Модератор: Модераторы

legko
legko
Репутация: 5
Сообщения: 2
Зарегистрирован: 12.04.2017
С нами: 6 лет 11 месяцев

Сообщение #1 legko » 29.03.2017, 22:56

Не знаю как в полной версии, но OkayCMS Lite в левом сайдбаре список категорий формируется только из ссылок, причем если корневая категория не имеет вложенных категорий, то по оформлению она равна НЕ корневой категории без вложений. Такой результат сложно оформлять с помощью CSS.
Непонятно? Ща поясню из дефолтного шаблона
Корневая категория "С переводом", которая не имеет дочерних:

Код: Выделить всё

<div class="nav-item">
<a class="nav-link" href="ru/catalog/translated" data-category="6">С переводом</a>
</div>

Вложенная категория "Пятый уровень вложенности":

Код: Выделить всё

<div class="nav-item">
<a class="nav-link" href="ru/catalog/fifth-level-of-nesting" data-category="21">Пятый уровень вложенности</a>
</div>


Как видите разницы никакой

Для себя я нашел такой выход.
В файле features.tpl в начале заменяем текст

Код: Выделить всё

{* Левый сайдбар с фильтром, категориями и брендами *}
{* Вывод дерева категорий *}
{function name=catalog_tree}
   {if $categories}
      {* Первая итерация *}
      {if $level == 1}
         {* Заголовок блока *}
         <div class="h5 bg-info p-x-1 p-y-05">
            <span data-language="{$translate_id['features_categories']}">{$lang->features_categories}</span>
         </div>
         <div class="nav-catalog p-x-05 m-b-2 left_menu">
      {* Последующие итерации *}
      {else}
         <div id="cat_{$parent_id}" class="collapse{if $collapse_trigger == true} in{/if}">
      {/if}
      {foreach $categories as $c}
         {if $c->visible}
            {* Если есть подкатегории *}
            {if $c->subcategories && $c->has_children_visible}
               <div class="nav-item left_menu prod_category">
                  {* Кнопка раскрывающая категорию *}
                  <button class="btn-catalog-collapse {if $category->id != $c->id} collapsed{/if}" type="button" data-toggle="collapse" data-target="#cat_{$c->id}" aria-expanded="{if $category->id != $c->id}true{else}false{/if}" aria-controls="cat_{$c->id}"></button>

                  {* Название категории *}
                  <a class="nav-link{if $category->id == $c->id} link-red fn-collapsed{/if}" href="{$lang_link}catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape}</a>

                  {* Если подкатегорий больше одной, для деления блока на 2 колонки *}
                  {if $category->id == $c->id}
                     {assign var='collapse' value=true}
                  {else}
                     {assign var='collapse' value=false}
                  {/if}
                  {if $c->subcategories|count > 1}
                     {catalog_tree categories=$c->subcategories level=$level + 1 parent_id=$c->id two_col=true collapse_trigger=$collapse}
                  {else}
                     {catalog_tree categories=$c->subcategories level=$level + 1 parent_id=$c->id collapse_trigger=$collapse}
                  {/if}
               </div>
            {* Если категория без подкатегорий *}
            {else}
               {* Название категории *}
               <div class="nav-item ">
                  <a class="nav-link{if $category->id == $c->id} link-red fn-collapsed{/if}" href="{$lang_link}catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape}</a>
               </div>
            {/if}
         {/if}
      {/foreach}
      {* Первая итерация *}
      {if $level == 1}
         </div>
      {* Последующие итерации *}
      {else}
         </div>
      {/if}
   {/if}
{/function}
{catalog_tree categories=$categories level=1}


на

Код: Выделить всё

{* Левый сайдбар с фильтром, категориями и брендами *}
{* Вывод дерева категорий *}
{function name=catalog_tree}
   {if $categories}
      {* Первая итерация *}
      {if $level == 1}
         <div class="">
            <div class="h5 bg-info p-x-1 p-y-05">
               <span data-language="{$translate_id['features_categories']}">{$lang->features_categories}</span>
            </div>
<div class="nav-catalog p-x-05 m-b-2 left_menu">
               
      {* Последующие итерации *}
      {else}
<div id="cat_{$parent_id}" class="collapse{if $collapse_trigger == true} in{/if}">
         


      {/if}
            {foreach $categories as $c}
                {if $c->visible}
                    {if $c->subcategories && $level >= 1}
                        <div class="nav-item level_{$level}">
<button class="btn-catalog-collapse {if $category->id != $c->id} collapsed{/if}" type="button" data-toggle="collapse" data-target="#cat_{$c->id}" aria-expanded="{if $category->id != $c->id}true{else}false{/if}" aria-controls="cat_{$c->id}"></button>
                        <!-- button class="btn-category-collapse collapsed" type="button" data-toggle="collapse" data-target="#{$c->id}" aria-expanded="false" aria-controls="{$c->id}"></button -->
                            <a class="nav-link{if $category->id == $c->id} link-red fn-collapsed{/if}" href="{$lang_link}catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape}</a>
                            {if $c->subcategories|count > 1}
                                {catalog_tree categories=$c->subcategories level=$level + 1 parent_id=$c->id two_col=true}
                            {else}
                                {catalog_tree categories=$c->subcategories level=$level + 1 parent_id=$c->id}
                            {/if}
                        </div>
                    {else}
                        <div class="nav-item level_{$level}">
                            <a class="nav-link{if $category->id == $c->id} link-red fn-collapsed{/if}" href="{$lang_link}catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape}</a>
                        </div>
                    {/if}
                {/if}
            {/foreach}
      {* Первая итерация *}
      {if $level == 1}
               </div>
         </div>
      {* Последующие итерации *}
      {else}
         </div>
      {/if}

   {/if}
{/function}
{catalog_tree categories=$categories level=1}


в результате для тега <div> получаем дополнительный класс (level_) равный уровню вложенности категории:

Корневая категория "С переводом", которая не имеет дочерних теперь выглядит так:

Код: Выделить всё

<div class="nav-item level_1">
<a class="nav-link" href="ru/catalog/translated" data-category="6">С переводом</a>
</div>

Вложенная категория "Пятый уровень вложенности" так:

Код: Выделить всё

<div class="nav-item level_5">
<a class="nav-link" href="ru/catalog/fifth-level-of-nesting" data-category="21">Пятый уровень вложенности</a>
</div>


Теперь можно с CSS орудовать.


Пользуйтесь на здоровье

Название раздела: Полезные решения для OkayCMS
Правила раздела: faq.php?mode=okay

Быстрый ответ


Введите код в точности так, как вы его видите. Регистр символов не имеет значения.
Код подтверждения

   

Вернуться в «Полезные решения для OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 17 гостей