Estilo acordeón para pestañas de descripción de producto

mariobici

Hola a todos,

Estoy intentando modernizar la página de producto en mi tienda. El tema Classic tiene las típicas pestañas de descripción, detalles, etc. Me gustaría que estas pestañas se comportaran y se vieran como un acordeón colapsable, especialmente en móvil, con un icono de chevron que gire al abrirse.

He intentado algunas cosas en themes/classic/assets/css/custom.css para cambiar la apariencia, pero me cuesta con la transición suave y evitar el salto del borde del panel activo. Esto es lo que tengo hasta ahora, es una mezcla de intentos para ocultar los bordes de las pestañas y darles un aspecto de botón, pero no funciona bien como acordeón ni en las transiciones:

.product-information .nav-tabs {
    border: none;
    flex-direction: column; /* Intento de apilar las pestañas */
}
.product-information .nav-item .nav-link {
    border: 1px solid #ddd;
    margin-bottom: -1px;
    background-color: #f8f8f8;
    color: #333;
    font-weight: bold;

El principal problema es que el borde inferior del nav-link.active salta cuando una pestaña se activa, y las transiciones de altura en móvil son muy bruscas. ¿Alguna idea de cómo lograr un estilo de acordeón más pulido con CSS para PrestaShop 1.7?

fernando_iberia

Hola @mariobici,

Entiendo perfectamente lo que buscas. Ese comportamiento de salto de borde es muy común cuando se intenta modificar los estilos de Bootstrap por defecto sin anular bien las propiedades. Para tener un acordeón real, normalmente se necesita algo de JavaScript para manejar el toggle de las clases active y las transiciones de altura, ya que height: auto no se anima.

Pero si tu idea es que visualmente parezca un acordeón colapsable y las pestañas ya manejan la visibilidad con la clase active y fade in, puedes mejorar mucho el CSS. ¿Qué versión exacta de PrestaShop estás usando? En algunas versiones de 1.7 el comportamiento de Bootstrap puede variar ligeramente, pero el custom.css es el lugar correcto para intentar esto.

Milo

Hola @mariobici,

Gracias por la aclaración. Tal como menciona @fernando_iberia, para una funcionalidad de acordeón completa con animaciones de altura perfectas, lo ideal sería un toque de JavaScript. Sin embargo, podemos lograr un "look and feel" de acordeón muy convincente y solucionar el problema del salto de borde solo con CSS, mejorando las transiciones y la estética de los chevrons.

El problema del salto de borde se debe a que estás modificando el border-bottom-color del elemento activo. En su lugar, podemos usar un pseudo-elemento para el "borde" o simplemente asegurar que los bordes se mantengan consistentes y el fondo cambie. Para la animación de altura, podemos usar max-height con una transición, aunque no será perfecto si el contenido es muy variable, pero es lo mejor que se puede hacer solo con CSS para un efecto de "colapso".

Aquí tienes un fragmento de CSS que puedes añadir a tu themes/classic/assets/css/custom.css. Asegúrate de eliminar tus intentos anteriores para evitar conflictos:

.product-information .nav-tabs {
    border: none;
    flex-direction: column;
}
.product-information .nav-item {
    margin-bottom: 5px; /* Espacio entre los paneles */
}
.product-information .nav-link {
    display: flex;
    justify-content: space-between;

Explicación de los cambios:

flex-direction: column; en .nav-tabs: Esto apila las pestañas verticalmente.
display: flex y justify-content: space-between en .nav-link: Permite alinear el texto de la pestaña y el icono de chevron en los extremos opuestos.
Bordes y margin-bottom en .nav-item: Agrega un pequeño espacio entre cada "header" de acordeón para que no se peguen.
::after para el chevron: Utilizamos un pseudo-elemento con un icono de Font Awesome (asegúrate de que esté cargado en tu tema) para la flecha. La transición transform le da el giro suave.
nav-link.active: Cambia el color de fondo, texto y borde para indicar que está activo. Los border-radius se ajustan para que el panel de contenido se vea conectado.
tab-content y tab-pane.active: Aquí está la clave para la animación de "colapso". Establecemos un max-height: 0 y overflow: hidden por defecto, con una transición. Cuando el tab-pane se vuelve active, le damos un max-height grande (ajusta 1000px si tienes contenido muy largo) para que se "despliegue" suavemente. Esto mitiga el problema de la altura variable.

Con esto, deberías tener un comportamiento visual mucho más parecido a un acordeón y solucionar los saltos de borde.

mariobici

¡Increíble, @Milo! ¡Muchísimas gracias! He probado tu CSS en custom.css y funciona genial.

El salto de borde ha desaparecido por completo y la animación del chevron es justo lo que buscaba. La solución con max-height para el contenido es muy inteligente y, aunque no es un acordeón full JS, para mis necesidades con el Classic theme es más que suficiente y se ve muy profesional. Incluso la transición en móvil es mucho más suave.

¡Problema resuelto, de verdad, un gran alivio! Gracias de nuevo.