Jump to content

Cambiar apariencia [LISTADO PRODUCTOS] - de List a Grid

ThEllS

By ThEllS
in Discusión general

 Share

Recommended Posts

ThEllS Newbie

ThEllS

Posted
Posted

Hola, estoy buscando alguna forma de cambiar el aspecto del Listado de productos (product-list.tpl) que serian los resultados de busqueda, categorias, etc.

Quiero que los resultados de busqueda se muestren por columnas (Grid mode), tal como se muestra el modulo Productos Destacados (homefeatured) - 3 columnas.

¿Alguien tiene idea de como se podria hacer?

He probado el [HACK] Grid list que hay en este foro pero no se ven bien los productos.

Aunque sea muy dificil de hacer, esperia una respuesta al menos para saber como comenzar.

Gracias

  • Like 1
Link to comment
Share on other sites
ThEllS Newbie

ThEllS

Posted
  • Author
Posted

si, es tal como lo tienes en tu sitio web, pero mi pregunta ya la he ehcho arriba.

necesito alguo que funcione tambien con el modulo que tengo instalado "Filter search community 2.1"

gracias!

Link to comment
Share on other sites
midiman Newbie

midiman

Posted
Posted

Hola!
Todo se hace desde CSS. La idea es que los bloques de cada producto tengan un ancho fijo y que floten a la izquierda. No es complicado si controlas un poco de CSS. Te puse el enlace a mi página para que pudieras ver cómo he modificado yo las CSS para conseguir el efecto... En mi caso, el archivo a modificar es themes->tutema->css->product_list.css, en concreto la definición de la lista de productos:

ul#product_list li {
   border: solid 1px #d0d3d8;
   padding: 0;
   min-height: 130px;
   height: auto;
   width: 235px;
   float: left;
   margin-bottom: 12px;
   margin-left: 12px;
   text-align: center;
}


Suerte! :)

  • Like 2
Link to comment
Share on other sites
Rodolfo Newbie

Rodolfo

Posted
Posted

Hola, el otro dia rocky o tomer, pusieron la solucion, copiaron el tpl del homefeatured como product-list.tpl

Luego habia que quitar alguina linea del principio para que funcionase bien.

Busca el post por el foro no lo encuentro
RODOLFO

Link to comment
Share on other sites
keysoy Newbie

keysoy

Posted
Posted

Ola yo vengo buscando algo parecido: Yo quiero que me salgan las columnas por una parte de categorías, newslater, es decir la columna de la izquierda y tambien quiero que me salga la columna de la derecha. Además en vez de que salgan los productos en rectángulos a largados prefiero que salgan como los tienen en la web de "julia y belén joyas"

Link to comment
Share on other sites
midiman Newbie

midiman

Posted
Posted

Yo ya os he dado las claves para que podáis solucionarlo, aunque evidentemente hay que entender un poco cómo funcionan los estilos CSS para adaptar cada caso particular... Las columnas de la izquierda y derecha tienen estilos propios, no se verán afectadas por los cambios que os he sugerido. Me gustaría poder ayudar de forma más concreta, pero no dispongo de tiempo para hacerlo...
¡Suerte! :)

Link to comment
Share on other sites
ThEllS Newbie

ThEllS

Posted
  • Author
Posted

bueno en fin, esto no era lo que buscaba exactamente.

Yo, antes de postear aqui, ha ya he probado en copiar el contenido del Home Features y adaptarlo al Product List (modificando un poco el CSS)

Pero aun asi, no funciona con el modulo "Filter Search Community edition 2.1" (si no conoceis el modulo, no sabeis de que hablo).

¿Alguien sabe como hacerlo funcionar con este modulo?

Supongo que habra que modificar tambien algo de JS.

gracias!

Link to comment
Share on other sites
  • 4 months later...
  • 2 weeks later...
  • 1 month later...
  • 4 weeks later...
picarol Newbie

picarol

Posted
Posted

Wenas!

A ver si alguien me sabe decir qué estoy haciendo mal para que me salga así:

O0oRn.jpg

 

Aquí está el código de product_list.css :

/* product-list.tpl */

ul#product_list { margin-top: 2em; list-style-type: none

}

ul#product_list li {

background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;

padding: 1px;

height: 370px;

margin-bottom:0.3em;

border: solid 1px #d0d3d8;

float: left;

width: 29%;

margin-right:1px;

margin-left:1px;

margin-top:1px

}

}

* html ul#product_list li {

height: auto !important

}

ul#product_list li a {

text-decoration: none;

color: #383838

}

ul#product_list a.product_img_link {

border: solid 1px #d0d3d8;

float:left;

margin-right: 10px;

