Nom del producte en imatges Fancybox (Prestashop)

Quan entrem en una pàgina de producte de la versió de Prestashop 1.5 i fem “click” en una imatge d’aquest producte podem veure les imatges en gran d’aquest producte. Aquí us explicaré com afegir-hi el nom del producte en la part inferior.

Com podreu veure és una tasca molt senzilla però serà un detall de qualitat de la teva botiga online.

Un cop estigueu dins aquest arxiu haureu de buscar el llistat d’imatges del producte:

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

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

Amb això ja ens sortirà el títol del producte a totes les imatgen del Fancybox.

Si volem també podem fer que hi sigui visible la descripció curta del producte només posant-hi aquest altre codi: {$product->description_short}