Desarrollo y diseño

Prestashop: Rellenar y Truncate

neiclon
neiclon #1 May '12 Inocente

Hola:

Estoy con una tienda de prestashop y tengo un pequeño problema. Resulta que cuando me aparece la lista de artículos, algunos se me descuadran (saltan de líneas dejando posiciones vacias). He descubierto que el error ocurre cuando el título de un artículo es demasiado largo o demasiado corto en función de los 2 que les siguen (hay 3 por línea).

$product.name|truncate:25:'...'|escape:'htmlall':'UTF-8'}</a></h3>

Para evitar que sean demasiado largos he puesto el truncate y se ha solucionado todo a mitad. Ahora viene lo más complicado. Me gustaría que si el título de un artículo no llegase a 25 caracteres, se rellenase con espacios blancos hasta alcanzarlo porque de esa forma se evitaría el descuadre.

Podría arreglarlo manualmente artículo a artículo aunque tardarse tiempo pero el problema viene porque yo los agrego al importarlos desde un cvs y siempre me pide el nombre como obligatorio, entonces cada vez que sincronizara(que es bastante a menudo), perdería el nombre una y otra vez.

¿Alguna solución se os ocurre?

Muchas gracias

B
[Borrado] #2 May '12

¿Puedes poner una screen o el css del problema?

1 respuesta
neiclon
neiclon #3 May '12 Inocente

#2

NSFW

Ese es el problema. En la línea de arriba los productos tienen dos líneas salvo uno, entonces eso hace que se descuadre la siguiente línea. Chapuceramente, si añadiera una palabra al tercer artículo acabaría por tener dos líneas y se arregla el problema.

Lo que yo querría es añadir algo al código: $product.name|truncate:25:'...'|escape:'htmlall':'UTF-8'}</a></h3> para que si no llega a 25 caracteres se rellenen con espacios en blanco

B
[Borrado] #4 May '12

Supongo que todo el producto desde la foto al botón de "Ver" están dentro de un <li>. Dale a esos <li> una altura definida.

Ya como consejo, te diría que quitases padding a la foto, por arriba y por abajo al menos y que el borde en vez de únicamente a la foto se lo metieses a todo el producto. Eso ya a tu gusto.

1 respuesta
neiclon
neiclon #5 May '12 Inocente

#4 He conseguido arreglar el <li> con la altura definida. Le he puesto el borde como me sugeriste y ha quedado mejor. El padding no lo he conseguido arreglar, tengo el css pero por más paddings y margin que quite no consigo arreglarlo

css

Le dejo el código por si quieres echar un rápido vistazo ya que yo no consigo arreglarlo.

Un saludo y gracias

1 respuesta
B
[Borrado] #6 May '12

#5 Yo tampoco veo el padding, entonces posiblemente sea del resize de Prestashop. Al meter las fotos te crea las miniaturas con el tamaño preestablecido y te rellena con blanco. Vamos, que si no me equivoco y lo inspeccionas con Firebug u otra extensión, lo blanco debería ser foto.

#7 nada, suerte con la tienda ;)

1 respuesta
neiclon
neiclon #7 May '12 Inocente

#6 Las fotos tampoco es. Intento cambiar el tamaño de la foto regenerando y se cambia, se hace más grande pero el borde sigue alrededor.

De todas maneras lo voy a dejar así, tampoco importa mucho lo del espacio en blanco, si el problema era el descuadre y ya me lo has solucionado.

Muchísimas gracias

1 respuesta
Merkury
Merkury #8 Jun '12

#1 Yo llevo meses gestionando una tienda y con este problema me he roto la cabeza cienmil veces, al final lo medio arregle modificando el CSS de mi plantilla, de todas formas porque no dejas el link de la tienda para poder verlo bien.

Edit.
Te voy a dejar un código de una cosilla que he estado probando, no esta hecho con smarty (porque no lo domino sinceramente) pero si con PHP y CREO que te puede servir.



$long = strlen($_POST["test"]);
$temName = $_POST["test"];
echo "La longitud es: ".$long."<br />";
			
if(strlen($temName)< 25)
{
	$final = str_pad($temName, 25, " ",STR_PAD_RIGHT);
	echo("<br />".$final." <br />Y mide: ".strlen($final));
}

Es un pequeño script que me he montado (más que nada para ver si funcionaba), la clave es que he estado usando str_pad que es una función que agrega el caracter que le indiques a la derecha o la izquierda, la movida, que añadiendo espacios no se hasta que punto prestashop te los cogerá, ya que en mi prueba no los mostraba en pantalla, pero si en la inspección de código, en fín no se, esto me parece una buena idea que podrías incluir en el módulo de productos directamente traduciéndolo a smarty y adaptándolo (yo modifique el homefeatured porque no me gustaba que cuando los productos se agotaban no lo indicaba).

Te dejo el HTML por si quieres copiarlo y reproducirlo, aunque no tiene ningún misterio.

<html>
<body>
	<form action="checkLenght.php" method="POST">
		<fieldset>
			<label for="test">Palabra</label>
			<input type="text" id="test" name="test" />
			<input type="submit" name="sendBut" Value="Ok"> 
		</fieldset>
		
</form>
</body>
</html>

Espero que te ayude!

1 respuesta
neiclon
neiclon #9 Jun '12 Inocente

#8 Gracias pero la verdad es que poniendo una altura definida a cada artículo en el listado me funcionó perfectamente.

De todas formas te dejo el enlace de la web: http://www.mundodeseo.es. Lo que estoy intentando arreglar ahora son los artículos destacados que aparece todo bien pero no sale el nombre. Realmente el nombre si que sale pero creo que queda tapado por la imagen.

1 respuesta
B
[Borrado] #10 Jun '12

#9 Quitale el position:absolute a
#center_column div.products_block a.product_image
#center_column div.products_block h5

Luego ya lo mueves mas cerca de la foto si eso.

1 respuesta
neiclon
neiclon #11 Jun '12 Inocente

#10 Vale, muchas gracias, solucionado :d

Usuarios habituales

Tags