margin-left: 15px;

margin-top: 1px

}

ul#product_list a.product_img_link img {

vertical-align: center

}

ul#product_list li h3{

margin:0.1em 0;

width:160px;

padding-bottom:2px;

text-align:center

}

ul#product_list li .new {

background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;

border:1px solid #488C40;

color:white;

font-size:0.6em;

font-weight:bold;

margin:0pt 1em 0pt 0pt;

padding:0pt 0.4em;

vertical-align:0.3em

}

ul#product_list li p.product_desc {

margin-top: 1em;

text-align: center;

font-size: 0.92em

}

ul#product_list li div.center_block {

float: left;

width: 100%

}

ul#product_list li div.right_block {

float: left;

width: 11em;

margin-left: 2em;

margin-top: 22em;

position: absolute;

text-align: center;

color: #da0f00;

font-weight: bold

}

ul#product_list li .discount {

color: #da0f00;

text-transform: uppercase;

font-weight: bold;

display: block

}

ul#product_list li .on_sale {

color: #da0f00;

text-transform: uppercase;

font-weight: bold;

display: block

}

ul#product_list li .reduction {

display: block;

margin-bottom: 0.3em

}

ul#product_list li .price {

display: block;

font-size: 170%;

margin-bottom: 0.3em

 

}

ul#product_list li span.availability {

color: #488c40;

font-size: 0.9em

}

 

ul#product_list li span.notavailable {

color: red;

font-size: 0.9em

}

ul#product_list li a.button { margin-top: 0.5em }

 

input.exclusive, input.exclusive_disabled, a.exclusive, span.exclusive { margin-top:6px; background-image: url('../img/button-medium_exclusive.png') }

div.pagination {clear:both; padding: 1em 0 }

 

  • Like 1
Link to comment
Share on other sites
  • 6 months later...
  • 4 weeks later...
lunaroja Enthusiast

lunaroja

Posted
Posted

Tambien podeis usar este magnifico modulo de jolvil http://www.prestasho...d-using-jquery/

 

@picarol, es por el truncado de la descripción, en el product-list.tpl de tu tema lo puedes cambiar. Busca por la clase product_desc veras este codigo 

{$product.description_short|truncate:150:'...'|strip_tags:'UTF-8'}

Tan solo ajusta con el número de letras que necesites.

 

Saludos

 

Gracias a la gente del foro he conseguido eliminar la columna de la derecha, poner los artículos en columnas en lugar de líneas y ponerlos de 4 en 4, gracias por la ayuda.

 

Lo que no consigo es modificar el número de caracteres en el título y en la descripción corta.

 

He modificado el product-list.tpl en lo del truncate pero los cambios no aparecen, ninguno, ni cuando lo alargo ni cuando lo acorto, es como si el tema sacase esa información de otro sitio.

 

Uso el tema por defecto.

Link to comment
Share on other sites
lunaroja Enthusiast

lunaroja

Posted
Posted (edited)

Rápida respuesta, muchas gracias.

 

Ya estaba forzando la compilación, otros cambios que hacía se veian al momento pero ese no, por eso me extrañaba, pero con eso que me has dicho se ha solucionado, además me será útil para otras cosas, no conocía la uitlidad de esa carpeta smarty/compile.

 

Lo malo es que no he conseguido el resultado esperado, se ve que ese no era el camino correcto para mi objetivo.

Conseguí poner grid con 4 columnas pero el espacio dedicado a cada artículo me parece demasiado alto, quiero que se vean más artículos a la vez y he pensado en que no sean tan altos en longitud vertical, para lo cual pensé en acortar la descripción breve que se muestra, pero, aunque ahora ya la hemos acortado con eso que me has dicho, el sistema sigue reservando el mismo espacio, aunque ahora vacío.

 

¿Como puedo reducir verticalmente el espacio reservado a la breve descripción?

 

Pongo una imagen para que se vea más claramente:

post-379339-0-78779600-1348607520_thumb.png

Edited by lunaroja (see edit history)
Link to comment
Share on other sites
lunaroja Enthusiast

lunaroja

Posted
Posted

Arreglada la iamgen, perdón.

 

Cuando modifico eso se hace mas corto, sí, pero el espacio de la descripción sigue ahí desperdiciado, y se me sale texto por abajo, como pasa en el artículo 3.

 

Modifico lo de ''height: 360px'' por ''height: 300px'' y el recuadro se hace mas corto, pero el contenido sigue en el mismo sitio por lo que se sale por abajo.

 

He probado a poner altura en el div.center_block pero ni caso.

 

Este es mi product_list.css

 

/* product-list.tpl */

