Prestashop中文模版制作指南

Stella981
• 阅读 1083

Prestashop Css Layout :

这是PrestaShop的Css Layout,方便大家知道主要的结构:

关于设计整合PrestaShop的介****绍 :

网页设计师只需要掌握好比较好的HTML和CSS技术便能改变Prestashop的外观,如果想进一步的改变,甚至加些比默认模版更绚丽的效果,你需要掌握好JQuery(Javascript库)和Smarty(PHP模版语言)。

听到这或许你会觉得非常的困难,甚至强调着“我只是个设计师,不是个程序员”。不用怕,把握JQuery和Smarty这两种工具其实是比你想象中的简单的,如果不想花精力去使外观和互动性能更出色、更多变的话,当然完全可以完整的用CSS来改变模版,下面将会提到是如何去实现的过程。

在这个设计者指导手册开始前,请确认你具备着比较好的XHTML和CSS这两种技术,如果你还不会的话,可以先从这两种技术慢慢学起再来看此篇手册。

在我们跳到Prestashop模版设计前,我们先来看看Prestashop的文件结构有些什么。当你计划去着手改变一个模版,清楚地了解文件的结构是非常重要的,我们接下来还会有一篇15分钟的文章引导,让你分别对Smarty 和JQuery 有个大概的了解,如果你从没有用过PHP Frameword 或者是Javascript 库德化,我建议你还是不要跳过这两篇文章引导。

准备好了么?好的!让我们开始制作!

Prestashop****快速手册

Prestashop,像所有的PHP脚本语言一样会加载本地服务器上的 index.php 文件。如果你的 Prestashop 商店程序是放在mystore.com,当客户端输入URL :  http://www.mystore.com,webserver会自动加载到index这个页面。

为了了解咋们的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');_

现在你可以关闭错误信息报告了。不过要注意在下次正式安装前要吧它改回来。

H****eader.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设计师会相对熟悉点

_



{$meta_title|escape:'htmlall':'UTF-8'}
{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}




{if isset($js_files)}
{foreach from=$js_files item=js_uri}

{/foreach}
{/if}
{$HOOK_HEADER}

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




Prestashop中文模版制作指南






{$HOOK_LEFT_COLUMN}



{/if}_

Index.tpl

{$HOOK_HOME}

Footer.tpl

{if !$content_only}

_


{$HOOK_RIGHT_COLUMN}




{/if}

_

再来看看homepage的源文件:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">_



Prestashop demo

















Prestashop中文模版制作指南















_
可能你会注意到了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

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
11个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这