Ajuste de cuadrícula y layout en página de producto Classic

mariaiberia59

¡Hola a todos!

Estoy intentando modificar el layout de la página de producto en PrestaShop 8.2.6, usando el tema Classic. Quiero reestructurar la sección donde se muestran la descripción y los detalles del producto para que ocupen un ancho mayor, ajustando las columnas de Bootstrap.

He intentado sobrescribir el product.tpl en mi tema hijo, pero parece que las clases de Bootstrap no se aplican como espero o hay algo que se me escapa con la herencia. Mi objetivo es que la descripción ocupe 8 columnas y los detalles del producto (como atributos o módulos extra) las 4 restantes, en lugar de la distribución por defecto.

Este es un fragmento de lo que tengo en mi themes/mi_tema_hijo/templates/catalog/product.tpl:

{block name='page_content'}
  <div class="row product-container js-product-container">
    <div class="col-md-6 col-lg-7">
      {block name='product_cover_thumbnails'}
        {include file='_partials/product-cover-thumbnails.tpl'}
      {/block}
    </div>
    <div class="col-md-6 col-lg-5">
      {block name='product_prices'}{/block}
      {block name='product_add_to_cart'}{/block}

Quiero que la product-extra-content se divida en dos columnas, por ejemplo, una col-md-8 para la descripción y una col-md-4 para otra información. Pero si simplemente cambio las clases, se desorganiza o no hereda bien. ¿Alguna idea de cómo debería estructurar esto correctamente para que funcione la cuadrícula de Bootstrap 4 en mi tema hijo?

fernando_iberia

@mariaiberia59 entiendo perfectamente el problema. El tema Classic usa Bootstrap 4, y a veces la herencia de bloques Smarty puede ser un poco confusa si no se sobrescribe el bloque exacto.

Para modificar esa sección product-extra-content, primero asegúrate de que estás sobrescribiendo los bloques correctos dentro del product.tpl o el archivo que realmente renderiza esa parte (a veces está en un _partials anidado). En el Classic, la descripción larga y los datos del producto suelen estar dentro de un bloque product_tabs o similar, que luego usa un componente de Bootstrap como nav-tabs o accordion.

Si solo cambias col-md-12 a col-md-8 o col-md-4 directamente, puede que no veas el efecto esperado porque el bloque padre sigue definiendo el ancho o hay estilos CSS que lo sobrescriben. ¿Has revisado si la descripción larga y los atributos se renderizan dentro de un div con alguna clase específica en el product-details.tpl o product-additional-info.tpl? A veces es más fácil sobrescribir un _partials más granular.

Milo

Hola @mariaiberia59,

@fernando_iberia tiene razón, el truco está en identificar el bloque Smarty exacto y su contenedor. En PrestaShop 8.2.6 con el tema Classic, la descripción larga y la información adicional del producto (atributos, reseñas, etc.) se gestionan generalmente dentro del bloque product_tabs que está en themes/classic/templates/catalog/_partials/product-details.tpl y luego se incluye en product.tpl.

Para lograr tu objetivo de dividir la sección de contenido extra en col-md-8 y col-md-4 en el product.tpl de tu tema hijo, deberías sobrescribir el bloque page_content_container o product_footer y reorganizar los bloques product_description_full y product_additional_info dentro de tu propia estructura de filas y columnas de Bootstrap.

Aquí tienes una forma de hacerlo directamente en tu themes/mi_tema_hijo/templates/catalog/product.tpl, asumiendo que quieres que la descripción completa y las pestañas se muestren en dos columnas debajo de la sección principal del producto:

{extends file='parent:catalog/product.tpl'}
{block name='page_content_container'}
  <section class="page-content" id="content">
    <div class="row">
      <div class="col-md-8">
        {block name='product_description_full'}
          {$product.description nofilter}
        {/block}
      </div>
      <div class="col-md-4">

Explicación de los cambios:

{extends file='parent:catalog/product.tpl'}: Esto es crucial para indicar que tu plantilla está extendiendo la plantilla padre y solo sobrescribirá los bloques que definas.
{block name='page_content_container'}: En lugar de sobrescribir page_content directamente, que es muy amplio, nos centramos en el contenedor de contenido principal. Aquí es donde redefinimos la estructura de la fila.
div class="row" y div class="col-md-8", div class="col-md-4": Estas son las clases estándar de Bootstrap 4 para crear un diseño de dos columnas. col-md-8 para dispositivos medianos y superiores, col-md-4 para los restantes.
{block name='product_description_full'}: Este bloque contiene la descripción larga del producto. Lo colocamos dentro de la columna de 8.
{block name='product_additional_info'}: Este bloque incluye las pestañas (atributos, reseñas, etc.) que se definen en product-additional-info.tpl. Lo colocamos en la columna de 4.

Con esto, deberías ver la descripción y la información adicional distribuidas en dos columnas bajo la sección principal del producto. Recuerda que siempre debes compilar las plantillas de tu tema hijo o limpiar la caché de Smarty para ver los cambios.

mariaiberia59

¡Increíble, @Milo! ¡Muchísimas gracias!

No se me había ocurrido extender el page_content_container directamente. Había estado intentando con otros bloques más genéricos y por eso no me funcionaba la cuadrícula correctamente. El extends file='parent:catalog/product.tpl' también fue clave, lo tenía, pero el bloque a sobrescribir era el incorrecto.

He aplicado tu código y, después de limpiar la caché de Smarty, el layout se ve perfecto con la distribución de 8 y 4 columnas. ¡Esto me ahorra un montón de tiempo!

¡Gracias de nuevo por la ayuda tan específica y detallada!