(SOLUCIONADO) Desplegable en menu superior en subcategorias

[Goullak]

Buenos días,

Estoy usando el theme por defecto de Prestashop 1.7. Me gustaría poder hacer desplegable en el mainmenu horizontal superior, además de las categorías también las subcategorías, ya que a partir de este nivel quedan estáticas. Pongo imagen como ejemplo tanto del desplegable que tengo actualmente como del código HTML de Chrome. También os indico el código de mi ps_mainmenu.tpl actualmente:

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

 

Muchas gracias!

Edited November 21, 2018 by Goullak (see edit history)

[Goullak]

Bueno, aunque la comunidad no me ha dado respuesta, yo ofrezco la solución a un problema que creo que existe en Prestashop y seguro que a más de uno le ayudará.

He modificado la siguiente línea en ps_mainmenu.tpl, y para lo que no sea $depth === 0, usará la clase sub-menu2 que defino mas abajo en el css :

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

Modificación del theme.css, creando una clase sub-menu2 donde es necesario para mostrar el desplegable:

.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;
}

Quizás haya que modificar algo más a nivel de estilos para que se quede mejor visualmente, pero ya depende de la web de cada uno.

Un saludo.

[herramientate]

hola,

 

Como lo has solucionado?

[frany]

Muchisimas gracias Goullak,

Por fin he podido solucionar el tema del menu, que me estaba volviendo loco.

Habia instalado tambien la version de menu dropdown de Vekia, pero no conseguia que funcionase bien en moviles.

Con tu codigo por fin he podido dar solucion al menu.

Como bien decias he tenido que modificar algo el CSS para que funcione correctamente.

Muchisimas gracias por compartirlo.

[Guest]

Le 21/11/2018 à 1:36 PM, Goullak a dit :

Eh bien, même si la communauté m'a donné aucune réponse, je vous offre une solution à un problème que je pense existe dans Prestashop et certainement plus d'un aidera.

J'ai modifié la ligne suivante dans ps_mainmenu.tpl, et ce n'est pas $ profondeur === 0, utilisera les menu2 sous-classe ci-dessous définissent dans le css:

 


Theme.css modification, la création d'une sous-classe menu2 où il est nécessaire de montrer la liste déroulante:



Peut-être que vous devez changer quelque chose au niveau des styles pour rester visuellement mieux, mais il dépend sur le web de chacun.

Salutations.

Hola, no tengo estas lineas en mi tpl ?? ¿Podría ser más específico?

Bonjour, je n'ai pas ces lignes dans mon tpl?? Pourriez vous etre plus precis ? 🙂 Merci

[frany]

On 4/3/2019 at 1:57 PM, Tiri said:

Hola, no tengo estas lineas en mi tpl ?? ¿Podría ser más específico?

Bonjour, je n'ai pas ces lignes dans mon tpl?? Pourriez vous etre plus precis ? 🙂 Merci

I did´t have either.

You have to replace the whole tpl code for that. (Make a backup of your tpl file first if you want)

Then you have to change your css file with the new class, or maybe you have to add a new one.

In my case I changed the original classes in my css adding the code that is in the class of the css shown here.

Hope you can resolve it.

 

 

[Guest]

Désolé je n'ai pas compris... Et en rajoutant ces textes cela ne change rien a ce menu...

🙂

Lo siento, no entendí ... Y al agregar estos textos no cambia nada en este menú ...

[cataplina]

 

On 11/21/2018 at 9:36 AM, Goullak said:

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

Hola, por favor podrías especificar en qué línea hiciste esa modificación? porque estoy intentando y no me funciona, creo que lo estoy haciendo mal

Muchas gracias!