Prestashop 1.7 - раскрывающиеся подкатегории в верхнем меню - PullRequest
Новая
       6

Prestashop 1.7 - раскрывающиеся подкатегории в верхнем меню

0 голосов
/ 21 ноября 2018

Я использую верхнее меню ps_mainmenu с темой Prestashop по умолчанию, но выполняет только действие выпадающего меню с родительской категорией, но не с подкатегориями, как это показано на прилагаемом изображении и в HTML-коде с Chrome.Я хотел бы иметь возможность отображать меню подкатегорий.

Я думаю, что решение состоит в том, чтобы добавить что-то вроде этой строки: 

<div {if $depth === 1} class="top-menu collapse"{/if} id="top_sub_menu_{$_expand_id}">
  {menu nodes=$node.children depth=$node.depth parent=$node.children}
</div>

Меню: https://ibb.co/eQAEnA

HTML-меню: https://ibb.co/dWcYfV

Это мой код ps_mainmenu.tpl: 

{assign var=_counter value=0}
{function name="menu" nodes=[] depth=0 parent=null}
    {if $nodes|count}
      <ul class="top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
        {foreach from=$nodes item=node}
            <li class="{$node.type}{if $node.current} current {/if}" id="{$node.page_identifier}">
            {assign var=_counter value=$_counter+1}
              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{$node.url}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >
                {if $node.children|count}
                  {* Cannot use page identifier as we can have the same page several times *}
                  {assign var=_expand_id value=10|mt_rand:100000}
                  <span class="float-xs-right hidden-md-up">
                    <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                      <i class="material-icons add">&#xE313;</i>
                      <i class="material-icons remove">&#xE316;</i>
                    </span>
                  </span>
                {/if}
                {$node.label}
              </a>
              {if $node.children|count}
              <div {if $depth === 0} class="popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
                {menu nodes=$node.children depth=$node.depth parent=$node}
              </div>
              {/if}
            </li>
        {/foreach}
      </ul>
    {/if}
{/function}

<div class="menu js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
    {menu nodes=$menu.children}
    <div class="clearfix"></div>
</div>

Спасибо!

1 Ответ

0 голосов
/ 21 ноября 2018

Решение:

Изменить эту строку в ps_mainmenu.tpl: 

<div {if $depth === 0} class="popover sub-menu js-sub-menu collapse"{else} class="js-sub-menu sub-menu2 collapse"{/if} id="top_sub_menu_{$_expand_id}">
  {menu nodes=$node.children depth=$node.depth parent=$node}
</div>

И добавить этот класс в eme.css: 

.top-menu[data-depth="1"] li:hover .sub-menu2  {
    display:  block!important;
}
.top-menu .sub-menu2 ul[data-depth="2"]>li {
    float: left;
    margin: 0 1.25rem;
}
.top-menu .sub-menu2.collapse {
    position: absolute;
    top: auto!important;
    display: none;
    float: left;
    zoom: 1;
    z-index: 10;
    margin: 0 0 40px -1px;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .05);
    -o-box-shadow: 0 2px 2px rgba(0, 0, 0, .05);
    border-top: none;
    color: #212121;
    background: -moz-linear-gradient(top, #e2e2e2 0, #fff 22%, #fff 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0, #e2e2e2), color-stop(22%, #fff), color-stop(100%, #fff));
    background: -webkit-linear-gradient(top, #e2e2e2 0, #fff 22%, #fff 100%);
    background: -o-linear-gradient(top, #e2e2e2 0, #fff 22%, #fff 100%);
    background: -ms-linear-gradient(top, #e2e2e2 0, #fff 22%, #fff 100%);
    background: linear-gradient(to bottom, #e2e2e2 0, #fff 22%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',    endColorstr='#ffffff',    GradientType=0 );
}
.top-menu .sub-menu2 {
    box-shadow: 2px 1px 11px 2px rgba(0, 0, 0, .1);
    border: none;
    margin-left: .9375rem;
    width: calc(100% - 30px);
    min-width: calc(100% - 30px);
    z-index: 18;
    display: none;
...