Añadir Imagen para las categorías menú móvil Prestashop
Tabla de Contenidos
El menu mobile como lo conocemos no acepta mucha personalización desde nuestro back office.
Debido a eso nos meteremos un poco dentro del código para añadir imagen para las categorias menu movil
A lo largo de los tiempos me he llegado a preguntar como o con que recursos utilizan los estilos de los menus en los dispositivos. Prestashop tiene una gran gama de módulos para modificar los menus horizontales. Pero, que pasa con darle un estilo nuevo y con imagen para las categorías menú móvil. El resultado final que quiero que consigáis es como este.
Lo primero he de decir que esto es una modificación interna del tema Wherehouse al que vamos a añadirle imágenes para las categorías del menú móvil. Para el template Classic (por defecto) no hace falta añadir ningún código JS asi que puede ir directamente al CSS necesario para la modificación.
En muchos templates que compramos por defecto nos encontramos un menu para moviles muy simple y eso no hace que nuestra página sea distintiva a las demás. La verdad es que no se por qué razón no añaden un personalizador del menu del telefono.
Como Añadir Imagen para las categorías menú móvil
Bueno para empezar nos vamos a inspeccionar elemento y confirmamos que los elementos «<li>» de nuestro menú móvil de Prestashop no tienen asignada, ni genera ninguna clase distintiva para poder aplicarle ningún CSS personalizado.
La ID que sostiene todos los elementos del menu movil en mi caso se llama iqitmegamenu-mobile ya que el tema que uso para esta modificacion es Wherehouse como antes he dicho.
Bueno para empezar nos vamos a inspeccionar elemento y confirmamos que los elementos «<li>» de nuestro menú móvil de Prestashop no tienen asignada, ni genera ninguna clase distintiva para poder aplicarle ningún CSS personalizado.
La ID que sostiene todos los elementos del menu movil en mi caso se llama iqitmegamenu-mobile ya que el tema que uso para esta modificacion es Wherehouse como antes he dicho.
Añadimos clase CSS a todas las «li» de nuestro menú móvil
Supongo que ya saben por donde van los tiros. Vamos a añadir clase personalizada para cada una de las lineas «li» que se generan con cada nombre de categoría asignada para así darle una clase con un ::before y aplicarle una imagen en resumen al mismo.
Con el siguiente código vamos a comenzar a generar un «class=menucatX» en el <li> para cada una de las categorías que se listan en el mobile menu desde la id iqitmegamenu-mobile
$(document).ready(function() {
$("#iqitmegamenu-mobile li").each(function(i) {
$(this).addClass("menucat" + (i+1));
});
});
Lo que nos hace este trozo de código es crear una clase a partir de la ID de css seleccionada que en este caso es la que engloba todo el desplegable del menu en el móvil de Prestashop.
El código lo metemos lo mas cerca del menu del movil. A eso me refiero que lo meteremos en el archivo donde la ID general se aplique a dicho menú.
Que en el caso de Wherehouse es webpath/themes/warehouse/templates/_partials/_variants/mobile-header-2.tpl
Dependiendo de la plantilla que se use y la estructura.
Para que funcione el código debemos de hacer llamada a la librería jquery indicada para la ejecución del mismo añadiendo lo siguiente al HEADER (recomendado)
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
Si lo hemos aplicado todo bien ahora nuestras categorías en el menu movil tendrán una clase personalizada de CSS numerada que nos permitirá crear la opción de añadir una imagen.
Añadimos imagen al menu movil con ::before
Vamos a proceder a añadir imagen para las categorías menu movil de Prestashop aplicando subclase de CSS :before en las clases que hemos generado con el el script del paso anterior.
En nuestro style.css vamos a generar el estilo donde irá la imagen de nuestra sección. Para cada clase debe de ir una imagen así que el proceso se repetiría según necesidad.
.menucat1::before{
content:url('url de la imagen');
width: 51px;
height: 68px;
position: absolute;
}
Con esta simple clase generaremos una imagen en el menu movil de Prestashop y podremos jugar con los estilos al gusto.
BONUS: Subcategorías movil en varias columnas
A parte de añadir imagen para las categorias menu movil tambien os dejo como bonus el pode implementar una pequeña modificación de css en el tema Wherehouse u otros que os ayudará a colocar el desplegable de subcategorías de menu movil en columnas ajustables pudiendo ser 2 en móviles y 3 en tablets. Como en la imagen:
El template con el que estoy haciendo esto es Wherehouse pero modificando un poco las ID y Clases generales podéis conseguir este efecto en cualquier tema de prestashop.
Clases para poner subcategorias del menu movil en varias columnas:
/* Imagenes en el mobile menu */
#iqitmegamenu-mobile li {
position: relative;
background: rgb(200,200,200);
background: linear-gradient(3deg, rgb(243 243 243) 0%, rgba(255,255,255,1) 100%);
padding-left: 8px;
}
#iqitmegamenu-mobile li a {
display: block;
padding: 23px 14px 0px 56px;
min-height: 68px;
font-size: 17px;
}
#iqitmegamenu-mobile li ul a {
border: solid 1px #d6d6d6;
padding: 7px;
background: hsl(0deg 0% 97%);
border-radius: 15px;
font-size: 14px;
text-align: center;
min-height: 36px;
}
#iqitmegamenu-mobile li ul li {
padding: 10px 0px 12px 9px;
min-height: 60px;
width: 170px;
display: inline-block;
background: none;
vertical-align: middle;
}
Conclusión: Prestashop ni el template no nos permite añadir imagen para las categorías menu del mobile por eso he creado esta pequeña guía para que podáis implementar esta modificación.
Parte negativa: Las clases que se crean son generalmente estáticas y no concuerdan con el orden de las categorías. Tengan cuidado si cambian elementos del menu movil ya que en el mismo elemento que ustedes habéis colocado la imagen en el menú móvil os puede situar dé repente en otra categoría porque habéis cambiado el orden de las mismas. Tened cuidado con eso nada mas. Saludos.
Si alguien tiene una aportacion para mejorar esta modificacion son libres de añadirlo en los comentarios y lo modifico en el post.