Blog o PrestaShope a obchodovaní

Úprava PrestaShop: Názov a počítadlo obrázkov v galérii produktu

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.

Úprava PrestaShop: Názov a počítadlo obrázkov v galérii produktu

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.


Nasledujúci článok: Novinka: Slovenčina pre komerčné šablóny
Predchádzajúci článok: PrestaShop 1.5.5.0 - oprava chýb a sprievodca nastavením dopravy

Kategórie

Spojte sa s nami

PrestaShop a celý jeho ekosystém sa neustále vyvíja a napreduje. Prijímajte od nás e-mailom aktuality o najnovších vydaniach, moduloch a doplnkoch.