Mega Menu: configuración y ayuda

Sube e instala el ZIP mprmegamenu en Módulos > "Module Manager". Haz clic en "Configure", o abre "Improve" > Mega Menu > Pestañas del menú.

La instalación registra displayMainMenu, displayTop y displayNavFullWidth. El renderizador elige la posición del menú adecuada para tu tema. La instalación retira las instancias enganchadas de ps_mainmenu, blocktopmenu y blocktopdropdownmenu de los hooks de navegación superior o de ancho completo y las registra para restaurarlas al desinstalar.

Comprueba la cabecera justo después de instalar. Un tema personalizado debe llamar a un hook compatible. Un desarrollador puede añadir una ubicación en el tema con:

{hook h='displayMainMenu'}

o:

{widget name='mprmegamenu' hook='displayMainMenu'}

Selecciona la tienda deseada antes de configurar las pestañas. El proceso PHP necesita acceso de escritura a la carpeta del módulo dentro del directorio de caché de PrestaShop. Los empleados que editan columnas desplegables necesitan permiso de edición en la página de administración del módulo.

En Pestañas del menú, crea una pestaña, guárdala y abre su editor "Dropdown Columns".

Para un enlace de ofertas, establece "Label" en Sale, "URL Type" en "Custom URL", "Custom URL" en la ruta de ofertas de tu tienda y activa Activo. Comprueba el enlace en cada idioma.

Elige un tipo de columna y su ancho en la cuadrícula de 12 columnas. Las nuevas columnas usan por defecto el ancho 3 y el tipo category_tree. El editor admite hasta 12 columnas; su ancho total no puede superar 12. Los títulos y contenidos se traducen. Los tipos de columna generados usan ajustes en lugar de contenido HTML traducido.

El editor valida URL, referencias, tipos de contenido y anchos. Si otro empleado guarda la misma pestaña, vuelve a cargar sus columnas antes de guardar de nuevo. Se rechaza una revisión obsoleta para evitar sobrescribir sus cambios.

Para un árbol bajo la categoría 8, usa estos ajustes y sustituye todos los ID de ejemplo:

{"id_category":8,"depth":2,"exclude":[15,16]}

Para páginas CMS seleccionadas:

{"cms_ids":[3,4,5]}

Las filas estructuradas del editor actual incluyen un tipo de fila. Un array de contenido con enlaces agrupados puede ser:

[
  {
    "row_type":"link_group",
    "label":"Shopping help",
    "url":"/help",
    "icon":"help",
    "new_window":false,
    "children":[
      {"row_type":"link","label":"Delivery","url":"/delivery","icon":"local_shipping","new_window":false}
    ]
  }
]

Usa destinos existentes y localizados. Los formatos de URL compatibles incluyen un ancla, una ruta relativa a la raíz que empiece con una sola barra o una URL HTTP/HTTPS absoluta. Se rechazan las URL relativas al protocolo.

Ejemplo de contenido de una pestaña visual:

{
  "tabs":[
    {
      "row_type":"visual_tab",
      "id":"guides",
      "label":"Guides",
      "url":"/guides",
      "columns":[
        {"type":"sizes","title":"Topics","links":[{"row_type":"link","label":"Delivery","url":"/delivery","icon":"","new_window":false}]},
        {"type":"card","col_class":"col-6","title":"New products","subtitle":"Latest arrivals","url":"/new-products","image":"/img/cms/menu-new-products.jpg","mobile_image":"","alt":"New products"}
      ]
    }
  ]
}

Para HTML personalizado, las estructuras móviles compatibles incluyen [data-mm-tabs], .mm-type-card, grupos de enlaces .mm-html y listas normales. Un formulario de escritorio o un widget arbitrario no se reproduce automáticamente como formulario móvil interactivo.

<div class="mm-html">
  <div class="mm-html__title">Buying guides</div>
  <ul>
    <li><a href="/guide-1">Guide 1</a></li>
    <li><a href="/guide-2">Guide 2</a></li>
  </ul>
</div>

Abre Mega Menu > Configuración > Configuración.

Seleccionas categorías para los paneles de productos. El formulario estándar no ofrece un selector individual de productos para ellos.

Usa los ajustes "Submenu" en Configuración.

Para referencias de guías, usa ID reales publicados, por ejemplo:

{"8":[12,"kb:34"],"*":[56]}

El menú móvil ofrece navegación anidada y una barra rápida. Comprueba los destinos configurados de contacto, cuenta, ayuda y configuración regional en los idiomas reales de la tienda.

Usa "Theme styles" para los valores compartidos detectados del tema. El módulo asigna color principal, texto, texto atenuado, fondos principal y secundario, borde, radio y transición a variables --mprmegamenu-*. Actualiza la detección tras cambiar de tema o borra las sobrescrituras personalizadas para volver a los valores detectados.

El mapa actual de variables no incluye los antiguos alias específicos del módulo para el color principal al pasar el cursor ni las sombras. Revisa el editor de estilos compartido y la hoja de estilos activa en vez de introducir la lista fija de reserva original como valores predeterminados del módulo.

Para el CSS del tema, inspecciona .mprmegamenu-container y el marcado actual .ps-mainmenu__*. Una cabecera personalizada puede necesitar cambios de espaciado o posición.

1. Prueba cada destino de primer nivel en escritorio.
2. Abre cada desplegable y prueba sus enlaces, productos e imágenes.
3. Repite en el panel móvil. Confirma que el HTML personalizado genere los enlaces anidados deseados.
4. Repite como invitado y en los grupos de clientes con restricciones de categorías.
5. Repite en cada idioma y tienda.

El contenido del árbol de categorías sigue los cambios del catálogo. Los enlaces y el HTML introducidos manualmente siguen necesitando mantenimiento manual. Los cambios de categorías, CMS, productos y menú invalidan las cachés de menú relacionadas. El módulo guarda datos, marcado renderizado y fragmentos en su directorio mprmegamenu dentro del directorio de caché de PrestaShop.

Si falta el menú, comprueba el hook del tema y las pestañas activas de la tienda seleccionada. Si las columnas no se guardan, comprueba permisos de edición, errores de validación y ancho total. Si una columna de blog está vacía, comprueba el módulo fuente y el contenido publicado.

Abre Configuración > Integridad para comprobar tablas, hooks, referencias y directorio de caché. Las tablas de menú necesarias incluyen mprmegamenu_tab, mprmegamenu_tab_lang, mprmegamenu_tab_shop, mprmegamenu_column y mprmegamenu_column_lang. Vacía las cachés pertinentes de PrestaShop y CDN tras cambiar una sobrescritura del tema.

Primero exporta o respalda los ajustes del menú. Desinstala desde "Module Manager". El SQL de desinstalación elimina las cinco tablas del menú, vacía la caché del módulo y retira las entradas de menú. El módulo restaura los registros de hooks del menú nativo que guardó. Comprueba después la cabecera, sobre todo si cambiaste módulos de menú nativos mientras Mega Menu estaba instalado.

Requiere PrestaShop 1.6.1 o posterior y PHP 7.1 o posterior.