Estilo discreto para banner de cookies en Classic

sara_madrid

Hola a todos,

Estoy intentando darle un estilo más discreto y de marca al banner de consentimiento de cookies por defecto del tema Classic, en mi PrestaShop 1.7.6.0. El que viene por defecto es demasiado intrusivo, sobre todo en móvil, donde a veces incluso tapa el botón de añadir al carrito o la navegación inferior.

Mi idea es que sea una pequeña tarjeta flotante en la parte inferior de la pantalla, con bordes redondeados y botones de acción también redondeados, siguiendo la estética de mi tienda. He probado a añadir algunas reglas en themes/classic/assets/css/custom.css, pero no consigo que quede del todo bien y que sea responsive.

Aquí tenéis el código que he intentado usar:

#ps-eu-cookie-law {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 15px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    text-align: center;
    z-index: 1000;

El problema es que sigue ocupando todo el ancho, no se ve como una tarjeta y en móvil sigue estorbando. ¿Alguna idea de cómo mejorarlo para que sea más elegante y funcional?

fernandodigital

Hola @sara_madrid, entiendo perfectamente el problema con el banner de cookies. Es una queja común. El código que has puesto es un buen punto de partida, pero para que parezca una tarjeta, necesitarás limitar el width o max-width y luego centrarlo. El width: 100% hace que ocupe todo el ancho, como bien dices.

También es importante verificar la especificidad de tus reglas CSS. A veces, las reglas del módulo de cookies tienen mayor peso y tus estilos no se aplican. Puedes usar !important de forma puntual si es estrictamente necesario, aunque no es lo ideal. ¿Has mirado con las herramientas de desarrollador si hay algún div padre o clases más específicas del módulo que pudieras usar para tus estilos?

hugoonline

@fernandodigital tiene razón. @sara_madrid, para centrarlo y darle ese aspecto de tarjeta, además de limitar el ancho, podrías probar con left: 50%; transform: translateX(-50%); en el #ps-eu-cookie-law. Esto lo centrará horizontalmente en la pantalla. Y para los bordes redondeados, el border-radius está bien, pero quizás quieras aumentarlo un poco para que sea más pronunciado.

También es crucial el z-index. Asegúrate de que sea lo suficientemente alto (por ejemplo, 9999) para que no haya ningún otro elemento que lo solape, como un botón de 'añadir al carrito' o un menú fijo en el pie de página, que es lo que comentas que te pasa en móvil.

Milo

Hola @sara_madrid, la idea de una tarjeta flotante y discreta para el banner de cookies es excelente y mejora mucho la experiencia de usuario, especialmente en PrestaShop 1.7.6.0. El código que has intentado es correcto en su base, pero necesita esos pequeños ajustes para lograr el efecto deseado y asegurar que sea responsive.

Para que el banner se vea como una tarjeta centrada en la parte inferior y con botones redondeados, y que además se adapte bien a dispositivos móviles sin ser intrusivo, te propongo el siguiente CSS. Puedes añadirlo o reemplazar lo que tienes en tu themes/classic/assets/css/custom.css:

#ps-eu-cookie-law {
    position: fixed;
    bottom: 20px; /* Separación del borde inferior */
    left: 50%; /* Centrar horizontalmente */
    transform: translateX(-50%); /* Ajuste para un centrado perfecto */
    max-width: 450px; /* Ancho máximo para escritorio, para que parezca una tarjeta */
    width: calc(100% - 40px); /* Ancho adaptable con un margen de 20px a cada lado */
    background: #fff;
    padding: 20px 25px; /* Más padding para el efecto de tarjeta */
    border-radius: 12px; /* Bordes más redondeados para el banner */

Explicación de los cambios:

bottom: 20px, left: 50%, transform: translateX(-50%): Estos tres juntos centran el elemento horizontalmente y lo elevan 20px del borde inferior, dándole un respiro.
max-width: 450px y width: calc(100% - 40px): Limitan el ancho en escritorios para que parezca una tarjeta y añaden un margen lateral, mientras que en móvil se expande gracias al calc().
padding, border-radius y box-shadow: Ajustados para un aspecto más de tarjeta y una sombra más suave.
display: flex, flex-direction: column, align-items: center: Usamos Flexbox para centrar el contenido (texto y botones) dentro del banner.
z-index: 9999: Garantiza que el banner esté siempre por encima de cualquier otro elemento de la página.
border-radius: 25px en .btn: Hace que los botones sean completamente redondeados, estilo 'pill'.
Media Query @media (max-width: 767px): Esto es clave para la adaptabilidad móvil. Ajusta el bottom, width y max-width para que el banner ocupe más espacio en pantallas pequeñas, y hace que los botones se expandan a todo el ancho para facilitar su pulsación.

Con esto, tu banner de cookies debería verse mucho más integrado y menos molesto para tus clientes.

sara_madrid

¡Increíble, @Milo! ¡Muchísimas gracias! El código que me has pasado ha funcionado a la perfección. Ahora el banner de cookies se ve exactamente como quería: una tarjeta flotante discreta, centrada, con los botones redondeados y, lo más importante, ¡ya no interfiere con el checkout ni con los botones en móvil!

La explicación de los cambios y la media query para móvil han sido súper útiles. ¡Problema resuelto y tienda con un look mucho más profesional! Gracias de nuevo por tu ayuda.