Prestashop中文模版製做指南

時間  2019-11-21
標籤 prestashop 中文 模版 製做 指南 简体版
原文   原文鏈接

Prestashop Css Layout 圖:javascript

這是PrestaShop的Css Layout，方便你們知道主要的結構：php

 

關於設計整合PrestaShop的介紹 ：css

網頁設計師只須要掌握比如較好的HTML和CSS技術便能改變Prestashop的外觀，若是想進一步的改變，甚至加些比默認模版更絢麗的效果，你須要掌握好JQuery（Javascript庫）和Smarty（PHP模版語言）。html

聽到這或許你會以爲很是的困難，甚至強調着「我只是個設計師，不是個程序員」。不用怕，把握JQuery和Smarty這兩種工具實際上是比你想象中的簡單的，若是不想花精力去使外觀和互動性能更出色、更多變的話，固然徹底能夠完整的用CSS來改變模版，下面將會提到是如何去實現的過程。java

在這個設計者指導手冊開始前，請確認你具有着比較好的XHTML和CSS這兩種技術，若是你還不會的話，能夠先從這兩種技術慢慢學起再來看此篇手冊。jquery

在咱們跳到Prestashop模版設計前，咱們先來看看Prestashop的文件結構有些什麼。當你計劃去着手改變一個模版，清楚地瞭解文件的結構是很是重要的，咱們接下來還會有一篇15分鐘的文章引導，讓你分別對Smarty 和JQuery 有個大概的瞭解，若是你從沒有用過PHP Frameword 或者是Javascript 庫德化，我建議你仍是不要跳過這兩篇文章引導。程序員

準備好了麼？好的！讓咱們開始製做！web

Prestashop快速手冊服務器

Prestashop,像全部的PHP腳本語言同樣會加載本地服務器上的 index.php 文件。若是你的 Prestashop 商店程序是放在mystore.com，當客戶端輸入URL :  http://www.mystore.com,webserver會自動加載到index這個頁面。app

爲了瞭解咋們的Prestashop是如何運行的，咱們須要去了解下index文件是如何去工做的。

Index.php

Prestashop index.php文件中包含着如下的代碼 ：

<?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 的文件，這個文件時主要處理咱們的主要設置還有一些程序相關其它設置，config.inc.php 會檢查是否全部的東西已經安裝好了，而且確認了咱們的默認模版和默認目錄，還有路徑、訂單的狀態還有其它的一些設置。或者如今你已經在抱怨着何時才能開始學習到相關的模版製做，如今咱們只知道 index.php 中包含了什麼而已。

然而，做爲一個網頁設計者，你可能須要及時地注意到了網頁上的錯誤信息，所以如今就要用到剛纔所提到的 config.inc.php 文件了，在這個文件最上面幾行，你能夠看到：

@ini_set('display_errors', 'off');
If you change this to
@ini_set('display_errors', 'on');

如今你能夠關閉錯誤信息報告了。不過要注意在下次正式安裝前要吧它改回來。

Header.php

<?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 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給指定分配了，你也能夠指定哪些模塊在你網站中出現）

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

這一行代碼是說明 index.tpl 至關於默認主題模版目錄的位置（你能夠定義或者添加你的主題，backoffice>> preferances>>appearance）

Footer.php

include(dirname(__FILE__).'/footer.php');

這一行代碼include了咱們的footer.php文件

<?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');
}
?>

儘管咱們如今瞭解到了程序的配置設置，hooks還有不一樣的php文件包含，可是你會發現，目前爲止，還沒出現咱們所熟悉的HTML代碼。其實這個就是咱們全部templates(tpl)的來源入口。tpl文件裏面包含着HTML還有smarty模版語言。這些tpl文件大多都在你的模版目錄下，有些也在每一個功能模塊目錄下。

如今來看看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也有這對應的index.tpl和footer.tpl（其它的文件也是這樣的命名規則）

如今目前看起來好像有點混亂了，不用擔憂，堅持下去，接下來會變得簡單些的。

好了，從這裏開始打段，總結下：index.php文件包含着header.php,index.tpl和footer.tpl,header.php和footer.php的tpl文件也分別取自他們自己的文件名。

咱們主要的HTML代碼都來源於這三個tpl文件。