ul#product_list { margin-top: 2em; margin-left: 35px; list-style-type: none }

ul#product_list li {

background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;

padding: 1px;

height: 360px;

min-height: 200px;

margin-bottom: 0.3em

border: solid 1px #d0d3d8;

float: left;

width: 22%;

margin-right:8px;

margin-left:8px;

margin-top:8px

}

* html ul#product_list li {

height: auto !important;

}

ul#product_list li a {

text-decoration: none;

color: #374853

}

/* IMAGEN, BORDE Y POSICION */

ul#product_list a.product_img_link {

border: solid 0px;

float:left;

margin-right: 10px;

margin-left: 15px;

margin-top: 1px

}

ul#product_list a.product_img_link img {

vertical-align: center;

}

/* TÍTULO, POSICION */

ul#product_list li h3{

margin: 0.1em 0;

width: 160px;

padding-bottom: 2px;

text-align: center

}

ul#product_list li .new {

background: transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;

border: 1px solid #488C40;

color: white;

font-size: 0.6em;

font-weight: bold;

margin: 0 1em 0 0;

padding: 0 0.4em;

vertical-align: 0.3em

}

/* DESCRIPCION CORTA, POSICION */

ul#product_list li p.product_desc {

margin-bottom: 0;

margin-top: 1em;

text-align: left;

font-size: 0.92em

}

ul#product_list li div.center_block {

float: left;

width: 100%

height: 30px;

}

ul#product_list li div.right_block {

float: left;

width: 11em;

text-align: center;

margin-left: 2em;

margin-top: 22em;

position: absolute;

color: #da0f00;

font-weight: bold

}

ul#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {

color: #da0f00;

font-weight: bold;

display: block

}

ul#product_list li .reduction {

display: block;

margin-bottom: 0.3em

}

ul#product_list li .price {

display: block;

font-size: 1.5em;

margin-bottom: 0.2em

}

ul#product_list li span.availability {

color: #488c40;

font-size: 0.9em

}

ul#product_list li span.notavailable {

color: red;

font-size: 0.9em

}

ul#product_list li a.button { margin-top: 0.5em }

ul#product_list li p.compare input { vertical-align: text-bottom }

 

input.exclusive, input.exclusive_disabled, a.exclusive, span.exclusive { margin-top:6px; background-image: url('../img/button-medium_exclusive.png') }

div.pagination {clear:both; padding: 1em 0 }

 

Link to comment
Share on other sites
lunaroja Enthusiast

lunaroja

Posted
Posted (edited)

Dando vueltas y vueltas y vueltas, además de un mareo he conseguido hacerlo.

 

Basicamente se trataba de modificar los márgenes verticales internos de cada bloque. Podeis comparar este css con el anterior.

 

Además he eliminado el botón "ver" pues basta con pulsar en la foto para ir al mismo sitio, las cosas duplicadas acaban siendo un estorbo. Mi objetivo era que se vean muchos artículos a la vez.

 

Otra cosa que me dio la lata fue que los botones del carrito quedasen todos alineados, para ello cree "bottom_block" en el css y modifique el product-list.tpl para incluirlo.

 

Por si a alguien le interesa el css me ha quedado así:

 

/* product-list.tpl */

ul#product_list { margin-top: 2em; margin-left: 25px; list-style-type: none }

ul#product_list li {

background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;

padding: 1px;

height: 312px;

min-height: 200px;

margin-bottom: 0.3em

border: solid 1px #d0d3d8;

float: left;

width: 22%;

margin-right: 8px;

margin-left: 8px;

margin-top: 15px

}

* html ul#product_list li {

height: auto !important;

}

ul#product_list li a {

text-decoration: none;

color: #374853

margin: 0 1em 0 0;

}

/* IMAGEN, BORDE Y POSICION */

ul#product_list a.product_img_link {

border: solid 0px;

float: left;

margin-right: 10px;

margin-left: 12px;

margin-top: 3px

}

ul#product_list a.product_img_link img {

vertical-align: center;

}

/* TÍTULO, POSICION */

ul#product_list li h3{

margin: 0.1em;

width: 160px;

padding-bottom: 1px;

text-align: center

}

ul#product_list li .new {

background: transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;

border: 1px solid #488C40;

color: white;

font-size: 0.6em;

font-weight: bold;

margin: 0 1em 0 0;

padding: 0 0.4em;

vertical-align: 0.3em

}

/* DESCRIPCION CORTA, POSICION */

ul#product_list li p.product_desc {

margin-bottom: 0;

margin-top: 1em;

text-align: left;

font-size: 0.92em

}

ul#product_list li div.center_block {

float: left;

width: 100%

height: 30px;

}

