PrestaShop využíva pre otváranie zväčšených obrázkov na stránke detailu produktu jQuery framework nazvaný FancyBox. Framework má rôzne funkcie, ktoré však PrestaShop nevyužíva, čo je veľká škoda. V nasledujúcom návode Vám ukážem, ako dosiahnuť zobrazenie názvu produktu a počítadla fotografií v okne obrázku produktu tak, ako to môžete vidieť na obrázku nižšie. Okrem iného ešte doplníme aj zatváranie okna tlačidlom Esc klávesy. Nasledujúce úpravy boli robené na verzii PrestaShop 1.5.4.1. Je možné ich ale reprodukovať aj na iných verziách.
1. Úprava JavaScriptu
Otvorte a editujte súbor:
/themes/<nazov-vasej-sablony>/js/product.js
Okolo riadku 506 vložte úplne novú funkciu:
function formatTitle(title, currentArray, currentIndex, currentOpts) { return ''<div id="product-img-counter">'' + (currentIndex + 1) + '' z '' + currentArray.length + ''</div><div id="product-img-title">'' + (title && title.length ? ''<b>'' + title + ''</b>'' : '''' ) + ''</div>''; }
Tá nám vo výsledku zabezpečí, aby sa názov a počítadlo obrázkov formátovalo. Nižšie nájdite časť:
$(''.thickbox'').fancybox
Tú doplňte nasledujúcimi príkazmi:
''enableEscapeButton'' : true, ''titleShow'' : true, ''titlePosition'' : ''outside'', ''titleFormat'' : formatTitle,
Výsledný kód potom bude vyzerať nasledovne:
$(''.thickbox'').fancybox({ ''hideOnContentClick'' : true, ''enableEscapeButton'' : true, ''titleShow'' : true, ''titlePosition'' : ''outside'', ''titleFormat'' : formatTitle, ''transitionIn'' : ''elastic'', ''transitionOut'' : ''elastic'' });
2. Úprava CSS
Otvorte a editujte súbor:
/themes/<nazov-vasej-sablony>/css/product.css
Na spodok doplňte:
/* FancyBox formating */ #product-img-title { text-align: left; } #product-img-title b { display: block; margin-right: 80px; } #product-img-title span { float: right; } #product-img-counter { float:right; text-align: right; }
3. Úprava šablóny
Otvorte a editujte súbor:
/themes/<nazov-vasej-sablony>/product.tpl
V riadku okolo 198 nájdite kód:
<a href="{$link->getImageLink($product->link_rewrite, $imageIds, ''thickbox_default'')|escape:''html''}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}" title="{$image.legend|htmlspecialchars}">
časť kódu:
title="{$image.legend|htmlspecialchars}"
nahraďte kódom:
title="{$product->name|escape:''htmlall'':''UTF-8''}"
4. Hotovo!
Všetky tri pôvodné súbory zálohujte a upravené verzie nahrajte na FTP. Následne si vyčistite zálohy (cache) Vášho prehliadača, alebo na stránke detailu produktu stlačte klávesy CTRL+F5. Odteraz sa bude vo zväčšenej verzii obrázku produktu zobrazovať jeho názov a poradové čislo v galérii. Zároveň Vám pribudla aj možnosť zatvorenia obrázku klávesou Esc.
