Šablony v Prestashopu (jejich popis a tvorba)

Úvodní strana \ Prestashop \ Prestashop \ Šablony v Prestashopu (jejich popis a tvorba)

Šablony v Prestashopu (jejich popis a tvorba)

Neděle, 08 Březen 2009 13:55

Vítám Vás u seriálu článků věnující se tvorbě šablon pro Prestashop. V dnešním prvním dílu si ukážeme některé základní vlastnosti šablon, projdeme si všechny soubory, které se šablonou souvisí a ukážeme si jak zobrazovat moduly na jednotlivých pozicích.

Pracovat budeme se základní šablonou Prestashop, tak aby si úpravy mohl každý vyzkoušet. Nejdříve si něco řekneme o základní struktuře šablon v Prestashopu. Základní styly stránky jsou uloženy ve složce themes. Po otevření se nám ukáží všechny šablony které máme nainstalované. V základním balíku je to pouze šablona Prestashop. V té se nachází několik souborů *.tpl, které udávají kde a jak se budou jednotlivé moduly stránky zobrazovat. Dále zde najdeme složku css, kde se upravují styly stránky, img s obrázky šablony, js neboli javascriptové soubory a lang, kde jsou jazykové mutace.

Každá šablona má několik pozic do každé pozice pak Prestashop ukládá moduly. Pozici modulů si můžeme libovolně měnit v administraci, musíme však mít na paměti, že tento modul musí námi zvolenou pozici podporovat, o tom ale později. Abychom ovšem nemluvili jen teoreticky ukažme si strukturu na příkladu. Vezmeme kupříkladu pozici header. Nejprve otevřeme soubor header.php v kořenovém adresáři webu. Najdeme v něm takovýto kód:

<?php

// P3P Policies (http://www.w3.org/TR/2002/REC-P3P-20020416/#compact_policies)
header('P3P: CP="IDC DSP COR CURa ADMa OUR IND PHY ONL COM STA"');

require_once(dirname(__FILE__).'/init.php');

/* CSS */
$css_files[_THEME_CSS_DIR_.'global.css'] = 'all';

/* Hooks are volontary out the initialize array (need those variables already assigned) */
$smarty->assign(array(
    'HOOK_HEADER' => Module::hookExec('header'),
    'HOOK_LEFT_COLUMN' => Module::hookExec('leftColumn'),
    'HOOK_TOP' => Module::hookExec('top'),
    'static_token' => Tools::getToken(false),
    'token' => Tools::getToken(),
    'priceDisplayPrecision' => _PS_PRICE_DISPLAY_PRECISION_,
    'content_only' => intval(Tools::getValue('content_only'))
));

if(isset($css_files) AND !empty($css_files)) $smarty->assign('css_files', $css_files);
if(isset($js_files) AND !empty($js_files)) $smarty->assign('js_files', $js_files);

/* Display a maintenance page if shop is closed */
if (isset($maintenance) AND (!isset($_SERVER['REMOTE_ADDR']) OR $_SERVER['REMOTE_ADDR'] != Configuration::get('PS_MAINTENANCE_IP')))
{
    header('HTTP/1.1 503 temporarily overloaded');
    $smarty->display(_PS_THEME_DIR_.'maintenance.tpl');
    exit;
}

$smarty->display(_PS_THEME_DIR_.'header.tpl');

?>

Prvních 10 řádků kódu nás zatím nemusí zajímat. Co je pro nás důležité je inicializace pole $smarty, kde přiřazujeme šabloně tkz. HOOKy, to jsou vlastně pozice v pozici. Čili máme šablonu header, v které jsou tři pozice HEADER, LEFT_COLUMN a TOP. Tokeny se zatím nebudeme zabývat ty necháme tak jak jsou. Dále přiřazujeme proměné $smarty css a js soubory. Další podmínka zjišťuje zda- li není stránka mimo provoz, v tom případě zobrazí šablonu maintance.tpl, pokud jsou stránky v provozu zobrazíme soubor header.tpl.Tímto se přesuneme k souboru header.tpl ve složce themes/Prestashop/ jeho kód vypadá následovně, pro jednoduchost zobrazíme pouze strukturu od tagu body dolů:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
    {if !$content_only}
        <div id="page">

            
            <div id="header">
                <h1 id="logo"><a href="/{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="/{$img_ps_dir}logo.gif" alt="{$shop_name|escape:'htmlall':'UTF-8'}" width="233" height="65" /></a></h1>
                <div id="headerright">
                    {$HOOK_TOP}
                </div>
            </div>
            
            <div id="left_column" class="column">
                {$HOOK_LEFT_COLUMN}
            </div>

            
            <div id="center_column">
    {/if}

