Nombre del producto en imagenes Fancybox (Prestashop)

Cuando entramos en una página de producto de la versión de Prestashop 1.5 y hacemos “click” en una imagen de este producto podemos ver las imágenes en grande de este producto. Aquí os explicaré como añadir el nombre del producto en la parte inferior.

Como podrán ver es una tarea muy sencilla pero será un detalle de calidad de tu tienda online.

Antes que nada busca la página de producto dentro de tu plantilla:

..botiga/themes/plantilla/product.tpl

Una vez estés dentro de este archivo deberás buscar el listado de imágenes del producto:

<div id="thumbs_list">
<ul id="thumbs_list_frame">
{if isset($images)}
{foreach from=$images item=image name=thumbnails}
{assign var=imageIds value="`$product->id`-`$image.id_image`"}
<li id="thumbnail_{$image.id_image}">
<a href="{$link->getImageLink($product->link_rewrite, $imageIds, thickbox_default)}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
</a>
</li>
{/foreach}
{/if}
</ul>
</div>

Aquí busca el “title” en cuestión donde encontraremos éste código:

{$image.legend|htmlspecialchars}

Lo sustituiremos por este otro:

{$product->name|escape:'htmlall':'UTF-8'}

El resultado final será:

<li id="thumbnail_{$image.id_image}">
<a href="{$link->getImageLink($product->link_rewrite, $imageIds, thickbox_default)}" rel="other-views" title="{$product->name|escape:'htmlall':'UTF-8'}">
<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
</a>
</li>

Con esto ya nos saldrá el título del producto en todas las imágenes del Fancybox.

Si queremos, también podemos hacer que sea visible la descripción corta del producto sólo poniendo este otro código:

{$product->description_short}