Estilo minicarrito: sombra, scroll y ajuste responsive

mateoweb

¡Hola a todos!

Estoy intentando darle un toque más moderno al minicarrito desplegable en el header de mi tienda (versión 1.7.0.2). La idea es que tenga una sombra sutil y que, si hay muchos productos, aparezca una barra de scroll bonita. El problema es que, en pantallas de portátil más pequeñas, el desplegable se corta por el lado derecho. He probado a añadir esto en mi themes/classic/assets/css/custom.css pero no termino de conseguirlo, sobre todo el tema de que no se corte y un scroll más estético:

#_desktop_cart .cart-dropdown {
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
    max-height: 350px;
    overflow-y: auto; /* Para el scroll */
    right: 0; /* Lo puse para que se alineara a la derecha */
    left: auto;
    width: 300px;
}
#_desktop_cart .cart-products-list {

¿Alguna idea de cómo puedo hacer que el desplegable se ajuste bien en pantallas pequeñas y mejorar el estilo del scroll? Gracias de antemano.

rubendigital

¡Qué tal, @mateoweb!

Ese problema de que los desplegables se corten en resoluciones bajas es muy común en PrestaShop 1.7, especialmente con el tema Classic. El right: 0; hace que se pegue a la derecha de su contenedor, pero si el contenedor es estrecho o la ventana del navegador es pequeña, simplemente se sale. Tendrás que jugar con las @media queries para pantallas más pequeñas.

También es importante cómo estás manejando el position del elemento padre. ¿Estás seguro de que su padre tiene position: relative; o similar?

monicaonline

Exacto, @rubendigital, el posicionamiento es clave. @mateoweb, para el scrollbar personalizado, recuerda que los estilos ::-webkit-scrollbar solo funcionan en navegadores basados en WebKit (Chrome, Safari, etc.). Firefox y otros usan enfoques diferentes o simplemente el scrollbar nativo del sistema.

Para que no se corte, además de las media queries, a veces ayuda usar transform: translateX(-50%); combinado con left: 50%; para centrarlo, pero claro, esto necesita que el width sea relativo o que tengas un max-width definido.

Milo

Hola @mateoweb,

Entiendo perfectamente lo que buscas y el problema del desbordamiento es un clásico con los dropdowns fijos. Tu CSS va en la dirección correcta, pero necesita algunos ajustes para ser completamente responsive y darle ese toque estético. El right: 0; funciona bien en desktop, pero para móviles y tablets, el width fijo junto a eso es lo que causa que se corte.

Aquí te propongo una solución para tu themes/classic/assets/css/custom.css que debería resolver ambos problemas, incluyendo un estilo básico para el scrollbar y el ajuste responsive:

#_desktop_cart .cart-dropdown {
    border: 1px solid #e0e0e0;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    padding: 1rem;
    max-height: 400px; /* Aumentamos la altura máxima */
    overflow-y: auto;
    right: 0;
    left: auto;
    width: 300px; /* Ancho fijo para desktop */
    z-index: 1000;

Explicación de los cambios:

padding y max-height: Un padding más consistente y un max-height ligeramente mayor para mejor visualización.
Media Query @media (max-width: 767px): Aquí es donde solucionamos el problema de que se corta. En pantallas de hasta 767px (típico para móviles y tablets):
- width: 90vw; hace que ocupe el 90% del ancho de la ventana, adaptándose.
- max-width: 300px; asegura que no se haga demasiado grande en tablets.
- left: 50%; y transform: translateX(-50%); son la clave para centrar el elemento en la pantalla, independientemente de su ancho.
z-index: 1000;: Asegura que el desplegable se muestre por encima de otros elementos.
Estilos ::-webkit-scrollbar: Añadimos estilos para el scrollbar, que como bien apuntaba @monicaonline, funcionarán en Chrome, Safari y otros navegadores basados en WebKit. Para Firefox, el scrollbar será el nativo del sistema.

Con esto, el minicarrito debería verse consistente y funcional en todas las resoluciones.

mateoweb

¡Brutal, @Milo! Acabo de aplicar tu código en custom.css y funciona de maravilla. El desplegable ya no se corta en el portátil y el efecto de sombra junto con el scrollbar se ve justo como quería. ¡Muchísimas gracias por la ayuda tan detallada y la explicación!