Тема: Добавить свой класс каждому пункту меню категорий

Приветствую. Поделюсь способом как добавить каждому пункту меню категорий свой класс (class).
Нужно это для того, чтобы средствами CSS оформлять каждый пункт по разному и подставлять изображения для категорий не в виде файла jpg или png, а в виде иконки FontAwesome или SVG.

Первое, что нужно сделать, это открыть файл: Ваша_тема/moduleview/catalog/blocks/category/category.tpl
Второе - найти строку:

    <li class="item_{$dir@iteration}{if !empty($dir.child)} node{/if}" {$dir.fields->getDebugAttributes()}><a href="{$dir.fields->getUrl()}">{$dir.fields.name}</a>

Третье - добавить после node{/if}

dir{$dir.fields.id}

Должно быть примерно так:

    <li class="item_{$dir@iteration}{if !empty($dir.child)} node{/if} dir{$dir.fields.id}" {$dir.fields->getDebugAttributes()}><a href="{$dir.fields->getUrl()}">{$dir.fields.name}</a>

Сохранить и обновить кэш.
После этого к каждому пункту меню добавится класс - dir(id категории), например dir20, которому уже можно задавать свои стили в вашем файле CSS.

<li class="item_1 dir20">Моя категория</li>

Аналогично для подкатегорий:
находим строку:

<li><a href="{$subdir.fields->getUrl()}">{$subdir.fields.name}</a>

и добавляем к элементу li

<li class="subdir{$subdir.fields.id}">

и так далее в зависимости сколько у вас уровней подкатегорий в меню.


Способ конечно не идеальный, но на мой взгляд самый простой.
Делал так на нескольких сайтах, включая Bitrix... БИТРИКС.. Карл..

Тестировалось на теме "young" (Детская). Работает.

Повысить оценку +3 Понизить оценку

Re: Добавить свой класс каждому пункту меню категорий

Спасибо за подсказку

Re: Добавить свой класс каждому пункту меню категорий

Выкладываю пример наипростейшего модуля,  который добавляет поле CSS класс для пунктов меню: https://yadi.sk/d/9lRQ7IQ-sZgQv
Подсмотрел у Joomla, там к каждому пункту меню можно добавлять классы.
Потом просто его можно вывести шаблоне меню как {$item.cssclass}:

{foreach from=$menu_level item=item}
<li class="{if !empty($item.child)}dropdown{/if}{if $item.fields.typelink=='separator'} separator{/if}
{if $item.fields->isAct()} active{/if} {$item.cssclass}" {if $item.fields.typelink != 'separator'}{$item.fields->getDebugAttributes()}{/if}>
    {if $item.fields.typelink!='separator'}
        <a href="{$item.fields->getHref()}" {if !empty($item.child)}dropdown-toggle{/if} {$item.cssclass}" {if $item.fields.target_blank}target="_blank"{/if}>{$item.fields.title}</a>
    {else}
     <li class="divider"></li>
    {/if}
    {if !empty($item.child)}
    <ul class="dropdown-menu {$item.cssclass}_dropdown">
        {include file="blocks/menu/top_branch.tpl" menu_level=$item.child}
    </ul>
    {/if}
</li>
{/foreach}

Пример для меню темы на базе bootstrap 3. Получилось подружить с конструктором достаточно интересную тему http://theme.stepofweb.com/Smarty/v1.1. … start.html

Re: Добавить свой класс каждому пункту меню категорий

Выкладывайте тему в маркет smile

5

Re: Добавить свой класс каждому пункту меню категорий

Ярослав пишет:

Выкладываю пример наипростейшего модуля,  который добавляет поле CSS класс для пунктов меню: https://yadi.sk/d/9lRQ7IQ-sZgQv
Подсмотрел у Joomla, там к каждому пункту меню можно добавлять классы.
Потом просто его можно вывести шаблоне меню как {$item.cssclass}:

{foreach from=$menu_level item=item}
<li class="{if !empty($item.child)}dropdown{/if}{if $item.fields.typelink=='separator'} separator{/if}
{if $item.fields->isAct()} active{/if} {$item.cssclass}" {if $item.fields.typelink != 'separator'}{$item.fields->getDebugAttributes()}{/if}>
    {if $item.fields.typelink!='separator'}
        <a href="{$item.fields->getHref()}" {if !empty($item.child)}dropdown-toggle{/if} {$item.cssclass}" {if $item.fields.target_blank}target="_blank"{/if}>{$item.fields.title}</a>
    {else}
     <li class="divider"></li>
    {/if}
    {if !empty($item.child)}
    <ul class="dropdown-menu {$item.cssclass}_dropdown">
        {include file="blocks/menu/top_branch.tpl" menu_level=$item.child}
    </ul>
    {/if}
