¿Cómo hacer un menú horizontal superior con desplegables?

inmadigital

Hola a todos,

Estoy intentando implementar un menú horizontal en la parte superior de mi tienda PrestaShop, con submenús desplegables, y me está costando mucho hacerlo de una manera limpia y que no se rompa con cada actualización. He estado toqueteando el código y mi intento actual se siente como un parche temporal.

He intentado algo como esto en un módulo personalizado en el hookDisplayTop, pero sé que no es la forma correcta de manejarlo, porque el HTML está hardcodeado y no es escalable ni fácil de traducir. Además, no consigo que los desplegables funcionen bien sin mucho JS extra que tampoco sé dónde meter de forma limpia.

public function hookDisplayTop($params)
{
    $html = '<div class="my-custom-menu-wrapper">';
    $html .= '<ul class="my-main-menu">';
    $html .= '<li><a href="#">Inicio</a></li>';
    $html .= '<li class="has-submenu"><a href="#">Productos</a>';
    $html .= '<ul class="my-submenu">';
    $html .= '<li><a href="#">Categoría A</a></li>';
    $html .= '<li><a href="#">Categoría B</a></li>';
    $html .= '</ul>';
    $html .= '</li>';
    $html .= '<li><a href="#">Contacto</a></li>';
    $html .= '</ul>';
    $html .= '</div>';

    return $html;
}

¿Alguna idea de cómo debería abordar esto correctamente? Me preocupa mucho la compatibilidad futura.

beatrizseller

@inmadigital, entiendo perfectamente tu frustración. Meter HTML directamente en un hook como hookDisplayTop es un camino lleno de problemas. No es mantenible, es un dolor de cabeza para la internacionalización y, como dices, se rompe con mirarlo.

La principal razón por la que tu snippet actual es problemático es precisamente esa: estás devolviendo una cadena de HTML fija. PrestaShop, incluso en versiones como la 1.7, espera que la lógica PHP prepare los datos (un array, por ejemplo) y luego los asigne a Smarty para que una plantilla .tpl se encargue de la renderización.

¿Qué versión exacta de PrestaShop estás usando? Saber esto ayuda a entender el contexto de módulos y la estructura de archivos que tienes a mano. También, ¿estás utilizando el módulo ps_mainmenu y buscas algo más avanzado que lo que ofrece?

inmalab

Sí, como dice @beatrizseller, esa aproximación de código duro es la receta para el desastre. Además de los problemas de mantenimiento y traducción, te va a costar una barbaridad añadirle el comportamiento de desplegable con JavaScript de forma que no colisione con otros scripts del tema.

El ps_mainmenu que viene por defecto en PrestaShop 1.7 es bastante bueno para menús sencillos, pero si necesitas anidamiento complejo o características especiales, a veces se queda corto. La clave es separar la lógica de los datos de la presentación visual. El PHP debe recolectar y estructurar tus elementos de menú, y el Smarty se encarga de cómo se ven.

Milo

Gracias por la información, @inmadigital y @beatrizseller. @inmadigital, tu enfoque actual es, como bien intuyes, un anti-patrón en PrestaShop 1.7.0.1 (y en general en cualquier versión). El problema es que estás mezclando la lógica de negocio (qué elementos de menú mostrar) con la presentación (cómo se ven esos elementos en HTML).

En PrestaShop, la manera correcta de manejar esto en un módulo personalizado es preparando un array con la estructura de tu menú en el método del hook y luego pasárselo a una plantilla Smarty (.tpl) para que esta se encargue de renderizar el HTML. Esto permite que el HTML sea dinámico, traducible y mucho más fácil de mantener y estilizar con CSS.

Aquí tienes un ejemplo de cómo podrías estructurar tu hookDisplayTop para preparar los datos. Asumiendo que esto está en tu módulo MyCustomMenu, por ejemplo:

public function hookDisplayTop($params)
{
    // Define la estructura de tu menú como un array de arrays
    $menuItems = [
        [
            'label' => $this->trans('Inicio', [], 'Modules.Mycustommenu.Shop'),
            'url' => $this->context->link->getPageLink('index'),
            'children' => []
        ],
        [
            'label' => $this->trans('Productos', [], 'Modules.Mycustommenu.Shop'),
            'url' => '#', // Enlace para el elemento padre si no es navegable
            'children' => [
                [
                    'label' => $this->trans('Categoría A', [], 'Modules.Mycustommenu.Shop'),
                    'url' => $this->context->link->getCategoryLink(1), // Ejemplo con ID de categoría
                ],
                [
                    'label' => $this->trans('Categoría B', [], 'Modules.Mycustommenu.Shop'),
                    'url' => $this->context->link->getCategoryLink(2),
                ]
            ]

Luego, en tu archivo views/templates/hook/mycustommenu.tpl, podrías iterar sobre {$my_custom_menu_items} para generar el HTML del menú, incluyendo la lógica para los submenús. Esto te da mucha más flexibilidad.

Para una solución más robusta y que no tengas que mantener tú mismo, especialmente si necesitas opciones de configuración avanzadas, la gestión de la jerarquía de menús desde el back office, o incluso integrar contenido CMS, te recomiendo usar un módulo dedicado. Para automatizar menú horizontal superior en la tienda de forma eficiente y profesional, un buen módulo te ahorrará muchos dolores de cabeza y evitará conflictos en futuras actualizaciones.

inmadigital

Muchísimas gracias, @Milo y a todos. La explicación sobre separar la lógica de los datos de la presentación tiene todo el sentido del mundo. Mi enfoque de hardcodear HTML era un error de principiante, lo sé, pero necesitaba que alguien me lo confirmara y me guiara.

He implementado la lógica que sugieres en mi módulo personalizado para preparar el array y pasarlo a Smarty, y de verdad que el código queda mucho más limpio. Además, ahora puedo manejar las traducciones correctamente. El tema de la flexibilidad para futuros cambios y actualizaciones me tranquiliza muchísimo.

Por la complejidad que necesito y para no reinventar la rueda, voy a echar un vistazo al módulo que has recomendado. Parece la solución definitiva para evitar estos problemas a largo plazo. ¡Gracias de nuevo por la ayuda tan valiosa!