Помогите с wa_print_tree для меню по колонкам

Дмитрий

Можно чем-то заменить wa_print_tree или использовать его так, чтоб результатом были столбцы.
Или быть может как-то можно разметить css?

Сейчас так:


Видимое меню
ul - список первого уровня
li - категория первого уровня
Выпадающий список
ul - список второго уровня первой категории
li - категория второго уровня
ul - список третьего уровня
li - категория третьего уровня

Это все понятно, а теперь вопрос:

Вопрос: Все выпадающее меню формируется с помощью wa_print_tree, как выведенный список разделить по количеству категорий? Смотрите картинку ниже:











24 декабря 2016
  • Дмитрий 25 декабря 2016 10:23

    Вот как они это сделали? Неужели в ручную? http://hoff.ru/


  • BNP (Дмитрий) 25 декабря 2016 10:55

    По wa_print_tree расписано вот здесь

    Ну а дальше играемся выводом элементов и стилями.

    В примере сайт на битриксе, а не wa. Это я к тому, что там wa_print_tree и не пахнет. А вот как они это сделали (да и не только они), всегда можно посмотреть вот так ;)

  • Дмитрий 25 декабря 2016 11:24

    Я все это смотрел, проблема в том, как в этот массив, который выводит wa_print_tree, добавить элемент, который потом стилями сделать столбцом.

  • info@ravencode.ru 25 декабря 2016 11:29

    Самый простой вариант: в цикле выводить список категорий 1 уровня с вложенным списком подкатегорий (wa_print_tree).

    Хотя можно обойтись и просто стилями с помощью параметров class и collapsible_class функции wa_print_tree.

  • Дмитрий 25 декабря 2016 11:47

    Как обойтись стилями? У меня не получается. Сможешь сделать? Готов оплатить за рабочее решение.

  • info@ravencode.ru 25 декабря 2016 12:52

    Дмитрий, у меня есть только 1 первый вариант, писался под bootstrap3:

      <nav class="navbar navbar-default" id="header-footer">
        <div class="container">
    
          <div class="navbar-header">
            <div class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-footer .navbar-collapse">
              <span class="h6">[`Product categories`] </span>
              <button class="btn btn-success"><i class="fa fa-bars"></i></button>
            </div>
          </div>
    
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
            {foreach $wa->shop->categories(0, null, true) as $category}
              {if !empty($category.childs)}
                <li class="dropdown dropdown-{$theme_settings.navbar_catalog}">
                  <a href="{$category.url}" class="dropdown-toggle" data-hover="dropdown" role="button">{$category.name}</a>
    
                  {if $theme_settings.navbar_catalog == 'horizontal'}
                    <div class="dropdown-menu">
                      <div class="container">
                        <div class="row">
                          {foreach $category.childs as $subcategory}
                            <div class="col-md-6 col-lg-4 level-2">
                              <a href="{$subcategory.url}">{$subcategory.name}</a>
                              {wa_print_tree tree=$subcategory.childs class='level-3' elem='<a href=":url">:name</a>'}
                            </div>
                            {if $subcategory@iteration is div by 4}<div class="clearfix visible-md-block"></div>{/if}
                            {if $subcategory@iteration is div by 6}<div class="clearfix visible-lg-block"></div>{/if}
                          {/foreach}
                        </div>
                      </div>
                    </div>
                  {else}
                    {if $category@last}{$class = 'dropdown-menu dropdown-menu-right'}{else}{$class = 'dropdown-menu'}{/if}
                    {wa_print_tree tree=$category.childs class=$class elem='<a href=":url">:name</a>'}
                  {/if}
                </li>
              {else}
                <li><a href="{$category.url}" role="button">{$category.name}</a></li>
              {/if}
            {/foreach}
            </ul>
          </div>
    
        </div>
      </nav>
  • BNP (Дмитрий) 25 декабря 2016 13:05

    Для другого решения (не wa_print_tree) использовал как-то вот это решение.

    Задаем через class класс ul и этому ul выставляем стили, которые по ссылке.

    По идеи должно сработать.

  • Дмитрий 25 декабря 2016 14:36
    Дмитрий, надо пробовать, мне кажется вполне нормальны Вариант, я и на сайте посмотрел.


    Anton info@ravencode.ru, пока разбираюсь, вопрос, я так понял, мне нужно добавить в мой код вот этот элемент:

    {if $subcategory@iteration is div by 4}<div class="clearfix visible-md-block"></div>{/if}
    {if $subcategory@iteration is div by 6}<div class="clearfix visible-lg-block"></div>{/if}

    Мое понимание то что ты предлагаешь на изображении:

    Вот так выглядит мой элемент кода сейчас:


     {* INLINE category navigation *}
                    {foreach $categories as $cat}
                        {if count($cat.childs)}
                            <li class="collapsible">
                                <a href="{$cat.url}">{$cat.name}</a>
                                <div class="flyout">
                                    <div class="container">
                                        {wa_print_tree tree=$cat.childs unfolded=true collapsible_class='collapsible' class="menu-v" elem ='<a href=":url" title=":name">:name</a>'  } 
    
    Я так понимаю тут мне надо добавить условие с постановкой разных классов для div, если решать по твоему предложению, правильно? 
    
                                    </div>
                                </div>                    
                            </li>
                        {else}
                            <li class="collapsible">
                                <a href="{$cat.url}">{$cat.name}</a>
                            </li>
                        {/if}
                    {/foreach}




  • info@ravencode.ru 25 декабря 2016 16:43

    4 и 6 это кол-во блоков в строке, сделано с расчетом на 3 разрешения экрана. Советую ознакомится с bootstrap, он значительно упрощает процесс верстки.

  • Дмитрий 25 декабря 2016 20:50

    Эх, не получается у меня пока не так не этак, намучаюсь я с этим меню еще. Где бы исполнителя найти и заказать )



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