Estilizar la tarjeta de confirmación de pedido

alberto_lab

Hola a todos,

Estoy intentando darle un lavado de cara a la página de confirmación de pedido. El diseño actual es un poco soso y me gustaría tener una tarjeta de agradecimiento más limpia, con separadores sutiles y que la referencia del pedido destaque más. También es importante que se vea bien si el cliente decide imprimir el recibo.

He estado trasteando con el custom.css de mi tema Classic, pero no consigo que quede como quiero, y tengo miedo de romper la vista de impresión. Esto es lo que he intentado hasta ahora para la tarjeta y los detalles:

.order-confirmation-page .card {
    border: 1px solid #eee;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.order-confirmation-page .order-details {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

El border-top para los detalles no se ve muy bien, y el order-reference no destaca lo suficiente. ¿Alguna idea de cómo puedo mejorar esto, especialmente pensando en la impresión?

ruben_digital62

¡Qué tal, @alberto_lab!

Entiendo perfectamente lo que buscas. En PrestaShop 1.7, a veces las clases de Bootstrap o las del propio tema Classic tienen una especificidad muy alta, y tus estilos personalizados pueden no aplicarse como esperas. ¿En qué versión exacta de PrestaShop 1.7 estás? Es un detalle importante, porque aunque dices 1.7, hay pequeñas diferencias entre las versiones que podrían afectar cómo se renderiza el CSS.

Para el border-top, si quieres un separador más sutil, podrías probar con border-top: 1px dashed #ddd; para ver si te gusta el efecto. Y para la referencia, a veces un background-color suave con un poco de padding ayuda a que resalte sin ser demasiado agresivo. Asegúrate también de que tu custom.css se esté cargando al final para que tus estilos tengan prioridad.

Milo

Hola @alberto_lab y @ruben_digital62,

Efectivamente, como comenta @ruben_digital62, la especificidad del CSS en el tema Classic de PrestaShop 1.7.0.3 (asumo que es la versión, si no me corriges) es clave. La configuración de los márgenes y bordes por defecto a veces anula lo que intentamos. Para conseguir ese look de tarjeta con separadores punteados y la referencia destacada, podemos usar una combinación de propiedades y un bloque para impresión.

Aquí te propongo un código para themes/classic/assets/css/custom.css. He añadido más detalle y considerado la impresión:

.order-confirmation-page .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    background-color: #ffffff;
    margin-bottom: 30px;
}
.order-confirmation-page .order-details > div {
    margin-top: 20px;

Explicación de los cambios:

.order-confirmation-page .card: Aumentamos padding, añadimos border-radius, una sombra más pronunciada y un background-color blanco para que realmente parezca una tarjeta flotante. El margin-bottom la separa mejor del contenido inferior.
.order-confirmation-page .order-details > div: Este selector aplica un border-top: 1px dashed #e0e0e0; a cada sección de detalles dentro de la tarjeta, creando los separadores punteados. El margin-top y padding-top dan espacio.
.order-confirmation-page .order-details > div:first-child: Reseteamos el borde superior para la primera sección de detalles, ya que no necesita un separador antes de ella.
.order-confirmation-page .order-reference: Le damos un font-weight: 700 (negrita), un font-size ligeramente mayor, un color distintivo, y un background-color suave. El padding y border-radius lo hacen parecer una etiqueta, y display: inline-block asegura que el padding se aplique correctamente. margin-bottom lo separa del texto siguiente.
@media print: Dentro de este bloque, anulamos las sombras para impresión, ajustamos los colores a tonos de gris y bordes sólidos para una mejor visibilidad en papel. Así no se gastará tanta tinta y el diseño será más funcional al imprimirse.

alberto_lab

¡Genial, @Milo! Muchísimas gracias por el código detallado. Justo lo que necesitaba, me has dado en el clavo con los estilos y la consideración para la impresión.

He aplicado tu CSS a mi custom.css (sí, estoy en PrestaShop 1.7.0.3, @ruben_digital62, disculpa por no especificarlo antes) y se ve fantástico. La tarjeta tiene un aspecto mucho más profesional, los separadores punteados son perfectos y la referencia del pedido destaca elegantemente. Y lo de @media print es un detalle que no había logrado pulir, ¡excelente!

Problema resuelto, de verdad, muy agradecido por tu ayuda.