Vidíme, že šablona dost připomíná HTML kód s tím že do složených závorek vkládáme proměnné a podmínky. Hned za tagem body je podmínka, která zjišťuje, zda-li není nastaveno zobrazení pouze obsahu bez grafiky a formátování. Hned na začátku vkládáme do stránky logo. Odkaz je do kořenového adresáře ($base_dir), čili zobrazí index.php. Název odkazu je jméno obchodu ($shop_name) v kódování UTF-8. Nyní přichází na řadu samotný obrázek, proměná $img_ps_dir udává adresář obrázků ovšem ne v obrázcích šablony, ale přímo v adresáři img hned za kořenovým adresářem. Na pozici headerright vložíme náš druhý HOOK - TOP, ten první se vkládá do tagů head, a nedělá nic jiného než že vkládá odkazy na externí css a js soubory vložené v šabloně. Na místo HOOK - TOP tedy můžeme vkládat jednotlivé moduly, ale jak zjistíme opravdový název naší pozice, jejíž název se zobrazuje v administračním rozhranní? K tomu nám pomůže databáze. Otevřeme si databázi prestashopu a najdeme tabulku ps_hook, kde je seznam všech pozic které jsou doposud vytvořeny. Data ve sloupci name používáme při přiřazení hooku proměné $smarty. Sloupec Title se zobrazuje v administraci pod názvem pozice. Najedeme tedy do administrace, zvolíme v menu Modules a pod hlavním menu Position. Zde se nám zobrazí seznam všech pozic a seznam modulů, které mají přiřazeny. Naše pozice TOP se zobrazuje pod názvem "Top of pages". A vidíme v ní několik modulů (měny, jazyky, rychlé vyhledávání, atd.). Najedeme si tedy opět do průzkumníku souboru a otevřeme si složku modules/ a otevřeme si například modul s měnami (blockcurrencies/blockcurrencies.php)

Funkce install nás nezajímají, nejdůležitější částí je ovšem tato funkce:

    function hookTop($params)
    {
        global $smarty;
        $currencies = Currency::getCurrencies();
        if (!sizeof($currencies))
            return '';
        $smarty->assign('currencies', $currencies);
        return $this->display(__FILE__, 'blockcurrencies.tpl');
    }

Ta nám říká, že se modul bude zobrazovat v HOOKu TOP a přiřadí jí její šablonu. V tuto chvíli i kdyby jsme změnili v administračním rozhraní pozici tohoto modlu například na LEFT_COLUMN (Left column blocks) náš modul by se tam nezobrazil, protože nemá přiřazenou funkci pro zobrazení na této pozici. Pokud by jsme tedy chtěli zobrazitmodul v levém sloupci museli by jsme přidat další funkci takto:

function hookLeftColumn($params)
{

   global $smarty;
        $currencies = Currency::getCurrencies();
        if (!sizeof($currencies))
            return '';
        $smarty->assign('currencies', $currencies);
        return $this->display(__FILE__, 'blockcurrencies.tpl');
    }

Nyní už by se nám modul vlevo zobrazil. Poslední otázkou jak pozici modulu změnit v administračním rozhraní. Pokud jsme v záložce Modules, zvolíme opět Positions a poté Transplant positions. Zvolíme jméno našeho modulu a jeho novou pozici. Mějme při tom na paměti, že modul se nyní zobrazí na dvou pozicích, na staré a nové, námi zvolené.

To by bylo pro dnešek vše, příště si ukážeme jak vytvořit vlastní pozici v šabloně.

Komentáře (1)

Votre écriture est très élégant, très vivante et animée, j'ai vraiment comme vous, vous souhaite de continuer à écrire des articles de meilleure qualité, je vais souvent essayer de préoccupation, oh!