Nom del producte en imatges Fancybox (Prestashop)

Dijous, 7 Setembre 2017 | 20 Visites

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.

Primer de tot busqueu la pàgina de producte dins de la vostra plantilla:

..botiga/themes/plantilla/product.tpl

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>

Aquí buscarem el “title” en questió on hi trobarem aquest codi: {$image.legend|htmlspecialchars}
El substituirem per aquest altre: {$product->name|escape:’htmlall’:’UTF-8′}
El resultat final serà aquest:


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

Últimes entrades de Notícies d'actualitat

Argar Jorba

Article escrit per Argar Jorba

Dissenyador gràfic i desenvolupador web especialitzat en pàgines web i botigues online.
Si t'agraden els meus articles i vols consells més valuosos, no dubteu a fer una donació.