Prestashop 1.7 - 顶部菜单中的下拉子类别

Question

我正在使用带有默认 Prestashop 主题的 ps_mainmenu 顶部菜单，但只对父类别而不是子类别执行下拉菜单的操作，因为它显示在附件图像和 Chrome 的 HTML 代码中。我希望能够显示子类别的菜单。

我认为解决方案是添加如下行：

<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>

谢谢！

Answer 1

解决方案：

在 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>

并在 theme.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;