Al cambiar el TRUNCATE de los títulos de cada producto, se "desordena" el listado de productos

[Italo Morales]

Hola amigos...favor su ayuda. Se ha modificado el TPL de productos en themes/tema/templates/catalog/_partials/miniatures/product.tpl

 

 <div class="innovatory-product-description">
        {hook h='displayProductListReviews' product=$product} 
          {block name='product_name'}
            <h2 class="h2 productName" itemprop="name"><a href="{$product.url}">{$product.name|truncate:60:'...':true|escape:'html':'UTF-8'}</a></h2>
          {/block} 

 

 

El problema que me deja muchos espacios entre un producto y otro:

 

 

Que puede ser ??? Adjunto archivo 

 

Muchas gracias.

 

product.tpl

[Italo Morales]

@nadieHola Victor...favor tu ayuda !!! muchas gracias.

[w3bsolutions]

Al cambiar la longitud de los títulos de los productos ahora algunos tienen 2 líneas y otros 1. El último producto de la línea superior solo tiene 1 línea y esas cajas no tienen un alto fijo, la altura se adapta al contenido, por eso el siguiente producto se ha colocado justo debajo, porque, desde el punto de vista de CSS, el siguiente hueco vacío en la página está ahí. 

Hay muchos hilos en el foro sobre este problema. 

Algunas maneras de solucionarlo (con CSS):

1. Dar un alto fijo al elemento del nombre (h2.productName). 

2. Dar un alto fijo a la caja de producto 

3. Utilizar CSS grids para el listado de productos (requiere más cambios de código). 

Saludos y feliz Navidad. 

[Italo Morales]

En 24-12-2021 a las 4:15 PM, w3bsolutions dijo:

Al cambiar la longitud de los títulos de los productos ahora algunos tienen 2 líneas y otros 1. El último producto de la línea superior solo tiene 1 línea y esas cajas no tienen un alto fijo, la altura se adapta al contenido, por eso el siguiente producto se ha colocado justo debajo, porque, desde el punto de vista de CSS, el siguiente hueco vacío en la página está ahí. 

Hay muchos hilos en el foro sobre este problema. 

Algunas maneras de solucionarlo (con CSS):

1. Dar un alto fijo al elemento del nombre (h2.productName). 

2. Dar un alto fijo a la caja de producto 

3. Utilizar CSS grids para el listado de productos (requiere más cambios de código). 

Saludos y feliz Navidad. 

Gracias amigo, ya lo corregi...

 

Se edito el theme.css 

 

 

Estaba en un 25% y lo baje al 20%.

 

 

 

Edited December 28, 2021 by Italo Morales (see edit history)

[w3bsolutions]

Bueno, es una solución completamente distinta, y no se aplica sólo a las cajas de productos si no a todos los elementos que tengan esa clase CSS. Has podido cambiar otras partes de la tienda sin darte cuenta. 

Ahora has pasado de tener 4 columnas de productos a tener 5. Eso, en ese listado de productos en concreto, soluciona el problema porque fuerza a todos los títulos a tener 2 líneas, pero si tuvieras aún así un producto con un nombre más corto ("hola" por ejemplo) al final de una línea, seguirías teniendo el mismo problema del post inicial. No es una  buena solución, de hecho es bastante mala. 

[Italo Morales]

hace 50 minutos, w3bsolutions dijo:

Bueno, es una solución completamente distinta, y no se aplica sólo a las cajas de productos si no a todos los elementos que tengan esa clase CSS. Has podido cambiar otras partes de la tienda sin darte cuenta. 

Ahora has pasado de tener 4 columnas de productos a tener 5. Eso, en ese listado de productos en concreto, soluciona el problema porque fuerza a todos los títulos a tener 2 líneas, pero si tuvieras aún así un producto con un nombre más corto ("hola" por ejemplo) al final de una línea, seguirías teniendo el mismo problema del post inicial. No es una  buena solución, de hecho es bastante mala. 

Si, de hecho me acabo de dar cuenta que corregi una parte, pero en las otras sigo teniendo el problema.