(Solucionado) Listado grid de productos descuadrado ''Ayuda por favor''

[Admin27]

Estoy leyendo muchos posts del foro y no consigo cuadrar el listado grid, me gustaría poner 4 columnas y cuadrarlas bien, alguien me puede ayudar por favor?

Edited November 11, 2013 by Admin27 (see edit history)

[Sergio Ruiz]

¿Es posible ver la dirección de tu tienda?

[Admin27]

Si te paso por ejemplo este enlace: http://www.dulce-hogar.net/es/44-ofertas-fundas-nordicas

Me gustaría añadir 4 columnas y abajo si te fijas los dos productos se ven juntados.

[Admin27]

Lo he vuelto a poner como lo tenía antes.

[nadie]

http://www.dulce-hogar.net/themes/default/css/product_list.css

#product_list li {
		text-align: center;
		float: left;
		width: 142px;
		padding: 16px;
		margin-bottom: 14px;
		margin-right: 20px;
		background-color: #f9f9f9
	}

change by

#product_list li {
		text-align: center;
		float: left;
		width: 142px;
		padding: 16px;
		margin-bottom: 14px;
		margin-right: 18px;
		background-color: #f9f9f9
	}

[nadie]

Your product-list.tpl

 

forearch last item %4

[Admin27]

Esto último no lo entendido lo que me has dicho.

 

Your product-list.tpl

 

forearch last item %4

[nadie]

In product-list.tpl show code for me:

foreach

[Admin27]

al lado de foreach coloco last item %4?

quedaría así? {foreach last item %4 from=$products item=product name=products}

[nadie]

al lado de foreach coloco last item %4?

 

quedaría así? {foreach last item %4 from=$products item=product name=products}

 

In the file,  "product-list.tpl"

 

change

{if $smarty.foreach.products.iteration%X == 0}last_row_item

by

{if $smarty.foreach.products.iteration%4 == 0}last_row_item

[nadie]

A mi me gusta mas este aporte:
 
 
http://mypresta.eu/en/art/developer/prestashop-products-list-grid-view.html
 
Si usas este aporte,  luego cambias esto:

        <li class="dropshadowclass ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">

por

        <li class="dropshadowclass ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 3}alternate_item{else}item{/if} clearfix">

y luego aumentas el width del product_list.css

#product_list li {
text-align:center;
margin-bottom:14px;
border:1px solid #eee;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:10px;
width:144px;
display:inline-block;
vertical-align:top;
margin:2px;
position:relative;
}

(aumentas ese width:144px a una cifra superior, por ejemplo aumentalo a 159 o 162)

 

y luego añades esto

#product_list li.last_item {
margin-right: 0px;
}

[nadie]

 

A mi me gusta mas este aporte:

 

 

http://mypresta.eu/en/art/developer/prestashop-products-list-grid-view.html

 

Si usas este aporte,  luego cambias esto:

        <li class="dropshadowclass ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">

por

        <li class="dropshadowclass ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 3}alternate_item{else}item{/if} clearfix">

y luego aumentas el width del product_list.css

#product_list li {
text-align:center;
margin-bottom:14px;
border:1px solid #eee;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:10px;
width:144px;
display:inline-block;
vertical-align:top;
margin:2px;
position:relative;
}

(aumentas ese width:144px a una cifra superior, por ejemplo aumentalo a 159 o 162)

 

y luego añades esto

#product_list li.last_item {
margin-right: 0px;
}

 

Con la guía de vekia, que te he pasado y los dos cambios que te he indicado sobre la guía de vekia, se te tiene que quedar como te muestro en la siguiente imagen:

 

Adjunto Imagen

 

 

 

(Logicamente, contando con que has ocultado el lateral derecho para los listado de productos y aumentado la columna central para los listados de productos)

[nadie]

(Logicamente, contando con que has ocultado el lateral derecho para los listado de productos y aumentado la columna central para los listados de productos)

 

Es decir:

 

Ocultar lateral derecho por css, en el listado de productos por categoria

 

#category #right_column {display:none;}

Aumentar ancho css - listado productos por categoria

 

#category #center_column {
width: 757px;
margin-right: 0px;
}

[Admin27]

Muchas gracias ''Nadie'' voy a probarlo ahora y si tengo algún problema te lo comento al momento.

[Admin27]

Tengo una duda este aporte:

#product_list li.last_item {
margin-right: 0px;
}

Va debajo de este?

#product_list li {
text-align:center;
margin-bottom:14px;
border:1px solid #eee;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:10px;
width:144px;
display:inline-block;
vertical-align:top;
margin:2px;
position:relative;
}

[nadie]

Abajo o arriba. (Lo que prefieras)

[nadie]

Por cierto, no me carga tu tienda ahora (la primera vez que escribiste si).

[Admin27]

Hola Victor, ya carga la web, como he modificado durante el día muchas cosas el servidor se cayo, pero ya esta arreglado.

En cuanto todo lo que me has dicho, por fin lo he solucionado correctamente y queda muy muy muy guapo este aporte.

Mira: http://www.dulce-hogar.net/es/44-ofertas-fundas-nordicas

[nadie]

Hola Victor, ya carga la web, como he modificado durante el día muchas cosas el servidor se cayo, pero ya esta arreglado.

 

En cuanto todo lo que me has dicho, por fin lo he solucionado correctamente y queda muy muy muy guapo este aporte.

 

Mira: http://www.dulce-hogar.net/es/44-ofertas-fundas-nordicas

 

Cierto, ha quedado muy chulo.

[Admin27]

Tengo otra duda, me he fijado que en el apartado de nuevos productos: http://www.dulce-hogar.net/es/nuevos-productos

 

Y luego en los productos más vendidos: http://www.dulce-hogar.net/es/mas-vendidos

 

Mira como me sale, como puedo hacer para que me salga como en las categorias?

[nadie]

Tengo otra duda, me he fijado que en el apartado de nuevos productos: http://www.dulce-hogar.net/es/nuevos-productos

 

Y luego en los productos más vendidos: http://www.dulce-hogar.net/es/mas-vendidos

 

Mira como me sale, como puedo hacer para que me salga como en las categorias?

 

Esto: 

#category #right_column, #best-sales #right_column, #new-products #right_column, #search #right_column, #prices-drop #right_column {display:none;}

#category #center_column, #best-sales #center_column, #new-products #center_column, #search #center_column, #prices-drop #center_column {
width: 757px;
margin-right: 0px;
}

[Admin27]

Esto en donde lo coloco? en el apartado global.css?

[nadie]

Esto en donde lo coloco? en el apartado global.css?

 

Lo colocas por esto: http://www.prestashop.com/forums/topic/287869-listado-grid-de-productos-descuadrado-ayuda-por-favor/?do=findComment&comment=1451485 que te dije unos mensajes mas atras. (cambiazo)

 

Si, en el global.css

[Admin27]

A vale ya lo hice, ya me sale bien. Muchas gracias por todo.

[nadie]

A vale ya lo hice, ya me sale bien. Muchas gracias por todo.

 

¿Solucionado?

[Admin27]

Si ya esta solucionado. Muchas gracias.

[nadie]

Si ya esta solucionado. Muchas gracias.

 

Perfecto !

 

En ese caso, procedo a cerrar el tema.

 

Saludos,