Estilo acordeón moderno para descripciones de producto

miriam_9651

¡Hola a todos!

Estoy intentando modernizar la página de producto de mi tienda (PrestaShop 1.7.8.4 con el tema Classic) y quiero cambiar las típicas pestañas de descripción y especificaciones por un diseño de acordeón más limpio y moderno. He estado jugando con el custom.css, pero me encuentro con dos problemas principales:

Salto de borde: Cuando un panel se activa, el borde cambia de color, pero parece que hay un pequeño salto o cambio de tamaño que no queda nada bien.
Animación de colapso en móvil: Para que los paneles se colapsen y expandan de forma suave, he intentado controlar la altura, pero la animación no es fluida, especialmente en dispositivos móviles. Parece que el height: auto y height: 0 no se llevan bien con las transiciones.

Este es mi intento actual en themes/classic/assets/css/custom.css:

/* Intento de acordeón para pestañas de producto */
#product #product-details .nav-tabs {
    display: none; /* Oculta las pestañas de navegación por defecto */
}
#product #product-details .tab-pane {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 15px;
    background-color: #fff;
    height: 0; /* Intento de colapso, pero no anima */

¿Alguien ha conseguido implementar un acordeón de forma elegante sin estos problemas? Cualquier ayuda sería genial.

raul_digital

Hola @miriam_9651,

Entiendo perfectamente tu frustración con el height: auto y las transiciones. Es un clásico problema en CSS, ya que no se puede transicionar de height: 0 a height: auto de forma directa y fluida. Bootstrap, que usa PrestaShop, maneja esto con su componente collapse usando la clase collapsing que establece la altura dinámicamente durante la transición, y luego height: auto con show.

Tu CSS oculta las pestañas y aplica estilos a los tab-pane, pero al forzar height: 0 y luego height: auto en .active, estás anulando la lógica de Bootstrap y por eso no hay animación. El salto de borde es probablemente por el cambio brusco de altura y el padding/margin que no se transicionan correctamente cuando el height se establece a auto.

En tu versión de PrestaShop (1.7.8.4), el tema Classic sigue usando Bootstrap 4. Deberías centrarte en cómo se añaden y quitan las clases collapse, collapsing y show a los paneles, y luego estilizar esas clases. ¿Has revisado si el JS de Bootstrap está gestionando ya el colapso de alguna forma en tu tema o estás intentando hacerlo todo con CSS?

Milo

Hola @miriam_9651, @raul_digital tiene razón en que el problema principal radica en cómo intentas controlar la altura. Para conseguir una animación suave y evitar el salto de borde, debemos alinear nuestro CSS con la forma en que Bootstrap maneja el colapso. La clave está en aplicar la transición a múltiples propiedades cuando el panel no está visible y dejar que Bootstrap gestione la altura durante la animación.

Aquí te propongo un código para themes/classic/assets/css/custom.css que debería resolver tus problemas. Lo he probado en una instalación similar de PS 1.7.8.x:

/* Solución de estilo acordeón para pestañas de producto */
#product #product-details .nav-tabs {
    display: none !important; /* Asegura que las pestañas no se muestren */
}
#product #product-details .tab-pane {
    border: 1px solid #e0e0e0;
    margin-bottom: 15px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 6px;

Explicación de los cambios:

display: none !important; en .nav-tabs: Esto asegura que las pestañas de navegación originales estén completamente ocultas, sin importar otras reglas.
transition: all 0.35s ease-in-out; en .tab-pane: Añade una transición general para propiedades como box-shadow o border-color cuando el panel está activo, suavizando esos cambios visuales y evitando el 'salto'.
#product #product-details .tab-pane.active.show: Este selector se aplica cuando el panel está visible y activo. Aquí definimos el border-color y un box-shadow más pronunciado para un efecto visual de 'elevación'.
#product #product-details .tab-pane.collapse:not(.show): Este es el cambio más importante. Cuando un panel está colapsado (tiene la clase collapse pero no la clase show), no solo establecemos height: 0 y overflow: hidden, sino que también anulamos padding, margin y border-width. Esto es crucial porque al eliminarlos, el contenido del panel se 'encoge' completamente y evita que el borde siga siendo visible o que el padding afecte la altura. También añadimos visibility: hidden y opacity: 0 para una desaparición completa.
Transiciones múltiples en .tab-pane.collapse:not(.show): Al transicionar height, opacity, padding, margin, border-width y visibility, logramos un efecto de colapso y desaparición muy suave, resolviendo el problema de la animación. El height es el que Bootstrap JS animará durante el estado collapsing.
#product #product-details .tab-pane.collapsing: Dejamos que Bootstrap maneje la transición de height en este estado, pero con una duración y función de tiempo consistente.

Con estos ajustes, el comportamiento debería ser mucho más fluido y visualmente agradable, tanto en escritorio como en móvil.

miriam_9651

¡Increíble, @Milo! Acabo de aplicar tu código en custom.css y funciona de maravilla. La animación de colapso es ahora súper suave y el problema del salto de borde ha desaparecido por completo. Se ve muy profesional en móvil.

Muchas gracias por la explicación detallada, especialmente por aclarar cómo interactúa con las clases de Bootstrap. Me ha ayudado mucho a entenderlo. ¡Problema resuelto!