Как в темах Clear, Nifty и Sidebar избавиться от "Все товары", а вывести родительские категории с dropdown. Есть решение

Добрый день. Встала задача избавиться от одного пункта меню "Все товары",а вместо него выводить родительские категории, в которых есть свои категории, чтобы их можно было раскрыть dropdown-ом.
Как это сделать?

9 ответов

  • 1
    Владимир Тупоршин-мл. Webasyst 27 октября 2013 05:45 # Решение
    Рассмотрим решение этой задачи на примере темы дизайна Clear. В Nifty и Sidebar решение аналогичное.

    Чтобы вынести корневые категории на уровень выше, необходимо избавиться от узла (ссылки) "Все товары" в иерархии вложенных меню ul li.

    В шаблоне дизайна navigation.html необходимо найти следующий блок кода:

    <ul class="menu-h dropdown">
    <!-- category tree -->
    <li class="collapsible">
    <a href="{$wa_app_url}">[`All products`]</a>
    {wa_print_tree tree=$categories selected=$selected_category unfolded=true collapsible_class='collapsible' class="menu-v category-tree" elem ='<a href=":url" title=":name">:name</a>'}
    </li>

    Дерево категорий выводится здесь с помощью хелпера wa_print_tree. В этом блоке необходимо удалить узел li со ссылкой [`All products`] и вынести хелпер отрисовки дерева wa_print_tree за пределы основного ul, заменив в хелпере class="menu-v category-tree" на class="menu-h dropdown category-tree". В результате код будет следующим (вы можете полностью заменить код, приведенный ниже, на следующий):

    <!-- category tree -->
    {wa_print_tree tree=$categories selected=$selected_category unfolded=true collapsible_class='collapsible' class="menu-h dropdown category-tree" elem ='<a href=":url" title=":name">:name</a>'}

    <ul class="menu-h dropdown">

    На скриншоте это выглядит так:
    Было: http://www.webasyst.ru/wa-data/public/site/img/help/hub/ss5-clear-navigation-all-products.png
    Стало: http://www.webasyst.ru/wa-data/public/site/img/help/hub/ss5-clear-navigation-root-categories.png

    В результате этого изменения корневые категории будет выводиться в основном меню, которое теперь будет состоять из двух элементов ul: сначала категории, затем — под ними — теги и другие элементы навигации.
    Если вы хотите разместить их в один ряд, в основном CSS-файле clear.css (для темы дизайна Clear; для тем Sidebar и Nifty sidebar.css и nifty.css соответственно) нужно найти строку

    ul.menu-h { margin: 0; padding: 0; }

    И заменить ее на такую:

    ul.menu-h { margin: 0; padding: 0; float: left; }
  • 4
    Игромаркет 27 ноября 2013 07:02 #
    Разобрался!!
    Делаем так:
    Ищем в файле navigation.html блок кода:

    <ul class="menu-h dropdown">
    <!-- category tree -->
    <li class="collapsible">
    <a href="{$wa_app_url}">[`All products`]</a>
    {wa_print_tree tree=$categories selected=$selected_category unfolded=true collapsible_class='collapsible' class="menu-v category-tree" elem ='<a href=":url" title=":name">:name</a>'}
    </li>

    Удаляем из него :
    <!-- category tree -->
    <li class="collapsible">
    <a href="{$wa_app_url}">[`All products`]</a>
    {wa_print_tree tree=$categories selected=$selected_category unfolded=true collapsible_class='collapsible' class="menu-v category-tree" elem ='<a href=":url" title=":name">:name</a>'}
    </li>

    Над строкой <ul class="menu-h dropdown"> в этом блоке (в том что от него осталось после удаления) вставляем :

    {wa_print_tree tree=$categories selected=$selected_category unfolded=true collapsible_class='collapsible' class="menu-h dropdown category-tree" elem ='<a href=":url" title=":name">:name</a>'}

    Сохраняем и радуемся.

    Единственное что не понял: категории расположены в основном меню в строчку. С выпадающими вниз и вправо подкатегориями. Как сделать чтобы категории расположилсь в колонку (в столбик) с выпаданием подкатегорий так же вправо? Танцы с CSS-файлом nifty.css с моим уровнем знаний не помогли ... Есть мнения?
    • 0
      В блоке {wa_print_tree ...
      class="menu-h dropdown category-tree"
      изменить на
      class="menu-v dropdown category-tree"
      т.е. сменить menu-h на menu-v (подробнее об этих классах: http://www.webasyst.ru/developers/docs/css/#menu-v )
  • 1
    Nick 26 октября 2013 11:48 #
    Так же интересует этот вопрос! Народ, подскажите плиз!
  • 1
    Вадим Юрьевич У 13 декабря 2014 06:03 #

    А для темы default это работает?

  • 1
    Vov4 17 февраля 2016 08:55 #

    в теме дизайна "Clear" получилось так сделать, но вот в теме дизайна "Sidebar 2.0" нет файла content.html и нет файла navigation.html, что делать?

  • 0
    Александр Руднев 24 января 2014 08:02 #
    Ну все облазил((( где этот файл находиться navigation.html?? Тема sidebar, открываю редактор витрина там его нет, в теме дефолт его нет((( Подскажите плиз.
  • 0
    16 февраля 2014 12:24 #
    спасибо за Коментарии,вносящие ясность в этом сложном но интересном процессе )) скажите пжл, может как то можно , потом, полученные эти вкладки горизонтальные как то визуально изменить..например-увеличить размер кнопки, раскрасить ее в какой-либо цвет...изменить шрифт текста меню...и тд..Буду очень благодарна помощи!
  • 0
    Петр Краковский 25 февраля 2014 07:53 #
    Еще вопрос. Разделы с товарами отображаются заглавными буквами. Как сделать, чтобы заглавная была только первая буква? Тема sidebar.
    • 0
      Михаил Ушенин Михаил Ушенин Webasyst 25 февраля 2014 08:10 #
      sidebar.css — закомментируйте /* */, как показано ниже:

      .app-navigation ul.menu-h li a { text-decoration: none; /* text-transform: uppercase; */ padding: 15px 15px 15px 0; color: #777; }
  • -5
    Игромаркет 27 ноября 2013 06:31 #
    Ничего не понимаю. Я не разработчик. HMTL и CSS на таком уровне не знаю. Что на что менять? Что было и что стало на скриншотах? Что за куски кода? Вместо чего что копировать. Меняем код приведеный ниже или выше на какой, следующий или выше?
    Ув. Владимир Тупоршин-мл! Мне кажется вы очень спешили составляя ответ. Давайте ещё раз, по шагам, с подробным "было" -> "стало".

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите