Poner titulo de productos en dos lineas SIN HUECOS

[toni_svo]

Hola,

MI WEB ES :http://homn.es/12-muebles?page=1

Me gustaría que los títulos de los productos ocuparan dos lineas, he modificado los archivos de mi plantilla product.tpl y custom-product.tpl con un truncate:100 y no ha funcionado. 

Mirando el css he visto que hay este codigo:

Si en el white-space pongo "normal" se me crean unos huecos en la pagina que no se como solucionar, si me podéis ayudar porfa porque no se como areglarlo.

Gracias de antemano.

Un saludo.

[idnovate.com]

Añade este código CSS en /themes/storezia2/assets/css/custom.css:

@media (min-width: 1600px) {
  .wb-product-grid .item-product.col-xl-3:nth-child(4n + 1) {
      clear: both;
  }
}

@media (min-width: 1200px) {
  .wb-product-grid .item-product.col-lg-4:nth-child(3n + 1) {
      clear: both;
  }
}
  
@media (min-width: 992px) {
  .wb-product-grid .item-product.col-md-4:nth-child(3n + 1) {
      clear: both;
  }
}

@media (min-width: 768px) {
  .wb-product-grid .item-product.col-sm-6:nth-child(2n + 1) {
      clear: both;
  }
}

 

Edited June 22, 2020 by idnovate.com (see edit history)

[toni_svo]

5 minutes ago, idnovate.com said:

Añade este código CSS en /themes/storezia2/assets/css/custom.css:

.wb-product-grid .item-product.col-xl-3:nth-child(4n + 1),
.wb-product-grid .item-product.col-lg-4:nth-child(3n + 1),
.wb-product-grid .item-product.col-md-4:nth-child(3n + 1),
.wb-product-grid .item-product.col-sm-6:nth-child(2n + 1) {
    clear: both;
}

 

No funciona :(

Se siguen creando huecos

[idnovate.com]

Modifiqué el código.

[toni_svo]

17 minutes ago, idnovate.com said:

Modifiqué el código.

Hola de nuevo,

me sigue pasando lo mismo, se me quedan todos los productos en dos columnas a la izquierda.

[toni_svo]

@media (min-width: 1600px) { .wb-product-grid .item-product.col-xl-3:nth-child(4n + 1) { clear: both; } }

puse solo ese y en la version de escritorio si se ve bien pero en la versión movil no funciona. Una ayudita.

Gracias de antemano

[ventura]

Puedes hacerlo con js, añadiendo en

themes/storezia2/assets/js/custom.js

este código para que se añada un salto de linea en la mitad del nombre cuando los nombres tengan mas de dos palabras

var words=$("h2.product-title a").html(),products=$("h1 .product-head1").html(),arrofwords=$.trim(words).split(" "),middle=arrofwords.length/2;if(arrofwords.length>2){arrofwords.splice(middle,0,"<br/>");var output=arrofwords.join(" ");$("h2.product-title a").html(output)}else $("h2.product-title a").html(output);products=$(".product-head1").html();var arrofproducts=$.trim(products).split(" "),middleproducts=arrofproducts.length/2;if(arrofproducts.length>2){arrofproducts.splice(middleproducts,0,"<br/>");var outputpro=arrofproducts.join(" ");$(".product-head1").html(outputpro)}else $(".product-head1").html(outputpro);

El resultado al borrar cache debería ser el que aparece en imagen

[idnovate.com]

A ver esto que tal:

@media (min-width: 1600px) {
  .wb-product-grid .item-product.col-sm-6:nth-child(2n + 1),
  .wb-product-grid .item-product.col-md-4:nth-child(3n + 1),
  .wb-product-grid .item-product.col-lg-4:nth-child(3n + 1) {
    clear: none;
  }
  
  .wb-product-grid .item-product.col-xl-3:nth-child(4n + 1) {
      clear: both;
  }
}

@media (min-width: 1200px) {
  .wb-product-grid .item-product.col-sm-6:nth-child(2n + 1),
  .wb-product-grid .item-product.col-md-4:nth-child(3n + 1) {
    clear: none;
  }
  
  .wb-product-grid .item-product.col-lg-4:nth-child(3n + 1) {
      clear: both;
  }
}
  
@media (min-width: 992px) {
  .wb-product-grid .item-product.col-sm-6:nth-child(2n + 1) {
    clear: none;
  }
  
  .wb-product-grid .item-product.col-md-4:nth-child(3n + 1) {
      clear: both;
  }
}

@media (min-width: 768px) {
  .wb-product-grid .item-product.col-sm-6:nth-child(2n + 1) {
      clear: both;
  }
}

 

[toni_svo]

16 hours ago, idnovate.com said:

Añade este código CSS en /themes/storezia2/assets/css/custom.css:

@media (min-width: 1600px) {
  .wb-product-grid .item-product.col-xl-3:nth-child(4n + 1) {
      clear: both;
  }
}

@media (min-width: 1200px) {
  .wb-product-grid .item-product.col-lg-4:nth-child(3n + 1) {
      clear: both;
  }
}
  
@media (min-width: 992px) {
  .wb-product-grid .item-product.col-md-4:nth-child(3n + 1) {
      clear: both;
  }
}

@media (min-width: 768px) {
  .wb-product-grid .item-product.col-sm-6:nth-child(2n + 1) {
      clear: both;
  }
}

 

En la versión móvil me sigue creando huecos cuando el producto tiene dos líneas

[toni_svo]

12 hours ago, ventura said:

Puedes hacerlo con js, añadiendo en

themes/storezia2/assets/js/custom.js

este código para que se añada un salto de linea en la mitad del nombre cuando los nombres tengan mas de dos palabras

var words=$("h2.product-title a").html(),products=$("h1 .product-head1").html(),arrofwords=$.trim(words).split(" "),middle=arrofwords.length/2;if(arrofwords.length>2){arrofwords.splice(middle,0,"<br/>");var output=arrofwords.join(" ");$("h2.product-title a").html(output)}else $("h2.product-title a").html(output);products=$(".product-head1").html();var arrofproducts=$.trim(products).split(" "),middleproducts=arrofproducts.length/2;if(arrofproducts.length>2){arrofproducts.splice(middleproducts,0,"<br/>");var outputpro=arrofproducts.join(" ");$(".product-head1").html(outputpro)}else $(".product-head1").html(outputpro);

El resultado al borrar cache debería ser el que aparece en imagen

Hola Ventura,

no funciona porque solo me aplica las dos lineas en la primera pagina de muebles en el resto no mira:

En la version movil funciona pero me recorta el titulo y yo lo que quiero es que se vea completo sin crear huecos no con los puntos suspensivos

Haber si me podeis ayudar porfa.

UN saludo.

[idnovate.com]

2 hours ago, toni_svo said:

En la versión móvil me sigue creando huecos cuando el producto tiene dos líneas

Veo que todavía tienes el primer código que puse...

[toni_svo]

41 minutes ago, idnovate.com said:

Veo que todavía tienes el primer código que puse...

Con ese codigo funciona peor por eos habia puesto el que tenía que aunque no se vea el titulo en dos lineas sin huecos se ven todos los productos sin huecos

[ventura]

On 6/23/2020 at 9:01 AM, toni_svo said:

Hola Ventura,

no funciona porque solo me aplica las dos lineas en la primera pagina de muebles en el resto no mira:

 

En la version movil funciona pero me recorta el titulo y yo lo que quiero es que se vea completo sin crear huecos no con los puntos suspensivos

 

Haber si me podeis ayudar porfa.

UN saludo.

-Será un tema de cache de tu instalación porque las clases de los titulos html es la misma independientemente de la paginación

-Para quitar el truncado de los nombres tendras que editar el .tpl

-En version para movil:

 

 

 

[toni_svo]

On 6/23/2020 at 7:17 PM, ventura said:

-Será un tema de cache de tu instalación porque las clases de los titulos html es la misma independientemente de la paginación

-Para quitar el truncado de los nombres tendras que editar el .tpl

-En version para movil:

 

 

 

Si es un problema de cache de todas formas no hay algo bien porque me salen todos los títulos iguales no el titulo del producto que le corresponde:

Muchas gracias, un saludo

[ventura]

On 6/25/2020 at 1:50 PM, toni_svo said:

Si es un problema de cache de todas formas no hay algo bien porque me salen todos los títulos iguales no el titulo del producto que le corresponde:

 

Es cierto en el las paginas de categorias no funciona correctamente, Prueba con este código 

 

$(".h3.product-title").html(function(){var t=$(this).html(),h=$.trim(t).split(" "),l=h.length/2;h.splice(l,0,"<br/>");var i=h.join(" ");return h.length>3?$(this).html().replace($(this).html(),i):t}),$(".h1.product-head1").html(function(){var t=$(this).html(),h=$.trim(t).split(" "),l=h.length/2;h.splice(l,0,"<br/>");var i=h.join(" ");return h.length>3?$(this).html().replace($(this).html(),i):t});

[toni_svo]

18 hours ago, ventura said:

Es cierto en el las paginas de categorias no funciona correctamente, Prueba con este código 

 

$(".h3.product-title").html(function(){var t=$(this).html(),h=$.trim(t).split(" "),l=h.length/2;h.splice(l,0,"<br/>");var i=h.join(" ");return h.length>3?$(this).html().replace($(this).html(),i):t}),$(".h1.product-head1").html(function(){var t=$(this).html(),h=$.trim(t).split(" "),l=h.length/2;h.splice(l,0,"<br/>");var i=h.join(" ");return h.length>3?$(this).html().replace($(this).html(),i):t});

Hola de nuevo Ventura,

Ahora si coge el título bien, pero no me gusta que cuando los titulos son cortos tambien los corta. Me gustaría que solo cortara si no cabe en una linea.

Muchas gracias de antemano.

Un saludo

Edited June 29, 2020 by toni_svo (see edit history)