Agregar características a la lista de productos en Prestashop 1.6

25 enero, 2015 |

Si te gusta, compártelo ;)

Pedido recibido en Prestashop

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.

Al recargar la página (si tenemos la vista "Cuadrícula" activada) sí que veremos los cambios, pero si alternamos entre una vista y otra, se perderá la visualización de las características. Así que, vamos a resolver esto!

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:

Características en lista de productos en prestashop

14 comentarios:

  1. Hola,

    El 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

    ResponderEliminar
    Respuestas
    1. Hola,
      No tiene por qué. ¿Has forzado la compilación y has vaciado la caché de la tienda? ¿La composición y el estilo aparecen?

      Eliminar
    2. Tienes razón, no había forzado la compilación, perdona. Ahora se muestran perfectamente. Gracias, lo has hecho sencillo.

      Un saludo

      Marta

      Eliminar
    3. No hay nada que perdonar ;)
      Un placer haberte ayudado.

      Eliminar
  2. Buenos días,

    Siguiendo 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

    ResponderEliminar
    Respuestas
    1. Buenas tardes ;),

      Agrega 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.

      Eliminar
    2. De nada, un placer haberte ayudado.

      Eliminar
  3. Hola, 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.

    ResponderEliminar
    Respuestas
    1. Hola, con CSS puedes hacerlo. Inserta esta regla en el archivo global.css de tu plantilla:

      div.right-block div.features div:nth-child(1) {display: none;}

      El número indica el elemento que quieres ocultar.

      Eliminar
  4. Hola buenas Tardes :
    Alguien 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

    ResponderEliminar
  5. Hola buenas tardes :
    Alguien 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

    ResponderEliminar
  6. He seguido los mismos pasos y me funcionó perfectamente, pero ahora ya no funciona y no muestra nada.
    no he actualizado la plataforma, tengo prestashop 1.6.1.7

    Que puedo hacer?

    ResponderEliminar
    Respuestas
    1. 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