Dobrý den,
pouhé nahrání souboru nestačí, knihovnu musíte implementovat přímo do stránek. Ale v závěru není nutné používat nějakou další tooltip knihovnu, protože aplikace PrestaShop již obsahuje vlastní jQuery UI Tooltip. Uvedu zde postup úpravy pro aktuálně poslední majoritní verzi aplikace
1.6.1.
V souboru
controllers/front/ProductController.php najděte tuto část kódu:
Kód:
if (!$this->useMobileTheme())
{
$this->addCSS(_THEME_CSS_DIR_.'product.css');
$this->addCSS(_THEME_CSS_DIR_.'print.css', 'print');
$this->addJqueryPlugin(array('fancybox', 'idTabs', 'scrollTo', 'serialScroll', 'bxslider'));
$this->addJS(array(
_THEME_JS_DIR_.'tools.js', // retro compat themes 1.5
_THEME_JS_DIR_.'product.js'
));
}
a například za řádek:
Kód:
$this->addJqueryPlugin(array('fancybox', 'idTabs', 'scrollTo', 'serialScroll', 'bxslider'));
přidejte nový řádek:
Kód:
$this->addJqueryUI('ui.tooltip');
Takže ve finále bude kód vypadat:
Kód:
if (!$this->useMobileTheme())
{
$this->addCSS(_THEME_CSS_DIR_.'product.css');
$this->addCSS(_THEME_CSS_DIR_.'print.css', 'print');
$this->addJqueryPlugin(array('fancybox', 'idTabs', 'scrollTo', 'serialScroll', 'bxslider'));
$this->addJqueryUI('ui.tooltip'); // pridany radek pro tooltip
$this->addJS(array(
_THEME_JS_DIR_.'tools.js', // retro compat themes 1.5
_THEME_JS_DIR_.'product.js'
));
}
Po této úpravě dojde na stránce produktu k načtení potřebných knihoven.
A ještě musíte doplnit funkci pro zobrazení tooltipu. Takže například do souboru
themes/nazev-vasi-sablony/js/product.js přidejte úplně na konec následující kód:
Kód:
$(document).ready(function(){
$('.label-tooltip').tooltip();
});
Tento kód zajistí, že u jakéhokoliv elementu s třídou
label-tooltip dojde k zobrazení obsahu atributu
title jako tooltip.
Do popisu produktu pak můžete vložit například následující kód:
Kód:
<a class="label-tooltip" title="Text, který se zobrazí v tooltipu">Text, na kterém se zobrazí tooltip</a>
Pozor, pro vložení kódu si musíte textový editor přepnout na zobrazení
Zdrojový kód. A jestli se Vám text nezobrazí jako tooltip, tak vyzkoušejte
zaktualizovat cache Vašeho prohlížeče.
Chcete-li do stránek implementovat jinou knihovnu, postup bude podobný. Na stránce
Using jQuery and jQueryUI naleznete oficiální dokumentaci.
Jestli si na podobné úpravy netroufáte, můžete se obrátit na některého z
našich partnerů (příp. vpravo blok
PrestaShop partneři), který se aplikaci věnuje. Případně jsou k dispozici moduly, pomocí kterých dosáhnete stejného efektu, např.
Custom Tooltip Module.
Přihlásit se
Registrovat
FAQ
Hledat