如今咱們來打開header.tpl,index,tpl 還有footer.tpl,這裏對於web設計師會相對熟悉點

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
    <head>
        <base href="{$protocol}{$smarty.server.HTTP_HOST|escape:'htmlall':'UTF-8'}{$base_dir}" />
        <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
        <meta name="description" content="{$meta_description|escape:htmlall:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
        <meta name="keywords" content="{$meta_keywords|escape:htmlall:'UTF-8'}" />
{/if}
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <meta name="generator" content="PrestaShop" />
        <meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />
        <link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico" />
        <link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico" />
{if isset($css_files)}
    {foreach from=$css_files key=css_uri item=media}
    <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
    {/foreach}
{/if}
        <script type="text/javascript" src="{$base_dir}js/tools.js"></script>
        <script type="text/javascript">
            var baseDir = '{$base_dir}';
            var static_token = '{$static_token}';
            var token = '{$token}';
            var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
        </script>
        <script type="text/javascript" src="{$base_dir}js/jquery/jquery-1.2.6.pack.js"></script>
        <script type="text/javascript" src="{$base_dir}js/jquery/jquery.easing.1.3.js"></script>
{if isset($js_files)}
    {foreach from=$js_files item=js_uri}
    <script type="text/javascript" src="{$js_uri}"></script>
    {/foreach}
{/if}
        {$HOOK_HEADER}
    </head>

    <body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
    {if !$content_only}
        <div id="page">
            <!-- Header -->
            <div>
                <h1 id="logo"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>
                <div id="header">
                    {$HOOK_TOP}
                </div>
            </div>
            <!-- Left -->
            <div id="left_column" class="column">
                {$HOOK_LEFT_COLUMN}
            </div>
            <!-- Center -->
            <div id="center_column">
    {/if}

Index.tpl

{$HOOK_HOME}

Footer.tpl


    {if !$content_only}
            </div>
<!-- Right -->
            <div id="right_column" class="column">
                {$HOOK_RIGHT_COLUMN}
            </div>
<!-- Footer -->
            <div id="footer">{$HOOK_FOOTER}</div>
        </div>
    {/if}
    </body>
</html>

再來看看homepage的源文件：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <base href="http://127.0.0.1/prestashop/" />
    <title>Prestashop demo</title>
    <meta name="description" content="Shop powered by PrestaShop" />
    <meta name="keywords" content="shop, prestashop" />
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="generator" content="PrestaShop" />
    <meta name="robots" content="index,follow" />
    <link rel="icon" type="image/vnd.microsoft.icon" href="/prestashop/img/favicon.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="/prestashop/img/favicon.ico" />
    <link href="/prestashop/themes/commotion/css/global.css" rel="stylesheet" type="text/css" media="all" />
        <script type="text/javascript" src="/prestashop/js/tools.js"></script>
        <script type="text/javascript">
            var baseDir = '/prestashop/';
            var static_token = '8d6a4d79d983512d770333775a7d8d24';
            var token = '521aacf70fb52a35b4f94e01366c4c64';
            var priceDisplayPrecision = 2;
        </script>
        <script type="text/javascript" src="/prestashop/js/jquery/jquery-1.2.6.pack.js"></script>
        <script type="text/javascript" src="/prestashop/js/jquery/jquery.easing.1.3.js"></script>
  </head>
    <body id="index">
            <div id="page">
            <!-- Header -->
            <div>
                <h1 id="logo"><a href="/prestashop/" title="Prestashop demo"><img src="/prestashop/img/logo.jpg" alt="Prestashop demo" /></a></h1>
                <div id="header">

                </div>
            </div>
            <!-- Left -->
            <div id="left_column" class="column">

            </div>
            <!-- Center -->
            <div id="center_column">
                     </div>
<!-- Right -->
            <div id="right_column" class="column">

            </div>
<!-- Footer -->
            <div id="footer">
        </div>
        </div>
        </body>
</html>
可能你會注意到了index.tpl 只有一行{$HOOK_HOME}。這裏是由於index文件只在homepage上顯示咱們所指定的模塊，咱們的目錄還有產品頁將會顯示其它的模塊。

固然，你可能也會發現咱們每一個頁面都有一個不一樣的body id，方便了咱們用css去定義他們單獨的每一個頁面，或許你之後還想在body上加上些class，那麼這句是從哪句代碼得來的呢？看看header.tpl，這段代碼就是用來實現它的:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}> and it is this code that gets the page name. So category.tpl will have the <body id="category">

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程