Ajustar cuadrícula de productos y sobreescritura en Classic

silviaadmin

Hola a todos,

Estoy intentando ajustar la visualización de los productos en las páginas de categoría de mi tienda. Actualmente, se muestran en una cuadrícula de 3 columnas, y me gustaría que fueran 4 columnas para aprovechar mejor el espacio. He intentado modificar el archivo product-list.tpl en mi tema Classic, cambiando las clases de Bootstrap, pero no consigo que funcione correctamente.

Además, en las miniaturas de producto, quiero mover los atributos (tallas, colores) para que aparezcan justo debajo del precio y no más arriba como está por defecto. Sé que implica tocar el product.tpl pero no sé la mejor forma de hacerlo sin que se rompa algo.

Aquí tenéis un fragmento de cómo tengo el product-list.tpl ahora mismo, el col-md-4 es lo que quiero cambiar:

<div class="products row">
  {foreach from=$listing.products item="product"}
    <div class="js-product product col-xs-12 col-sm-6 col-md-4 col-lg-4"> {* Aquí quiero 4 columnas en lugar de 3, en desktop y tablets grandes *}
      {block name='product_miniature'}
        {include file='catalog/_partials/miniatures/product.tpl' product=$product}
      {/block}
    </div>
  {/foreach}
</div>

¿Alguna idea de cómo puedo conseguir esto para 4 columnas y también reubicar los atributos en la miniatura de producto?

maria96

Hola @silviaadmin,

Para empezar, ¿en qué versión de PrestaShop estás? Esto es clave porque la estructura de las plantillas y las clases de Bootstrap pueden variar un poco. Si estás en 1.7 con el tema Classic, lo ideal es que trabajes con un tema hijo (child theme). Si modificas directamente los archivos del tema Classic, cualquier actualización de PrestaShop o del tema borrará tus cambios.

Para las 4 columnas, aparte de cambiar col-md-4 a col-md-3, también deberías verificar si tienes alguna regla CSS en custom.css que esté forzando los anchos o max-width en esos elementos div.product. A veces el problema no es solo la clase de Bootstrap.

diego_admin

Confirmando lo que dice @maria96, el tema hijo es fundamental para no perder nada. En PrestaShop 1.7.6.2, que es lo más probable si usas Classic, el sistema de grid se basa en Bootstrap 3 (o una versión muy temprana de 4). Si solo cambias el col-md-4 a col-md-3, debería funcionar en teoría, pero a veces hay estilos sobreescritos o float que complican la cosa.

Para el movimiento de los atributos, dentro de miniatures/product.tpl, busca el bloque {block name='product_variants'}. Tendrás que cortarlo y pegarlo donde quieras que aparezca, asegurándote de que esté dentro de la sección correcta para no romper el HTML. Yo lo pondría justo después del {block name='product_price_and_shipping'}.

Milo

Hola @silviaadmin,

Entiendo perfectamente tu necesidad. Como ya han mencionado @maria96 y @diego_admin, es crucial que crees un tema hijo (child theme) del tema Classic para realizar estas modificaciones. Así garantizas que tus cambios no se pierdan con futuras actualizaciones de PrestaShop 1.7.6.2.

Una vez tengas tu tema hijo activado, copia los siguientes archivos a tu tema hijo, manteniendo la misma estructura de carpetas:

themes/classic/templates/catalog/listing/product-list.tpl
themes/classic/templates/catalog/_partials/miniatures/product.tpl

Para la cuadrícula de 4 columnas, debes modificar el archivo product-list.tpl en tu tema hijo. Cambia las clases col-md-4 y col-lg-4 por col-md-3 y col-lg-3 respectivamente:

<div class="products row">
  {foreach from=$listing.products item="product"}
    {* Cambiamos de 3 a 4 columnas en pantallas medianas y grandes *}
    <div class="js-product product col-xs-12 col-sm-6 col-md-3 col-lg-3">
      {block name='product_miniature'}
        {include file='catalog/_partials/miniatures/product.tpl' product=$product}
      {/block}
    </div>
  {/foreach}
</div>

Y para mover los atributos debajo del precio en la miniatura de producto, abre el archivo miniatures/product.tpl de tu tema hijo. Busca el bloque {block name='product_variants'} (que contiene los atributos) y muévelo para que quede justo después del bloque {block name='product_price_and_shipping'}. Aquí te muestro un fragmento de cómo debería quedar:

{block name='product_price_and_shipping'}
  {* Bloque de precio y envío (no lo modificamos) *}
  {include file='catalog/_partials/product-details.tpl' product=$product show_variations=true}
{/block}
{* Hemos movido este bloque aquí para que los atributos aparezcan después del precio *}
{block name='product_variants'}
  {if $product.main_variants}
    {include file='catalog/_partials/product-variants.tpl' product=$product}
  {/if}
{/block}

Después de guardar estos cambios, asegúrate de recompilar tu plantilla (en Parámetros Avanzados > Rendimiento, pon 'Recompilar las plantillas si los ficheros han sido actualizados' y borra la caché del navegador). Con esto deberías ver la cuadrícula de 4 columnas y los atributos en su nueva posición.

silviaadmin

¡Funciona a la perfección, @Milo! Muchísimas gracias por la explicación tan detallada y los snippets. El tema hijo es algo que siempre me cuesta recordar, pero esta vez lo he hecho bien y los cambios se han aplicado tal cual. La cuadrícula de 4 columnas se ve genial y los atributos justo debajo del precio quedan mucho más claros. ¡Gracias también a @maria96 y @diego_admin por los consejos iniciales sobre el tema hijo y la importancia del CSS!