Personalizar diseño de página de producto en tema Classic

gonzaloshop

Hola a todos,

Estoy intentando modificar la página de producto de mi tienda PrestaShop 1.7.8.6 (tema Classic) y me estoy volviendo un poco loco con la estructura. Quiero mover algunos bloques de información, como la descripción corta, a otra columna o ajustar el tamaño de las columnas principales (imagen de producto vs. información de producto).

He creado un tema hijo y estoy intentando sobrescribir themes/classic/templates/catalog/product.tpl. Mi idea era cambiar la estructura de la rejilla de Bootstrap, pero parece que no se aplica bien o me genera conflictos. Aquí está lo que intenté en mi tema hijo:

{block name='page_content_container'}
  <section class="page-content" id="content">
    <div class="row product-container">
      <div class="col-md-7 col-sm-12 col-xs-12">
        {block name='page_content'}
          {include file='_partials/product-cover-thumbnails.tpl'}
        {/block}
      </div>
      <div class="col-md-5 col-sm-12 col-xs-12">
        {block name='page_header_container'}{/block}

Al aplicar esto, la página se desordena y no respeta los col-md-7 y col-md-5 como esperaba. ¿Alguien sabe cómo se debe hacer correctamente o si hay algún hook que deba usar para esto sin tener que tocar el product.tpl directamente?

samuel_lab

Buenas @gonzaloshop, entiendo tu frustración. El tema Classic usa Bootstrap 4, no Bootstrap 5, y a veces la estructura de las plantillas es un poco engañosa con los bloques de Smarty.

El problema que describes suele ocurrir porque estás sobrescribiendo el bloque page_content_container completo, y dentro de él, vuelves a llamar a otros bloques que ya existen en el padre (product.tpl original). Esto puede crear una duplicidad o un conflicto con el CSS existente del tema padre. Además, el product.tpl principal no es donde se definen directamente las columnas de imagen y detalles del producto. Esas se suelen gestionar en bloques más internos o mediante el CSS del tema.

¿Estás seguro de que tu custom.css del tema hijo está cargando correctamente y no hay ninguna regla que anule tus cambios de Bootstrap? A veces, hay que ser muy específico con los selectores de CSS para que tengan prioridad.

Milo

Hola @gonzaloshop,

@samuel_lab tiene razón, el product.tpl en el tema Classic es más un orquestador de bloques que el que define la rejilla principal de imagen vs. detalles. El layout de columnas para la imagen del producto y la información suele estar dentro de themes/classic/templates/catalog/_partials/product-images-modal.tpl (para la parte de la imagen) y themes/classic/templates/catalog/_partials/product-prices.tpl, product-add-to-cart.tpl, etc., para la información. La estructura principal de columnas se maneja a un nivel superior, generalmente con col-md-6 o col-lg-6 envueltos en un row.

Tu enfoque de sobrescribir product.tpl es correcto para el tema hijo, pero el problema es que estás redefiniendo el contenido del page_content_container y no estás llamando al _partials/product-cover-thumbnails.tpl de la forma correcta para mantener la herencia o para que se renderice dentro del contexto de columnas que quieres.

Para ajustar las columnas de la página de producto, lo más efectivo es modificar el CSS o, si necesitas un control más granular, sobrescribir product.tpl pero asegurándote de que llamas a los bloques product_cover_thumbnails y product_information dentro de tus propias columnas. Así es como podrías reestructurar tu product.tpl en el tema hijo para que la imagen ocupe 7 columnas y la información 5, con la descripción corta movida:

{extends 'catalog/product.tpl'}
{block name='page_content_container'}
  <section class="page-content" id="content">
    <div class="row product-container">
      <div class="col-md-7 col-sm-12 col-xs-12">
        {block name='product_cover_thumbnails'}
          {include file='_partials/product-cover-thumbnails.tpl'}
        {/block}
      </div>
      <div class="col-md-5 col-sm-12 col-xs-12 product-information-wrapper">

Con esto, extiendes la plantilla original y solo redefines el page_content_container para establecer la rejilla. Dentro de cada columna, llamas a los bloques específicos que quieres. El product_description_short lo he movido explícitamente a la segunda columna. Recuerda también vaciar la caché de Smarty después de hacer cambios en las plantillas.

gonzaloshop

¡Increíble @Milo! ¡Muchísimas gracias! La clave era la forma de extender la plantilla y luego llamar a los bloques específicos dentro de mis propias columnas. No se me había ocurrido llamar directamente a los bloques de esa manera dentro de la nueva estructura de row y col.

He aplicado el snippet en mi product.tpl del tema hijo, he vaciado la caché y ahora la página de producto se ve exactamente como quería. La descripción corta está en el lugar correcto y las columnas de la imagen y la información tienen el ancho adecuado. ¡Problema resuelto!