/* BLOQUE PARA: PRECIO REBAJADO y SOLO POR INTERNET */

ul#product_list li div.right_block {

float: left;

width: 11em;

text-align: center;

margin-left: 1.5em;

margin-top: 18.5em;

position: absolute;

color: #da0f00;

font-weight: bold

}

/* BLOQUE PARA: PRECIO, DISPONIBLE, CESTA y COMPARAR */

ul#product_list li div.bottom_block {

float: left;

width: 11em;

text-align: center;

margin-left: 1.5em;

margin-top: 21em;

position: absolute;

color: #da0f00;

font-weight: bold

}

ul#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {

color: #da0f00;

font-weight: bold;

display: block

}

ul#product_list li .reduction {

display: block;

margin-bottom: 0.3em

}

ul#product_list li .price {

display: block;

font-size: 1.5em;

margin-bottom: 0.2em

}

ul#product_list li span.availability {

color: #488c40;

font-size: 0.9em

}

ul#product_list li span.notavailable {

color: red;

font-size: 0.9em

}

/* BOTÓN VER, ELIMINADO */

/* ul#product_list li a.button { margin-top: 0.5em } */

 

ul#product_list li p.compare input { vertical-align: text-bottom }

 

input.exclusive, input.exclusive_disabled, a.exclusive, span.exclusive { margin-top:6px; background-image: url('../img/button-medium_exclusive.png') }

div.pagination {clear:both; padding: 1em 0 }

 

Edited by lunaroja (see edit history)
Link to comment
Share on other sites
  • 3 months later...
Actionchip Newbie

Actionchip

Posted
Posted (edited)

Alguien sabe como poner los productos en columnas (grid) en el prestashop 1.5.3? Llevo buscando mucho tiempo y solo veo modulos y modificaciones pero son siempre para versiones anteriores que no sirven (sirve hasta la 1.4.9 o 1.5 creo recordar, pero despues según he leido cambiaron algo...y se fastidio)

 

Muchas gracias, Adrian

Edited by Actionchip (see edit history)
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Alguien sabe como poner los productos en columnas (grid) en el prestashop 1.5.3? Llevo buscando mucho tiempo y solo veo modulos y modificaciones pero son siempre para versiones anteriores que no sirven (sirve hasta la 1.4.9 o 1.5 creo recordar, pero despues según he leido cambiaron algo...y se fastidio)

 

Muchas gracias, Adrian

 

Estimado Actionchip,

 

Revise usted el siguiente enlace:

 

http://www.prestashop.com/forums/topic/192005-free-tutorial-change-the-default-list-display-to-a-grid-15/

 

Saludos

  • Like 1
Link to comment
Share on other sites
Actionchip Newbie

Actionchip

Posted
Posted (edited)

Estimado Actionchip,

 

Revise usted el siguiente enlace:

 

http://www.prestasho...y-to-a-grid-15/

 

Saludos

 

Hola nadie, me servio de mucho ese tutorial pero no entiendo que hay que hacer en esta parte:

 

"the image type name must be followed by _default, so, in the “home” case, it will be “home_default”"

 

Creo que necesito modificar eso (tengo la version 1.5.3) pero no se donde exactamente. Muchas gracias, Adrian

 

PD: Puede ser que cada vez que vea la palabra "home" en todo el codigo que hay en ese tutorial, tenga que cambiarlo por "home_default"?

Edited by Actionchip (see edit history)
Link to comment
Share on other sites
Actionchip Newbie

Actionchip

Posted
Posted

Vale ya esta solucionado. Nada mas habia que cambiar el "home" por "home_default" en la linea 34 del archivo product-list.tpl que me baje de ese tutorial. La linea 34 quedaria asi:

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Vale ya esta solucionado. Nada mas habia que cambiar el "home" por "home_default" en la linea 34 del archivo product-list.tpl que me baje de ese tutorial. La linea 34 quedaria asi:

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

 

Estimado Actionchip,

 

Entoces ¿Todo solucionado y funcionando?

 

Un Saludo

  • Like 1
Link to comment
Share on other sites
Actionchip Newbie

Actionchip

Posted
Posted (edited)

Estimado Actionchip,

 

Entoces ¿Todo solucionado y funcionando?

 

Un Saludo

 

Asi es, y como siempre gracias a tu ayuda.

 

Por cierto, he tenido que cambiar el truncate a 17 (por defecto esta a 26) porque no cabian las letras del titulo (se deformaba todo). Por si a alguien le sirve, esta en la linea 38 del archivo product-list.tpl, el codigo queda asi:

 

<h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:17:'...':true}</a></h3>

Edited by Actionchip (see edit history)
Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...