menú principal prestashop DIVIDIR MENÚ A AMBOS LADOS DEL LOGOTIPO

[theboombaby]

Hola a todos. Me gustaría que el menú de mi prestashop quedara con el logo en medio y el menú dividido a ambos lados del mismo. Adjunto imagen.

Así, por ejemplo:

• Logo en medio
• Tres categorías a la derecha
• Tres categorías a la izquierda.

Ya conseguí centrar el logo, pero dividir el menú me está costando más. Necesito ayuda aurgente. Saludos.

 

 

Edited March 3, 2020 by theboombaby (see edit history)

[JuanjoG]

Que theme estas usando?

[theboombaby]

El tema clásico, por defecto.

[Luis C]

Si usas el módulo ps_mainmenu puedes editar el template que tienes en /themes/classic/modules/ps_mainmenu/

A lo mejor no funciona como esperas, pero yo haría algo así:

1) Retira el logo de tu template actual

2) abre ps_mainmenu.tpl

3) busca el comienzo del loop (foreach) 

Antes del loop añade este código que asigna una nueva variable con valor 0

{assign var=items value=0}

Determina el número de <li> de tu menú

Al inicio del loop incrementa el valor, y añade una condición para que al llegar A LA MITAD (tu nº fijo de items en el menú / 2) añada un código para insertar el logo. Cambia X por el número de item en el menú donde quieras que aparezca el logo. (Aparecerá antes de este item)

{foreach from=$nodes item=node}
{assign var=items value=$items+1}
        {if $items == x}
        <li class="LOGO"><img src=""></li>
        {/if}
{.....}

Acabo de probarlo, y funciona correctamente en una instalación de desarrollo con prestashop 1.7.6. Ya me contarás.

 

EDIT:

 

La otra opción, visto que ya has centrado el logo, es que añadas un item más al menú, en el centro, y lo estiles en CSS para que no aparezca el texto (text-indent en negativo), y le añadas márgenes o padding para simular el efecto de que esté dividido. Luego posicionas el <ul> (o el div del menú) de forma absoluta y lo superpones donde se encuentra el logotipo. Es más chapuza, tendrás que hacer más ajustes con media queries, pero también debería ser funcional

Edited March 11, 2020 by Luis C (see edit history)

[theboombaby]

 

Hola Luis, acabo de hacer la reforma de código pero sigue sin funcionar. Tal vez no esté el código bien puesto. El código ha quedado así:

 

{assign var=items value=5}
{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}
        {assign var=items value=$items+1}
        {if $items == 3}
        <li class="LOGO"><img src=""></li>
        {/if}

            <li class="{$node.type}{if $node.current} current {/if}" id="{$node.page_identifier}">
            {assign var=_counter value=$_counter+1}
              <a

 

Saludos.

[Luis C]

No he sido lo suficientemente claro

Cuando asignas la variable items por primera vez, tienes que ponerle como valor 0. Es un contador que itera en cada resultado del foreach y suma 1. Por eso no te funciona, porque comienza a contar desde el 5

 

Edited March 11, 2020 by Luis C (see edit history)

[theboombaby]

Ajá comprendo, pero el resto del código está bien puesto ¿no?

[theboombaby]

Ya lo he cambiado a 0 pero sigue sin moverse, por eso te preguntaba si estaba bien el código...

[theboombaby]

Por cierto ¿es estrictamente necesario quitar el logo? ¿O debería funcionar igual?

[Luis C]

Vale. Vamos por partes:

 

- Prueba a asignar el valor a la variable DENTRO de la función, de otro modo es posible que no funcione

 <ul class="top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
        {assign var=items value=0}
        {foreach from=$nodes item=node}
        {assign var=items value=$items+1}
        {if $items == 3}
        <li class="LOGO"><img src=""></li>
        {/if}

 

Por otra parte, tienes que personalizar la parte del código donde accedes a la imagen. La etiqueta "<img src="">" no va a mostrar ninguna imagen. Si accedes al archivo de cabecera del template (templates/_partials/header.tpl)  puedes copiar la linea donde se llama al logo

<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">

Por último. Esta aproximación requiere que retires de header.tpl el logotipo que originalmente estaba puesto, ya que con este código lo estás llamando de nuevo, de modo que saldría dos veces. He asignado la clase "LOGO" al elemento <li> que rodea a la imagen logotipo en mi ejemplo para que puedas asignarle un estilo inline y los márgenes o paddings necesarios para encajar en tu diseño.

 

PD: En tu caso, si quieres que el logo aparezca tras el tercer elemento del menú (es decir: 3 elementos - LOGO - 3 elementos) tienes que cambiar la sentencia IF y poner if $items == 4.  

Edited March 11, 2020 by Luis C (see edit history)

[Luis C]

Haciendo seguimiento. ¿Has conseguido progresar con el tema?

[theboombaby]

Hola, acabo de venir a casa y me voy a poner al lío. Ahora me recluyo en casa (cómo está el país) y te cuento. 

Sobre todo, gracias por tu tiempo e interés, te lo agradezco muchísimo.

Saludos.

[theboombaby]

Gracias Luis C. Sí, en efecto, ya he podido hacerlo y a la primera (a la primera desde el último mensaje que me enviaste claro, jajaja).

Saludos y muchas gracias x1000.

[Luis C]

Genial. Un saludo.

Edited March 18, 2020 by Luis C (see edit history)