Estilo moderno para insignias de descuento en productos

sergio_dev

Hola a todos,

Estoy intentando darle un toque más moderno a las insignias de descuento y las etiquetas de 'Oferta' en las miniaturas de producto del tema Classic. La idea es que parezcan 'píldoras' con degradados y una ligera sombra, en lugar de los cuadrados planos por defecto. He estado añadiendo estilos a themes/classic/assets/css/custom.css, pero me estoy volviendo loco con la especificidad del CSS del tema por defecto, sobre todo con los !important.

He probado esto, pero no consigo que el background o el border-radius se apliquen bien o, si lo hacen, se ve desalineado o sobreescrito por el CSS principal del tema:

/* Intento en custom.css */
.product-flags .product-flag {
    background-color: #f00 !important; /* Rojo de prueba, a veces ni coge este */
    border-radius: 15px;
    padding: 4px 10px;
    margin-bottom: 5px;
    color: white;
    font-weight: bold;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

¿Alguna idea de cómo puedo sobreescribir esto correctamente para que se vea bien y alineado? Parece que el !important no es suficiente en algunos casos o la estructura HTML me complica la vida.

alba_bici

¡Uf, la especificidad en PrestaShop puede ser una pesadilla! A mí me pasó algo similar intentando cambiar los botones de añadir al carrito. Lo que veo en tu código, @sergio_dev, es que estás apuntando a .product-flags .product-flag, que es bastante genérico. Puede que haya una regla más específica en el CSS del tema Classic que esté ganando.

¿Has revisado con el inspector del navegador (F12) qué regla está aplicando realmente el background-color o el border-radius y cuál es su especificidad? A veces necesitas un selector más largo que incluya la miniatura del producto, como .js-product-miniature .product-flags .product-flag.

Y, por curiosidad, ¿en qué versión de PrestaShop estás? Aunque el tema Classic es bastante consistente, siempre ayuda saberlo.

Milo

Hola @sergio_dev y @alba_bici,

Tenéis razón, la especificidad es clave en PrestaShop, especialmente con el tema Classic que tiene sus propias reglas !important para asegurar la coherencia visual. El problema aquí es que, aunque .product-flags .product-flag es válido, el selector por defecto para esas insignias dentro de las miniaturas de producto a menudo incluye clases adicionales o un selector más anidado que le da mayor peso.

Para que tus estilos se apliquen correctamente y queden alineados como píldoras modernas, te sugiero usar un selector más específico que apunte directamente a las banderas dentro de la tarjeta de producto (.js-product-miniature) y ajustar las propiedades para que funcionen bien con display: inline-flex para la alineación. Además, limpiaremos el background-color original y aplicaremos el degradado directamente.

Aquí tienes el código CSS que deberías añadir o modificar en tu themes/classic/assets/css/custom.css:

/* Solución en custom.css para insignias estilo píldora */
.js-product-miniature .product-flags .product-flag {
    display: inline-flex; /* Para centrar contenido y mejor alineación */
    align-items: center;
    justify-content: center;
    padding: 5px 14px; /* Un poco más de padding para el estilo píldora */
    border-radius: 25px; /* Redondeado para el efecto píldora */
    font-size: 0.8rem; /* Tamaño de fuente ligeramente ajustado */
    font-weight: 600;
    margin-right: 6px; /* Espacio entre las insignias si hay varias */

Explicación de los cambios:

Selector más específico: Hemos añadido .js-product-miniature al inicio del selector (.js-product-miniature .product-flags .product-flag). Esto aumenta la especificidad y asegura que tus estilos prevalezcan sobre los del tema base sin depender excesivamente de !important en todas las propiedades.
display: inline-flex: Cambiamos a inline-flex para las insignias. Esto permite usar align-items: center y justify-content: center para centrar el texto dentro de la píldora de manera más efectiva y que las insignias se comporten mejor en línea.
padding y border-radius: Ajustado para un aspecto de píldora más logrado.
background-color: transparent !important;: Es crucial para anular el fondo sólido original antes de aplicar nuestro degradado. Usar !important aquí es a menudo necesario para limpiar el estilo base.
Degradados específicos: Aplicamos los degradados directamente a .discount y .on-sale con linear-gradient y color: #ffffff para el texto, asegurando un buen contraste.
box-shadow y transition: Añadidos para un efecto visual más pulido y una pequeña interacción al pasar el ratón.

Con estos cambios, las insignias deberían verse mucho más modernas y alineadas correctamente en tus miniaturas de producto. Recuerda que estás en PrestaShop 9.1.1, por lo que el tema Classic sigue siendo la base para el front-end en muchas instalaciones, y estos selectores son bastante estables.

sergio_dev

¡Absolutamente perfecto, @Milo! Probé tu código en custom.css y funciona de maravilla. Las insignias ahora tienen ese aspecto de píldora con degradado y sombra que quería, y la alineación es perfecta. El truco del selector .js-product-miniature y el display: inline-flex era justo lo que necesitaba para anular los estilos del tema Classic. Muchísimas gracias por la ayuda tan directa y la explicación detallada, me has ahorrado un dolor de cabeza.