Estilo de la tarjeta de recibo en confirmación

luciasevilla

¡Hola a todos!

Estoy intentando darle un aire más profesional y limpio a la página de confirmación de pedido en mi tienda. En concreto, me gustaría que la tarjeta de recibo (donde aparece el número de pedido, el total, etc.) tenga un diseño más tipo tarjeta de agradecimiento, con algunos divisores punteados sutiles y que el número de referencia del pedido esté bien resaltado.

He estado trasteando en themes/classic/assets/css/custom.css pero me encuentro con dos problemas: los divisores punteados no acaban de quedar bien y, lo que es peor, al imprimir la página, los estilos se desordenan o no se aplican correctamente, perdiendo la estética de la tarjeta.

Este es un fragmento de lo que he intentado:

.order-confirmation-page .order-confirmation-card {
  border: 1px solid #eee;
  padding: 15px;
  background-color: #f9f9f9;
}
.order-confirmation-page .order-reference {
  font-weight: bold;
  color: #333;
  border-bottom: 1px dotted #ccc; /* Divisor punteado */
}

¿Alguien sabe cómo puedo conseguir un diseño elegante y que sea compatible con las hojas de estilo de impresión para que no se vea roto?

javierdeco

Hola @luciasevilla,

Entiendo perfectamente lo que buscas. La página de confirmación a veces necesita ese toque extra de pulido. Por lo que veo en tu CSS, el border-bottom: 1px dotted #ccc; para el divisor punteado está bien, pero el problema con la impresión suele venir porque los navegadores aplican sus propios estilos por defecto o porque no se manejan bien las propiedades CSS de fondo o bordes.

¿Qué versión de PrestaShop estás utilizando? Porque en versiones como la 1.7.1.0, el tema Classic ya tiene algunos estilos base para impresión que a veces hay que sobrescribir explícitamente dentro de un bloque @media print para que no haya conflictos. También, a veces un !important es necesario en esos casos de impresión.

Milo

Hola @luciasevilla,

El problema que describes con la impresión es bastante común y @javierdeco tiene razón, la clave está en definir estilos específicos para cuando la página se va a imprimir. El tema Classic de PrestaShop 1.7.1.0 (que asumo que es tu versión por el contexto) necesita estas reglas para manejar bien el papel.

Para conseguir el efecto de tarjeta, los divisores punteados y asegurar la compatibilidad con la impresión, te propongo el siguiente código que puedes añadir a tu themes/classic/assets/css/custom.css. Este se enfocará en la referencia y su divisor, así como los ajustes para imprimir:

.order-confirmation-page .order-reference {
  color: #3f51b5; /* Color para destacar la referencia */
  border-bottom: 1px dashed #b0b0b0; /* Divisor punteado sutil */
  padding-bottom: 10px;
  margin-bottom: 15px;
}
@media print {
  .order-confirmation-page .order-reference {
    border-bottom-style: solid !important; /* Punteado a sólido al imprimir */
    border-color: #888 !important; /* Borde más visible en impresión */

Con estos ajustes, la referencia del pedido se verá resaltada con un color distintivo y un divisor punteado. El bloque @media print es crucial: sobrescribe el estilo del borde de la referencia para que sea solid al imprimir, evitando que el punteado se vea mal o desaparezca en papel, y asegura un border-color para su visibilidad. Recuerda que !important solo debe usarse en @media print o cuando sea estrictamente necesario para sobreescribir.

luciasevilla

¡Muchísimas gracias, @Milo! Ha funcionado a la perfección en mi PrestaShop 1.7.1.0.

He aplicado tu código en custom.css y ahora la tarjeta de confirmación tiene el aspecto profesional que quería, con los divisores punteados y la referencia destacada. Y lo mejor de todo es que al imprimir se ve genial, los bordes se adaptan muy bien. Me había olvidado por completo de la directiva @media print para esos casos tan específicos. ¡Qué alivio!

¡Un gran trabajo y gracias por la ayuda directa!