En este tutorial se explica cómo podemos agregar características a la lista de productos en Prestashop 1.6; tanto en la vista de tipo "Cuadrícula ", como en la de tipo "Lista".
La plantilla product-list.tpl
Lo primero que tenemos que hacer, es, agregar el código responsable de mostrar las características dentro de la plantilla product-list.tpl, por lo que debemos buscar la plantilla en la carpeta de nuestro tema. Una vez abierto el archivo, localizar este fragmento de código:
<h5 itemprop="name"> {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if} <a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" > {$product.name|truncate:45:'...'|escape:'html':'UTF-8'} </a> </h5>
Inmediatamente después (o antes, según queramos) de la línea {hook h='displayProductListReviews' product=$product} añadir este fragmento:
{if isset($product.features)} <div class="features"> {foreach from=$product.features item=feature} <div> {$feature.name}: <span>{$feature.value}</span> </div> {/foreach} </div> {/if}
Quedando así:
<h5 itemprop="name"> {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if} <a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" > {$product.name|truncate:45:'...'|escape:'html':'UTF-8'} </a> </h5> {if isset($product.features)} <div class="features"> {foreach from=$product.features item=feature} <div> {$feature.name}: <span>{$feature.value}</span> </div> {/foreach} </div> {/if} {hook h='displayProductListReviews' product=$product}
Guardar cambios en la plantilla y refrescar la página de nuestra tienda Prestashop para ver los cambios.
El archivo global.js
El "interruptor" que cambia entre una vista y otra se maneja mediante javascript, por lo tanto para poder ver las características en ambas vistas, debemos editar el archivo global.js, ubicado en ../prestashop/themes/nuestro_tema/js. Abramos el archivo global.js y localizar estas dos líneas...
html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
... y justo después de estas dos líneas añadir esta línea:
html += '<div class="features">'+ $(element).find('.features').html() + '</div>';
Con esto terminamos con este archivo!
Modificando el archivo product_list.css
La visualización de las características que hemos añadido no tienen el aspecto adecuado, por lo tanto vamos a arreglar esto.
Busquemos el archivo product_list.css, ubicado en ../prestashop/themes/nuestro_tema/css. Localizar esta regla css:
ul.product_list.grid > li .product-container h5 { padding: 0 15px 7px 15px; min-height: 53px; }
Después de esta regla añadir:
li.ajax_block_product.hovered .features { padding-left:0px; text-align:left; padding-left:15px; padding-bottom:15px; } .features span { font-weight: bold; }
Esta modificación afecta a la vista "Cuadrícula". Ahora debemos modificar la vista "Lista". Buscar esta regla:
ul.product_list.list > li h5 { padding-bottom: 8px; }
Y justo después añadir:
.features { text-align:left; margin-bottom:8px; } .features span { font-weight: bold; }
Y con esto ya terminamos, el aspecto final debería ser similar a esto:
Hola,
ResponderEliminarEl tutrial es claro y fácil de llevar a cabo, no obstante he seguido todos los pasos y siguen sin aparecer las características.
¿Puede deberse a que tengo asociadas más de 10 características? ¿Hay que asignar sólo 2 o 3 para que aparezcan en la cuadrícula de productos?
Gracias
Hola,
EliminarNo tiene por qué. ¿Has forzado la compilación y has vaciado la caché de la tienda? ¿La composición y el estilo aparecen?
Tienes razón, no había forzado la compilación, perdona. Ahora se muestran perfectamente. Gracias, lo has hecho sencillo.
EliminarUn saludo
Marta
No hay nada que perdonar ;)
EliminarUn placer haberte ayudado.
Buenos días,
ResponderEliminarSiguiendo el tutorial ya me aparecen las características, pero hay un problema en la vista "Cuadrícula", me aparecen las características completamente pegadas a la línea del recuadro, sin margen. Al pasar el ratón por encima del recuadro y resaltarlo si que aparece margen, pero en estado normal no. ¿Dónde puedo añadir unos px demargen izq?
Gracias
Buenas tardes ;),
EliminarAgrega esto en el archivo ../prestashop/themes/nuestro_tema/css/product_list.css ...
div.product-container div.right-block div.features {padding-left: 15px;}
Si quieres lo pegas después de ...
.features span {font-weight: bold;}
O lo puedes pegar al final del archivo, como tú quieras.
Maravilloso. Muchas gracias
EliminarDe nada, un placer haberte ayudado.
EliminarHola, gracias por el tutorial. Me ha servido, he conseguido ver las características. Pero ¿sabes como hacer para que no aparezcan todas sino sólo dos o tres que son las que me interesan? Gracias.
ResponderEliminarHola, con CSS puedes hacerlo. Inserta esta regla en el archivo global.css de tu plantilla:
Eliminardiv.right-block div.features div:nth-child(1) {display: none;}
El número indica el elemento que quieres ocultar.
Hola buenas Tardes :
ResponderEliminarAlguien me podria ayudar , para hacer lo mismo en prestashop 1.5.6.2 o un modulo que añada las caracteristicas en el listado de producto .
Un saludo y fracias
Hola buenas tardes :
ResponderEliminarAlguien me puede ayudar , queria poner las carcteristicas en la lista de productos en prestashop 1.5.6.2. o un modulo que lo haga , donde conseguirlo .
Un saludo a todos y gracias
He seguido los mismos pasos y me funcionó perfectamente, pero ahora ya no funciona y no muestra nada.
ResponderEliminarno he actualizado la plataforma, tengo prestashop 1.6.1.7
Que puedo hacer?
Hola, lo acabo de probar en prestashop 1.6.1.4 y funciona correctamente, debe ser porque habrás cometido algún error de código.
Eliminar