Estilo de etiquetas de stock con iconos en Classic

jorge8975

¡Hola a todos!

Estoy intentando dar un toque más moderno a las etiquetas de disponibilidad de stock en la página de producto de mi tienda (PrestaShop 1.7.7.3, tema Classic). Quiero que aparezcan con un fondo pastel, un pequeño punto de color al lado del texto y que el texto del estado (En stock, Poco stock, Bajo pedido) esté bien alineado con el icono.

He estado trasteando con el custom.css, pero me encuentro con que el icono que viene por defecto del tema (el tick verde o la exclamación) no se alinea bien verticalmente con el texto, y mis fondos no quedan como quiero, o los colores no aplican bien a todos los estados. Este es mi intento actual en themes/classic/assets/css/custom.css:

.product-availability span {
  padding: 5px 10px;
  border-radius: 5px;
  font-weight: 600;
  margin-bottom: 10px;
  display: inline-block;
}
.product-availability .product-available {
  background-color: #e6ffe6;
  color: #28a745;

¿Alguna idea de cómo puedo mejorar esto para que los iconos se vean bien y pueda añadir esos puntos de color?

samuel_es

Hola @jorge8975, entiendo perfectamente el problema. El tema Classic a veces es un poco quisquilloso con la alineación vertical de los elementos inline, especialmente cuando hay un <i> para el icono y un <span> para el texto dentro de otro <span> padre.

Para los puntos de color, una buena opción es usar pseudo-elementos (::before). Así puedes controlar el tamaño, color y posición del punto de forma independiente al texto. ¿Has probado a usar display: flex y align-items: center en el span principal de la disponibilidad? Eso suele arreglar la alineación vertical de golpe.

valeriamadrid

Confirmando lo que dice @samuel_es, la solución con flexbox es la más limpia para esto. También, asegúrate de que estás apuntando a las clases correctas. PrestaShop 1.7 tiene clases bastante específicas para cada estado de stock (product-available, product-last-items, product-out-of-stock). A veces, si no las sobreescribes con suficiente especificidad, otros estilos del tema pueden estar entrando en conflicto. También es importante ver si tienes algún otro CSS que esté aplicando line-height o vertical-align que pueda estar interfiriendo.

Milo

Hola @jorge8975,

El problema de la alineación vertical es clásico en PrestaShop 1.7 con el tema Classic debido a cómo se combinan iconos y texto. La solución más robusta y limpia es usar Flexbox en el contenedor de cada etiqueta de stock y los pseudo-elementos ::before para los puntos de color. Esto asegura que el icono, el punto y el texto estén perfectamente alineados.

Aquí te dejo el código que deberías añadir a tu archivo themes/classic/assets/css/custom.css. He modificado tus reglas existentes y añadido los puntos:

.product-availability span {
  display: inline-flex; /* Usamos flexbox para alinear contenido */
  align-items: center; /* Centra verticalmente los elementos */
  padding: 5px 10px;
  border-radius: 5px;
  font-weight: 600;
  margin-bottom: 10px;
  gap: 8px; /* Espacio entre el punto/icono y el texto */
}
.product-availability span::before { /* Pseudo-elemento para el punto de color */

Explicación de los cambios:

.product-availability span: He añadido display: inline-flex y align-items: center. Esto convierte el span en un contenedor flexible que alinea automáticamente sus elementos hijos (el icono <i>, el pseudo-elemento ::before y el texto) verticalmente en el centro. gap: 8px añade un espacio uniforme entre ellos.
::before Pseudo-elemento: Se crea un círculo (border-radius: 50%) de 8x8px antes del contenido del span. Su color de fondo se define más abajo para cada estado.
Estilos específicos por estado: Para cada clase (.product-available, .product-last-items, .product-out-of-stock, y también .product-unavailable por si acaso), he definido el background-color para el fondo pastel de la etiqueta y el color para el texto. Luego, he aplicado el mismo color al background-color del ::before para que el punto coincida con el texto.
line-height: 1 para i: A veces los iconos tienen un line-height que los desalinea. Con esto nos aseguramos que no añada altura extra.

Después de añadir esto, borra la caché de tu PrestaShop (Rendimiento -> Vaciar caché) y la caché de tu navegador. Deberías ver tus etiquetas de stock con un estilo consistente y los elementos perfectamente alineados.

jorge8975

¡Increíble! Muchísimas gracias, @Milo. El código funciona a la perfección. Mis etiquetas de stock ahora se ven exactamente como quería, con los fondos pastel, los puntos de color y, lo más importante, los iconos y el texto están perfectamente alineados. La explicación de los cambios y el uso de display: inline-flex y ::before es muy clara.

¡Un trabajo excelente! Problema resuelto.