Estilizar insignias de descuento con degradados modernos

felix_vlc69

Estoy intentando que las insignias de descuento y las banderas de producto (como 'Oferta' o 'Nuevo') se vean como píldoras modernas con degradados y sombras suaves en las miniaturas de producto. He añadido este CSS en themes/classic/assets/css/custom.css, pero parece que el tema Classic tiene reglas !important muy fuertes que me impiden cambiar el background-color y la forma. Además, la alineación dentro de la tarjeta del producto es un poco complicada. ¿Alguna idea de cómo anular esto correctamente?

Aquí tenéis lo que he intentado:

.product-miniature .product-price-and-shipping .discount-percentage {
  background-color: #ff0000; /* Esto no se aplica bien */
  border-radius: 15px;
  padding: 3px 8px;
  color: white;
}
.product-flag {
  background-color: #0000ff; /* Igual, overrideado por el tema */
  border-radius: 15px;
}

natalia_lab

Hola @felix_vlc69, ese problema con los !important es un clásico en el tema Classic. Suele pasar que las reglas CSS del core son muy específicas o usan !important y cuesta mucho sobreescribirlas. ¿En qué versión de PrestaShop estás? Sería bueno para saber si hay algún cambio de selector. ¿Has revisado con las herramientas de desarrollador qué reglas están aplicando y cuál tiene más especificidad?

felix_vlc69

@natalia_lab, estoy en PrestaShop 8.2.8, usando el tema Classic, por supuesto. Sí, he estado mirando con el inspector del navegador y veo que la regla del tema product-flag.discount o badge-discount tiene un background-color con !important que me anula cualquier intento de degradado. Necesito una forma de darle más peso a mi CSS sin romper otras cosas. Y sí, la alineación sigue siendo un dolor de cabeza, a veces se superponen con los precios.

Milo

@felix_vlc69, el problema es la especificidad del selector y el uso de !important en el tema base. Para sobreescribir esto, necesitas un selector más específico o, como último recurso, usar !important también en tu custom.css junto con un selector adecuado. He combinado los selectores para las insignias de descuento y las banderas de producto. Añade esto a tu archivo custom.css:

