Mega Menu & Burger — Guía completa
Instalar, configurar y explotar el megamenú, el menú walker y el menú burger: editor de arrastrar y soltar, columnas, imágenes, bloques CMS, árbol de categorías automático, multiidioma y multitienda, para PrestaShop 8 y 9.
Presentación
El módulo Mega Menu & Burger (datafireflymegamenu) reemplaza la navegación de tu tienda por un sistema completo y configurable: megamenú de varias columnas, menú desplegable walker recursivo clásico y menú burger fluido en móvil. Todo se construye visualmente en el back office, arrastrando y soltando, sin tocar una línea de código.
Cada menú puede mostrar categorías, productos (con foto y precio), marcas, páginas CMS, enlaces personalizados, bloques HTML libres o imágenes promocionales, organizados en columnas dentro de paneles mega. El módulo es totalmente multiidioma y multitienda, y el elemento correspondiente a la página visitada se resalta automáticamente.
Un menú de demostración «Menú principal» se crea automáticamente en la instalación en el hook displayNav2, con un enlace Inicio y un árbol de categorías. Puedes modificarlo o eliminarlo libremente.
Compatibilidad
- PrestaShop 8.0 a 9.x
- PHP 7.4 a 8.x
- Tienda única y multitienda
- 5 idiomas incluidos: FR, EN, ES, DE, IT (y traducible sin límite)
- Tema Classic y temas personalizados
- Arquitectura PSR-4 sin dependencia de Composer
Instalación
- En el back office, abre Módulos > Gestor de módulos.
- Haz clic en Subir un módulo y selecciona el archivo
datafireflymegamenu.zip. - Una vez instalado, haz clic en Configurar.
En la instalación, el módulo crea sus tablas, registra sus hooks de visualización y de invalidación de caché, añade su pestaña de administración y genera el menú de demostración. Al actualizar desde una versión anterior, los scripts de actualización añaden las nuevas columnas y purgan la caché de renderizado automáticamente.
Primeros pasos
- Abre la configuración del módulo. A la izquierda, la lista Mis menús y los Ajustes del menú; a la derecha, la Estructura del menú.
- Haz clic en Nuevo menú, dale un nombre (por idioma), elige su hook de visualización y su layout, y guarda.
- En la zona Estructura del menú, haz clic en Añadir elemento raíz y elige su tipo.
- Arrastra y suelta los elementos para reordenarlos o anidarlos. Las posiciones se guardan automáticamente.
Ajustes del menú
El panel Ajustes del menú controla el comportamiento global de un menú:
- Nombre del menú: etiqueta interna, traducible por idioma.
- Hook de visualización: ubicación donde se renderiza el menú (ver la sección Visualización y hooks).
- Layout: Megamenú (paneles de columnas) o Desplegable clásico (walker recursivo).
- Apertura: los submenús se abren al pasar el ratón o al hacer clic. Al pasar el ratón, un breve retardo de gracia al cerrar evita el parpadeo en los movimientos en diagonal.
- Punto de ruptura móvil (px): ancho por debajo del cual el menú pasa al modo móvil/burger (991 px por defecto).
- Ancho máximo (px): centra la barra en el ancho elegido para alinearla con el contenedor del tema (ej. 1140 px).
0= todo el ancho. - Barra fija (sticky): el menú permanece fijado arriba al desplazarse.
- Paneles mega a todo el ancho: los paneles mega se extienden por todo el ancho de la barra.
- Menú burger en móvil: activa el menú burger por debajo del punto de ruptura.
- Activado: muestra u oculta el menú en el front office.
- Tiendas (multitienda): selecciona las tiendas en las que se muestra el menú.
Construir el árbol (arrastrar y soltar)
La estructura de un menú se construye en la zona Estructura del menú. Cada fila representa un elemento, con un asa de arrastre, una pastilla que indica su tipo y botones de acción.
- Reordenar: agarra el asa y mueve el elemento verticalmente.
- Anidar: suelta un elemento dentro de otro para convertirlo en subelemento (anidación ilimitada).
- Añadir subelemento: botón dedicado en cada fila.
- Modificar / Eliminar: iconos en cada fila. Eliminar un elemento también elimina sus subelementos.
Las posiciones y anidaciones se guardan automáticamente en cada movimiento, sin recargar la página.
Tipos de elementos
Cada elemento tiene un tipo que determina su contenido y su enlace. La ventana de edición adapta automáticamente los campos disponibles al tipo elegido:
- Enlace personalizado: una URL libre, traducible por idioma.
- Categoría: enlace a una categoría de la tienda, con imagen y contador de productos opcionales.
- Árbol de categorías (auto): genera automáticamente las subcategorías (ver sección dedicada).
- Producto: enlace a una ficha de producto, con foto de portada y precio opcionales.
- Marca: enlace a una marca; Todas las marcas: enlace a la página de marcas.
- Proveedor: enlace a un proveedor.
- Página CMS y Categoría CMS: enlaces a tus contenidos editoriales.
- Bloque HTML / CMS: contenido HTML libre, ideal para una promo o un texto enriquecido.
- Imagen / promo: una imagen clicable (con URL).
- Etiqueta: un simple título no clicable, útil como encabezado de columna.
- Separador: una línea de separación — horizontal en los paneles desplegables y mega, vertical entre los elementos de la barra.
Para cada elemento también puedes definir: una etiqueta, una insignia de color (texto + color), un icono Material, una clase CSS personalizada, la apertura en una nueva pestaña y la visibilidad por dispositivo (móvil, tablet, escritorio).
Opciones de visualización: imágenes, precios y contadores
Según el tipo elegido, la ventana de edición ofrece un bloque de Opciones de visualización:
- Mostrar la imagen (categoría, árbol, producto): muestra la imagen de la categoría o la foto de portada del producto en miniatura en el menú. Desmárcala para un menú 100 % texto. Una imagen subida manualmente al elemento siempre tiene prioridad.
- Mostrar el precio (producto): muestra el precio del producto, formateado según la moneda y el idioma del visitante, a la derecha de la etiqueta.
- Mostrar el contador de productos (categoría, árbol): muestra en una pastilla el número de productos activos de la categoría, subcategorías incluidas.
- Añadir un enlace «Ver todo» (árbol): añade al final de la lista un enlace a la categoría raíz del árbol.
Combina un elemento Producto con imagen + precio dentro de una columna de panel mega para destacar una novedad o una promoción directamente en la navegación.
Megamenú: columnas, imágenes y bloques HTML
Para convertir un submenú en panel mega, abre el elemento padre y ajusta Visualización del submenú a Mega panel (columnas). Después define el número de columnas.
Cada hijo directo del padre se convierte entonces en una columna del panel. Puedes ajustar el ancho de cada columna mediante su campo Ancho de columna (span), y colocar en ella subenlaces, un bloque HTML o una imagen promocional.
Mezcla los tipos en un mismo panel mega: algunas columnas de categorías, una columna «Bloque HTML» para una promo y una columna «Imagen» para destacar una novedad.
Árbol de categorías automático
El tipo Árbol de categorías (auto) evita cualquier introducción manual: genera por sí solo sus subcategorías a partir de una categoría raíz, hasta el nivel definido por el campo Subniveles.
Sus Opciones de visualización permiten activar o no las imágenes de categorías (miniaturas), el contador de productos por categoría y un enlace «Ver todo» que apunta a la categoría raíz, añadido al final de la lista.
Asocia este tipo con una visualización Mega panel para obtener, en segundos, un megamenú «Tienda» completo y siempre sincronizado con tu catálogo.
El árbol generado sigue las categorías activas y su orden en PrestaShop. Cualquier modificación de categoría se refleja automáticamente (ver Rendimiento y caché).
Multiidioma y multitienda
La etiqueta, la URL personalizada, la insignia y el contenido HTML de cada elemento son traducibles mediante las pestañas de idioma de la ventana de edición. El nombre del menú también es multiidioma.
En multitienda, cada menú se asocia a una o varias tiendas desde sus ajustes. Un mismo menú puede así mostrarse solo en algunas tiendas.
Visualización, hooks y posición
Un menú se muestra mediante el hook elegido en sus ajustes. Los hooks compatibles son:
displayNav2— barra de navegación principal (por defecto)displayTop— parte superior de la página, junto al logo y la barra de búsquedadisplayNavFullWidth— banda a todo el anchodisplayFooter— pie de páginadisplayLeftColumnydisplayRightColumn— columnas laterales
En displayTop, la barra se adapta automáticamente al ancho de su contenido para convivir con el logo y la barra de búsqueda del tema en la misma línea; los paneles mega a todo el ancho se centran allí en la pantalla.
Para una ubicación a medida, también puedes injertar el módulo en otro hook desde la página Posiciones de PrestaShop y seleccionar después ese hook en los ajustes del menú.
Página activa y navegación
El elemento de menú correspondiente a la página visitada — y su elemento raíz — reciben automáticamente la clase is-active y se resaltan según el estilo de hover del menú. La detección se hace en el navegador (coincidencia exacta de la URL, luego mejor coincidencia de sección), lo que sigue siendo totalmente compatible con la caché de renderizado.
Modo móvil y menú burger
Por debajo del punto de ruptura definido, el menú pasa automáticamente al modo móvil. Si la opción Menú burger en móvil está activa, la navegación toma la forma de un menú burger: panel deslizante (slide-in), submenús en acordeón, fondo oscurecido (backdrop) y bloqueo del desplazamiento de la página.
El módulo respeta la preferencia de sistema movimiento reducido (prefers-reduced-motion) desactivando las animaciones para los usuarios afectados.
Rendimiento y caché
El renderizado de cada menú se almacena en caché mediante Smarty, con una clave que tiene en cuenta el menú, el idioma, la tienda, la moneda y el grupo de clientes. Los menús se muestran así sin recálculo en cada página.
La caché se invalida automáticamente cuando se añade, modifica o elimina una categoría, una página CMS o una marca, así como en cada guardado de un menú o de un elemento en el back office. Los árboles automáticos, contadores de productos y precios permanecen así sincronizados con tu catálogo.
Tras una intervención manual (cambio de tema, vaciado parcial), vacía la caché de PrestaShop desde Parámetros avanzados > Rendimiento para forzar un nuevo renderizado.
FAQ y resolución de problemas
El menú no aparece en el front office
Comprueba que el menú está activado, que está asociado a la tienda correcta y que su hook corresponde a una ubicación realmente mostrada por tu tema. Después vacía la caché de PrestaShop y recarga en navegación privada.
El hook elegido no aparece en mi tema
No todos los temas implementan todos los hooks. Elige un hook realmente presente en tu tema (a menudo displayNav2 o displayTop), o injerta el módulo en un hook personalizado mediante la página Posiciones.
Mi megamenú no muestra columnas
Abre el elemento padre y ajusta Visualización del submenú a Mega panel (columnas), define el número de columnas y comprueba que existen elementos hijos: cada hijo directo se convierte en una columna.
Las imágenes de categorías o productos no se muestran
Comprueba que la casilla Mostrar la imagen está marcada en las Opciones de visualización del elemento, que la categoría tiene realmente una imagen (o el producto una foto de portada), y vacía la caché. Para un menú sin imágenes, simplemente desmarca esta opción.
El menú salta de línea o desplaza la barra de búsqueda (displayTop)
Desde la versión 1.2.1, la barra se adapta a su contenido en displayTop. Si el problema persiste tras la actualización, vacía la caché de PrestaShop: el HTML en caché debe regenerarse con las nuevas clases.
Los cambios no aparecen inmediatamente
Como el renderizado está en caché, vacía la caché de PrestaShop tras un cambio manual. Los cambios de categorías, páginas CMS, marcas, menús y elementos invalidan la caché automáticamente.
¿Es compatible con PrestaShop 9?
Sí. El módulo es compatible con PrestaShop 8 y 9, en multitienda y multiidioma, y gestiona de forma nativa las diferencias técnicas entre ambas versiones. Los precios mostrados en el menú utilizan el formateador de locale de PrestaShop 9 con reserva automática en PrestaShop 8.