</li>
{/foreach}

Пример для меню темы на базе bootstrap 3. Получилось подружить с конструктором достаточно интересную тему http://theme.stepofweb.com/Smarty/v1.1. … start.html

Ярослав, можете подсказать как пользоваться вашим модулем?
В редискрипт модуль добавил, как вывести в шаблоне понятно, а как назначить стиль пунктам меню?

6 Отредактировано Ярослав (20.06.2016 22:39:00)

Re: Добавить свой класс каждому пункту меню категорий

Сергей, в редакторе пункта меню появляется дополнительное поле "Класс CSS".
http://joxi.ru/xAe14BbFYyBkvA
Александр, там необъятное поле работы. Боюсь, времени хватит только на правки для клиентов.
Сначала просто сайт-каталог на нем запустим, потом уже полноценный магазин на мегамаркете. И можно выкладывать.

7

Re: Добавить свой класс каждому пункту меню категорий

Ярослав пишет:

Сергей, в редакторе пункта меню появляется дополнительное поле "Класс CSS".
http://joxi.ru/xAe14BbFYyBkvA

ААА, я почему-то подумал, что "пункт меню" - это категория товаров smile
А можно как-то такую же штуку добавить к категориям товаров?

Re: Добавить свой класс каждому пункту меню категорий

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

9

Re: Добавить свой класс каждому пункту меню категорий

Ярослав пишет:

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

Отличная идея! ;-)

10

Re: Добавить свой класс каждому пункту меню категорий

Добавил поле CSS для категорий:
https://yadi.sk/d/iPyJJl4fsuYeU
Обратите внимание, название модуля поменял с evaddons на evcss, так как ранее название пересекалось с другим моим модулем. Поэтому старый модуль надо удалить.

11 Отредактировано Закусило Александр (30.06.2016 18:14:04)

Re: Добавить свой класс каждому пункту меню категорий

Ярослав пишет:

Добавил поле CSS для категорий:
https://yadi.sk/d/iPyJJl4fsuYeU
Обратите внимание, название модуля поменял с evaddons на evcss, так как ранее название пересекалось с другим моим модулем. Поэтому старый модуль надо удалить.

Файл uninstall в конфиге Вам не нужен. Если класс пустой, его можно не использовать. Выкладывайте в Маркет smile

Re: Добавить свой класс каждому пункту меню категорий

Управление->Настройки системы->Справа Обновить структуру БД.

13

Re: Добавить свой класс каждому пункту меню категорий

Подскажите, а для чего это модуль на практике?

Менять размер/цвет меню каталога товаров? Это согласен, может пригодиться, напр., один из пунктов со спец. предожениями выделить другим цветом. Тоже думал, как это можно сделать.

А в плане статей, как это можно применить (ведь, картинка по ссылке открывает статью)?

http://joxi.ru/xAe14BbFYyBkvA

Автор написал, что можно из font-awesome иконки вставлять или свои .svg-файлы в меню категорий, а почему тогда в картинке статья? Я чего-то не допонял...

---
И, если у автора будет время и желание на доработку, то, имхо, было бы проще (для пользователей), не сам класс задавать, а вместо поля с классом сделать поле, куда саму картинку уже можно загрузить, а классы автоматически прописывать. А картинки предлагать брать из того же самого awesome-font или с жесткого диска пользователя. Но, понятно, что это время потребует на доработку, так что это больше мысли вслух...

А вообще, конечно, круто. Самому бы научиться такие небольшие модули писать.....

Повысить оценку Понизить оценку

14

Re: Добавить свой класс каждому пункту меню категорий

Сам же пункт меню выводится в шаблоне, вот к нему и добавляется класс.

15 Отредактировано Андрей (18.02.2018 21:54:27)

Re: Добавить свой класс каждому пункту меню категорий

Здравствуйте! Покажите пожалуйста на примере, пошагово как можно изменять CSS
Например задача: Изменить в пункте меню размер шрифта, шаблон современная

Повысить оценку +1 Понизить оценку