.product-miniature .product-price-and-shipping .discount-percentage,
.product-miniature .product-flag {
  background: linear-gradient(45deg, #ff6b6b, #ee2b2b) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 4px 10px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: inline-block;
  white-space: nowrap;
  margin-right: 5px;

Con esto deberías ver los degradados. He añadido un linear-gradient para el fondo, un border-radius para la forma de píldora, padding para el espacio, box-shadow para el efecto de profundidad y white-space: nowrap para evitar que el texto se rompa en varias líneas.

felix_vlc69

¡Gracias @Milo! La verdad es que el degradado y la forma de píldora ahora se ven genial. Mucho mejor que antes. Pero he notado que el texto dentro de la insignia ('-10%', 'Nuevo') no siempre se ve bien, a veces el color no contrasta lo suficiente con el degradado o el espaciado interior es un poco apretado. Parece que el color: #fff !important; no lo pilla del todo para algunos elementos internos o hay un conflicto con el line-height.

Milo

@felix_vlc69, entiendo. A veces los elementos span o strong dentro de esas insignias tienen sus propias reglas de color o line-height que necesitan ser abordadas. Vamos a refinar el CSS para asegurar que el color del texto sea siempre visible y el espaciado interno sea adecuado. Actualiza tu custom.css con esto, reemplazando lo anterior:

.product-miniature .product-price-and-shipping .discount-percentage,
.product-miniature .product-flag {
  background: linear-gradient(45deg, #ff6b6b, #ee2b2b) !important;
  color: #fff !important; /* Aseguramos el color principal */
  border-radius: 20px !important;
  padding: 4px 10px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: inline-block;
  white-space: nowrap;
  margin-right: 5px;

He añadido line-height: 1.2; para un mejor centrado vertical del texto y text-transform: uppercase; para uniformar la apariencia. Además, he añadido una regla específica para los span dentro de las insignias, que suelen contener el texto real del descuento o la bandera, para asegurarnos de que el color blanco se aplique sin problemas. Pruébalo y dime qué tal.

felix_vlc69

¡Perfecto! El texto ahora se ve de lujo, el color y el espaciado son ideales. Pero, como decía antes, en móviles las insignias a veces se amontonan o incluso se superponen con el precio o el nombre del producto en la miniatura. Necesito que sean un poco más 'flexibles' o que se reorganicen bien en pantallas pequeñas para que no se vea desordenado.

felix_vlc69

¡Genial! Los ajustes para móviles funcionan mucho mejor, ahora no se amontonan y se adaptan bastante bien. Solo he notado una pequeña cosa: la insignia 'Últimos artículos' (o product-flag.last-items) no se alinea perfectamente verticalmente con las demás en la misma fila en ciertas resoluciones. Es una tontería, pero ya puestos a dejarlo perfecto...

Milo

@felix_vlc69, buena observación. En dispositivos móviles, el espacio es limitado y la superposición es un problema común. Podemos ajustar el display del contenedor de las insignias o sus propios márgenes dentro de una media query. Añade esto a tu custom.css para manejar la responsividad:

/* Ajustes para pantallas más pequeñas */
@media (max-width: 767px) {
  .product-miniature .product-price-and-shipping .discount-percentage,
  .product-miniature .product-flag {
    margin-right: 3px !important; /* Menos espacio entre insignias */
    margin-bottom: 3px !important;
    font-size: 0.85em !important; /* Texto un poco más pequeño */
    padding: 3px 8px !important;
    flex-shrink: 0; /* Evita que se encojan demasiado */
  }

He añadido una media query para pantallas de hasta 767px (típico para móviles). Dentro de esta, reducimos un poco el margin y el font-size de las insignias para que ocupen menos espacio. Lo más importante es que he añadido display: flex; y flex-wrap: wrap; al contenedor de las insignias (.product-price-and-shipping). Esto permite que las insignias se coloquen en varias líneas si no caben en una sola, evitando la superposición. flex-shrink: 0; evita que se compriman de forma no deseada.

Milo

@felix_vlc69, entiendo la búsqueda de la perfección 😉 Ese tipo de desajustes sutiles pueden ocurrir por diferencias en el contenido o altura de línea de banderas específicas. Para asegurarnos de que todas las insignias se alineen verticalmente de forma consistente, podemos añadir una propiedad vertical-align y revisar el display del contenedor. Prueba con este ajuste final, agregándolo a tu custom.css:

.product-miniature .product-flag {
  vertical-align: middle !important; /* Asegura alineación vertical */
  display: inline-flex !important; /* Flex para mejor control interno */
  align-items: center; /* Centra contenido verticalmente */
  justify-content: center; /* Centra contenido horizontalmente */
}
/* Ajuste adicional para el contenedor de todas las insignias, si es necesario */
.product-miniature .product-flags {
  display: flex;
  flex-wrap: wrap;

He añadido vertical-align: middle !important; directamente a la regla .product-miniature .product-flag para forzar esa alineación. Además, he cambiado el display a inline-flex y he usado align-items: center y justify-content: center para centrar el contenido (texto/iconos) dentro de cada píldora de forma más robusta. También he añadido una regla para el contenedor .product-flags (si tu tema lo usa para agruparlas) para usar flex con gap y un margin-top para separarlo si es necesario. Esto debería resolver cualquier desalineación menor.

felix_vlc69

¡Madre mía, @Milo, eres un crack! Con esos últimos retoques, todo está PERFECTO. Las insignias se ven modernas, con el degradado, la forma de píldora, el texto se lee genial y la responsividad es impecable en cualquier dispositivo. No hay ninguna superposición ni desalineación. ¡Muchísimas gracias por tu ayuda tan detallada y por la paciencia! Doy el tema por resuelto.