|
Prestashop Css Layout 圖: 這是PrestaShop的Css Layout，方便大家知道主要的結(jié)構(gòu)： 關(guān)于設(shè)計整合PrestaShop的介紹 ： 網(wǎng)頁設(shè)計師只需要掌握好比較好的HTML和CSS技術(shù)便能改變Prestashop的外觀，如果想進一步的改變，甚至加些比默認(rèn)模版更絢麗的效果，你需要掌握好JQuery（Javascript庫）和Smarty（PHP模版語言）。 聽到這或許你會覺得非常的困難，甚至強調(diào)著“我只是個設(shè)計師，不是個程序員”。不用怕，把握J(rèn)Query和Smarty這兩種工具其實是比你想象中的簡單的，如果不想花精力去使外觀和互動性能更出色、更多變的話，當(dāng)然完全可以完整的用CSS來改變模版，下面將會提到是如何去實現(xiàn)的過程。 在這個設(shè)計者指導(dǎo)手冊開始前，請確認(rèn)你具備著比較好的XHTML和CSS這兩種技術(shù)，如果你還不會的話，可以先從這兩種技術(shù)慢慢學(xué)起再來看此篇手冊。 在我們跳到Prestashop模版設(shè)計前，我們先來看看Prestashop的文件結(jié)構(gòu)有些什么。當(dāng)你計劃去著手改變一個模版，清楚地了解文件的結(jié)構(gòu)是非常重要的，我們接下來還會有一篇15分鐘的文章引導(dǎo)，讓你分別對Smarty 和JQuery 有個大概的了解，如果你從沒有用過PHP Frameword 或者是Javascript. 庫德化，我建議你還是不要跳過這兩篇文章引導(dǎo)。 準(zhǔn)備好了么？好的！讓我們開始制作！ Prestashop快速手冊 Prestashop,像所有的PHP腳本語言一樣會加載本地服務(wù)器上的 index.php 文件。如果你的 Prestashop 商店程序是放在，當(dāng)客戶端輸入URL : http://www.,webserver會自動加載到index這個頁面。 為了了解咋們的Prestashop是如何運行的，我們需要去了解下index文件是如何去工作的。 Index.php Prestashop index.php文件中包含著以下的代碼 ：
include(dirname(__FILE__).'/config/config.inc.php'); include(dirname(__FILE__).'/header.php'); $smarty->assign('HOOK_HOME', Module::hookExec('home')); $smarty->display(_PS_THEME_DIR_.'index.tpl'); include(dirname(__FILE__).'/footer.php'); ?> 在 index.php 文件的開始包含著一個 config.inc.php 的文件，這個文件時主要處理我們的主要設(shè)置還有一些程序相關(guān)其它設(shè)置，config.inc.php 會檢查是否所有的東西已經(jīng)安裝好了，并且確認(rèn)了我們的默認(rèn)模版和默認(rèn)目錄，還有路徑、訂單的狀態(tài)還有其它的一些設(shè)置?；蛘攥F(xiàn)在你已經(jīng)在抱怨著什么時候才能開始學(xué)習(xí)到相關(guān)的模版制作，現(xiàn)在我們只知道 index.php 中包含了什么而已。 然而，作為一個網(wǎng)頁設(shè)計者，你可能需要及時地注意到了網(wǎng)頁上的錯誤信息，因此現(xiàn)在就要用到剛才所提到的 config.inc.php 文件了，在這個文件最上面幾行，你可以看到： @ini_set('display_errors', 'off'); If you change this to @ini_set('display_errors', 'on'); 現(xiàn)在你可以關(guān)閉錯誤信息報告了。不過要注意在下次正式安裝前要吧它改回來。 Header.php
// P3P Policies (http://www./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 voluntary 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'); ?> 看到這句代碼： $smarty->assign('HOOK_HOME', Module::hookExec('home')); 這里將會指定分配hook（我們通常都會第一時間把hook給指定分配了，你也可以指定哪些模塊在你網(wǎng)站中出現(xiàn)） $smarty->display(_PS_THEME_DIR_.'index.tpl'); 這一行代碼是說明 index.tpl 相當(dāng)于默認(rèn)主題模版目錄的位置（你可以定義或者添加你的主題，backoffice>> preferances>>appearance） Footer.php include(dirname(__FILE__).'/footer.php'); 這一行代碼include了我們的footer.php文件
if (isset($smarty)) { $smarty->assign(array( 'HOOK_RIGHT_COLUMN' => Module::hookExec('rightColumn'), 'HOOK_FOOTER' => Module::hookExec('footer'), 'content_only' => intval(Tools::getValue('content_only')))); $smarty->display(_PS_THEME_DIR_.'footer.tpl'); } ?> 盡管我們現(xiàn)在了解到了程序的配置設(shè)置，hooks還有不同的php文件包含，但是你會發(fā)現(xiàn)，目前為止，還沒出現(xiàn)我們所熟悉的HTML代碼。其實這個就是我們所有templates(tpl)的來源入口。tpl文件里面包含著HTML還有smarty模版語言。這些tpl文件大多都在你的模版目錄下，有些也在每個功能模塊目錄下。 現(xiàn)在來看看header.php文件，你會看到里面有這些代碼： $css_files[_THEME_CSS_DIR_.'global.css'] = 'all'; 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); $smarty->display(_PS_THEME_DIR_.'maintenance.tpl'); - Will display a maintenance page called maintenance.tpl if your shop is closed */ $smarty->display(_PS_THEME_DIR_.'header.tpl'); 我們的global.css和css、javascript文件都被包含在這里，html的顯示來自于header.tpl文件。 以此類推，index.php 和footer.php也有這對應(yīng)的index.tpl和footer.tpl（其它的文件也是這樣的命名規(guī)則） 現(xiàn)在目前看起來好像有點混亂了，不用擔(dān)心，堅持下去，接下來會變得簡單些的。 好了，從這里開始打段，總結(jié)下：index.php文件包含著header.php,index.tpl和footer.tpl,header.php和footer.php的tpl文件也分別取自他們本身的文件名。 我們主要的HTML代碼都來源于這三個tpl文件。 現(xiàn)在我們來打開header.tpl,index,tpl 還有footer.tpl,這里對于web設(shè)計師會相對熟悉點
{if isset($meta_description) AND $meta_description} {/if} {if isset($meta_keywords) AND $meta_keywords} {/if}
{if isset($css_files)} {foreach from=$css_files key=css_uri item=media}
{/foreach} {/if} var baseDir = '{$base_dir}'; var static_token = '{$static_token}'; var token = '{$token}'; var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
{if isset($js_files)} {foreach from=$js_files item=js_uri} {/foreach} {/if} {$HOOK_HEADER}
{if !$content_only}
|
|
|
