Prestashop: que el menú del backoffice pueda hacer scroll.

Con Prestashop 1.7 han venido muchas ventajas. Pero también alguna cosa extraña que ha habido que arreglar. Entre ellas esta del menú del backoffice. Si añades muchos módulos que agreguen apartados en en menú de la sección de administración, verás que no se puede llegar a la parte inferior porque no hace “scroll”.

Dicen que lo van a solucionar, pero llevan diciéndolo desde las primeras versiones, así que os dejamos una arreglo mientras lo hacen.

Cómo hacer que el menú del backoffice en Prestashop pueda hacer scroll.

Lo primero es hacer que se pueda hacer scroll. Para ello edita el fichero tucarpetadeadmin/theme/default/css/admin-theme.css o mejor, para mantener ese intacto tucarpetadeadmin/theme/default/css/override.css

Y añade las líneas:

#nav-sidebar { 
overflow-y: auto; }
::-webkit-scrollbar {display:none;} 

Con esto se puede hacer scroll y sin ver la barra. PERO (un gran pero) desaparecen los submenús del menú principal.

También tenemos solución para eso.

Ahora tienes que editar el fichero tucarpetadeadmin/theme/default/js/admin-theme.js   y poner lo siguiente al final:

$(function () {

$(document).on(‘hover’, ‘#nav-sidebar li.has_submenu’, function () {
var submenu = $(this).find(‘.submenu’).eq(0);

var marginTop = $(this).position().top + parseInt($(‘header#header > nav’).height());
if ((marginTop + parseInt(submenu.height())) > parseInt($(window).height()))
marginTop -= (marginTop + parseInt(submenu.height()) – parseInt($(window).height())) + 10;

if ($(‘body’).hasClass(‘page-sidebar-closed’))
marginTop += 34;

setTimeout(function () {
submenu.attr(‘style’, ‘position: fixed !important; top: ‘ + marginTop + ‘px !important’);
}, 50);
});

});

Con esto ya tendrás los menús funcinando (fuente de esta función). Parece mentira que no solucionen estas cosas “tan sencillas”.

6 comentarios en «Prestashop: que el menú del backoffice pueda hacer scroll.»

  1. Buenos días,
    Me alegra ver que hay solución para este problema. He seguido todos los pasos que indicas pero llegada a overrides.css me encuentro el siguiente texto:

    /* This stylesheet should be used to add your custom styles to the back-office without using the Sass sources. It will be loaded after all the default styles.
    You should NOT edit any other exisiting back-office CSS file manually: they are generated by the Sass preprocessor: http://www.sass-lang.com/ . */

    No hay nada de código dentro de este archivo por lo que no sé donde pegar el fragmento que nos dejas. Siguiendo las indicaciones intenté instalar el procesador Sass pero el antivirus lo bloquea al detectarlo como amenaza, por lo que decidí instalar otro y funciona bastante bien: Rapid CSS 2018 (Tiene una versión gratuita de 30 días)

    Por otro lado, intenté hacer la modificación de código a través del archivo admin-themes.css pero hay muchos apartados dentro de este archivo ¿En cuál de ellos debería añadir el fragmento de código?

    Agradecería cualquier ayuda al respecto, ya sea para hacerlo a través de overrides.css o admin-themes.css.

    Muchísimas gracias de antemano,
    Un saludo

    Responder
    • Buenos días. Nosotros hemos pegado el código justo detrás del texto que nos pasas para el override.css
      Estos cambios van a ser sobreescritos en alguna actualización, pero por lo que he leído están rediseñando el menú así que no importa. Es para poder trabajar ahora.
      El otro fichero que indicamos es el admin-theme.js (no el css, porque este se encarga de que aparezcan los submenus). Tienes que ponerlo al final.

      Responder
  2. Buenos días David, ¡Muchas gracias por tu respuesta!
    He hecho seguido todos los pasos que me indicas pero finalmente no se aprecia ningún cambio en la web. (Te dejo escrita la web en el apartado Web para que puedas verla)

    En cuanto a admin-theme.css me refería al primero que indicas: tucarpetadeadmin/theme/default/css/admin-theme.css y que dices que dejemos intacto y utilicemos overrides.css. ¿Si añadiese aquí el código en qué parte tendría que pegarlo?

    ¿Sabes si hay fecha para esa actualización?

    Muchas gracias de nuevo,
    Un saludo

    Responder
    • Buenos días. Recuerda que para que se vea tienes que limpiar caché en el navegador, porque este guarda los css y js. Para eso dale a Shift+F5 varias veces o ve a las opciones del navegador a vaciar caché.
      Si lo pones al final de los ficheros, salvo que te comas algún paréntesis no debería haber problema.
      Y no…no se cuando lo arreglarán, pero estoy pendiente de otros fallos y no van muy deprisa.

      Responder