来自damon的zencart二次开发教程-3.1开发自己的zencart模板 - 付潭

来自damon的zencart二次开发教程-3.1开发自己的zencart模板

转载自：http://www.yunxiu.org/blog/

 

今天在网上FQ看到一篇老外写的，关于制作zencart模板的文章。《Creating a new Zen Cart Template》,翻译了一遍，希望借此篇文章来给和我一样，想动手制作zencart模板却又无从下手的朋友们一点启发。为了避免我翻译有误，也为了 尊重原作者，我将原文也一并复制出来，以供大家参详。最后，共享一个zencart免费模板下载的网址：http://zencarttemplates.info/index.php.大家可以在这个网站上下载一些模板，然后参考一下别人的模板都是怎么写的。

Creating A File System 创建一个文件系统
"Let us start building a new template for Zen Cart by creating a new folder under includes/templates/. Let us name it Packt (or whatever you like). But remember to use underscore instead of spaces in a long name. Avoid using Book Shop. Instead, use book_shop or BookShop.

• images\' folder —will contain all the images needed for the template.
• css\' folder — will contain all the CSS files for the template. It\'s better to copy all the files from the includes/templates/template_default/css directory to this css folder.
• common\' folder — will contain the common files for the template. You may copy the files from the includes/templates/template_default/common folder, and edit those to suit your needs.
• sideboxes\'folder — will contain module-specific sideboxes. Here, you can add new sideboxes, which you are going to use.
• templates folder — contains page-specific templates. Whenever you want to change a page\'s layout, copy the template for that page to this directory and modify it as required."

在inlude/templates文件夹下创建一个名为Packt（或者你随意去一个自己喜欢的名字，比如我用的就是taoci）的文件夹。但是 记住在一个很长的名字中，使用下划线来代替空格。比如避免使用Book Shop这样的名字，而是使用book_shop或者BookShop代替。在taoci文件夹下新建如下文件：

• images文件夹 — 包含所有模板所需的图片文件.
• css文件夹 — 包含所有模板所需的css文件.你最好直接将默认模板 includes/templates/template_default/css 文件夹下的所有css文件直接复制到该文件夹中.
• common文件夹 — 包含所有公用文件，如头部header，底部footer等等. 你同样可以将默认模板 includes/templates/template_default/common 文件下的文件复制过来,然后根据你的需要来编辑里面的文件.
• sideboxes文件夹 — 包含sidebox模块下的文件.在这里你能新建你想要使用的新的sidebox.
• templates文件夹 — 包含指定页面的文件，如：登录页面login，支付页面check-out等等.无论你什么时候想要修改页面的布局，复制对应的模板文件，然后按你的需要修改。

"Information regarding a template is located in the template_info.php file. You need to create a new template_info.php file for the new template. Copy the file called includes/templates/template_default/template_info.php into the new template folder, and then open the template_info.php file in your favorite text editor.

Change the text between each set of single quotes to suit your new template.

<?php
   $template_name = \'Packt Publishing\';
   $template_version = \'Version 1.0\';
   $template_author = \'Suhreed Sarkar\';
   $template_description = \'This template is designed for Packt Publishing\';
   $template_screenshot = \'\';
?>

Remember to keep the single quotes. Your template name does not need to be identical to your folder name, and you can use spaces to make it read well, but it is best to keep them similar. Leave the space between the quotes for the template screenshot field empty for now, as you don\'t have one yet."

有关模板的信息都被放在一个名为"template_info.php"的文件中，你需要为你的模板创建一个新的"template_info.php"文件，你需要现将原来默认模板中的"template_info.php"文件复制到与新模板对应的目录中。并编辑它：

<?php
   $template_name = \'ec-shalom\';  //模板名称
   $template_version = \'Version 1.0\';    //版本  
   $template_author = \'damon\';  //作者
   $template_description = \'This template is designed for Packt Publishing\';  //描述
   $template_screenshot = \'\';  //截图
?>

记住使用单引号，你的模板名称不需要和文件夹的名称一样。你也可以使用空格使它更容易理解。在屏幕截图这一行留空，你现在还不需要它。

When you\'ve finished, your new file structure should appear as follows:

模板文件系统

Open your Admin panel and navigate to Tools | Template Selection. Click the Edit button, then choose Packt Publishing from the drop-down menu and click the Update button. Now, navigate to Tools | Layout boxes controller, and click the Reset button at the bottom of the page.

Your new template is now enabled and ready to be customized.

当你完成上述步骤，你的文件结构就应该如上图所示：

打开你的后台->Tools->Template Selection.点击edit，选择你的模板，比如我的就是taoci。接着，选择Tools->Layout Box Controller，点击最下面的重置按钮。

你的新模板就激活了，剩下的就是修改模板了。
Using Overrides 利用覆盖特性
When building a new template for Zen Cart, you can use its powerful overriding feature. Overriding means using some template as the base and extending it by adding different properties through separate templates. For example, you may want to make some modifications to the default template—template_default. You could modify the files in the template_default directory to do this. But due to its overriding character, you can add the changes in the new template, say packt, which will apply the changes to the shop.

In fact, you can override any file in the path includes/templates/ template_default. Files in this directory generally determine the layout and the HTML formatting of your web pages. By default, Zen Cart has two standard templates: template_default and classic, both of which are located in the includes/templates/ folder.

Out of these two standard templates, only template_default contains a full set of files. Every other template contains only the files that differ from template_default. If your template does not contain a particular file, Zen Cart will pull that file from template_default.

当你创建一个新的zencart模板时，你可以使用它强大的覆盖特性。覆盖意味着使用一些基础模板文件并通过分离模板增加不同的特性来扩展它。比如说，你可能想要对默认模板做一些改变。你能够修改template_default文件夹中的一些文件来达到目的。但根据zencart的覆盖特性，你也可以在新的模板（比如：taoci）中做一些你想要应用到网店的改变。

事实上，你能够覆盖任何在路径includes/templates/ template_default下的文件。这个文件夹决定了你的网页布局和HTML格式。默认情况下，zencart有两个标准的模板：template_default 和 classic，它们都存放在includes/templates/文件夹中。

由于这两个标准的模板中，只有template_default中有全套的文件，所以每一套新的模板中所包含的文件仅仅是与template_default中的文件有所不同。如果你的模板中没有包含对应的独有文件，zencart自动将调用template_default中的文件。

Graphics 图片
You need to add your templates graphics to the appropriate folders. The header image, logo, background image, background image for sidebox headings, and so on should be placed in the images directory under your template directory. If you want to change the buttons and icons, create the graphic files in the GIF, JPG or PNG format and put them in the /includes/templates/template_name/buttons/language_name folder. Then, update the button_names.php file to define the button image file name, and the ALT texts for those images.

你需要将你的模板图片放入正确的文件夹中。头部图片，logo，背景图片以及顶部边栏的背景图片之类，都需要放到你模板文件夹下的images文件 夹中。如果你想要修改按钮或者是图标，请将图片保存为GIF, JPG 或者 PNG格式，并且将他们放到/includes/templates/template_name/buttons/language_name文件夹 下。然后，更新文件button_name.php来重新定义按钮图片文件名称和alt描述。

Sideboxes 边栏

You do not need to copy existing sideboxes from the template_default directory, as these will automatically be displayed. If you are planning to develop a new sidebox, put the template for that sidebox in the sideboxes folder under your template directory.

A sidebox consists of three files, which are located in the includes directory:

• modules/sideboxes/template_name/name_of_sidebox.php\'
• languages/english/extra_definitions/template_name/ name_of_sidebox_defines.php \'
• templates/template_name/sideboxes/tpl_name_of_sidebox.php \'

You need to replace template_name and name_of_sidebox with your template name and the sidebox name respectively. For example, let us build a sidebox named my_sidebox. Then, my_sidebox.php file will read like this:

<?php
$show_my_sidebox = true;
if ($show_my_sidebox == true){
require($template->get_template_dir(\'tpl_my_sidebox.php\', 
DIR_WS_TEMPLATE, $current_page_base,\'sideboxes\'). \'/tpl_my_sidebox.php\');
$title = BOX_HEADING_MY_SIDEBOX;
$left_corner = false;
$right_corner = false;
$right_arrow = false;
require($template->get_template_dir($column_box_default,
 DIR_WS_TEMPLATE, $current_page_base,\'common\') . 
\'/\' . $column_box_default);
}
?>

This page actually defines what is to be shown in that sidebox. Note that this page also includes the corresponding template file. Here, we have used a constant BOX_HEADING_MY_SIDEBOX. You need to define this in the includes/languages/english/extra_definitions/packt/my_sidebox_defines.php file. This file will look like this:

<?php
define(\'BOX_HEADING_MY_SIDEBOX\', \'My Sidebox\');
?>

Now, you have to build its template file includes/templates/packt/sideboxes/tpl_my_sidebox.php, which will read as:

<?php
$content = "This is my first Sidebox. I have created it in 5
 minutes. Although it is not of practical use yet, I 
hope I can eventually build a good sidebox.";
?>

If you have created these files for the packt template, you can try it by going to Tools | Layout Boxes Controller in the administration panel. From here, turn the sidebox ON and set it up to display in the left or the right side column. This sidebox will look like the following figure.

create a sidebox

Stylesheets

All stylesheets for your new template should be placed in the/includes/templates/template_name/css folder. You should follow stylesheet naming conventions. It is a good idea to copy an old stylesheet and then modify it to suit your needs. You can have multiple stylesheets for your shop you can even add a stylesheet for each page.

As a design rule, try to keep the declarations minimal, simple, and self explanatory. Try to restrain yourself from changing the class and ID names in the core files.

你不需要从默认模板文件夹中复制已经存在的边栏，因为他们会自动显示。如果你打算自己做一个新的边栏，那么你就需要将你的边栏模板文件放到你自定义的模板文件夹中。

一个完整的边栏包括三个文件，都放在includes文件夹中：

• modules/sideboxes/template_name/name_of_sidebox.php\'
• languages/english/extra_definitions/template_name/ name_of_sidebox_defines.php \'
• templates/template_name/sideboxes/tpl_name_of_sidebox.php \'

你需要将 template_name 用你自定义的模板名称（比如：packt）替换，同时 name_of_sidebox 用你自定义的边栏名称替换。例如，让我们创建一个边栏名称为 \'my_sidebox\'，在 my_sidebox.php文件中写入以下代码：

<?php
$show_my_sidebox = true;
if ($show_my_sidebox == true){
require($template->get_template_dir(\'tpl_my_sidebox.php\', 
DIR_WS_TEMPLATE, $current_page_base,\'sideboxes\'). \'/tpl_my_sidebox.php\');
$title = BOX_HEADING_MY_SIDEBOX;
$left_corner = false;
$right_corner = false;
$right_arrow = false;
require($template->get_template_dir($column_box_default,
 DIR_WS_TEMPLATE, $current_page_base,\'common\') . 
\'/\' . $column_box_default);
}
?>

my_sidebox.php 是用来规定边框的显示内容的。注意这个页面也包含了对应的模板文件。在这里，我们使用了一个常量BOX_HEADING_MY_SIDEBOX.你需要在 文件includes/languages/english/extra_definitions/packt /my_sidebox_defines.php 中定义该常量。代码如下：

<?php
define(\'BOX_HEADING_MY_SIDEBOX\', \'My Sidebox\');
?>

现在，你还得创建文件 includes/templates/packt/sideboxes/tpl_my_sidebox.php, 代码如下:

<?php
$content = "This is my first Sidebox. I have created it in 5
 minutes. Although it is not of practical use yet, I 
hope I can eventually build a good sidebox.";
?>

如果你已按上述步骤创建好对应的文件了，你可以到后台面板中的 Tools | Layout Boxes Controller ，选择边栏开关 sidebox为 \'ON\'，并设置好显示在左边还是右边，回到前台就可以看到效果了。如下图所示：

create a sidebox

样式表
你自定义的模板样式都放在/includes/templates/template_name/css文件夹下，在为你的模板命名新的样式表时，记得要遵循样式表命名的惯例。把你原有的样式表复制一份，然后按你的要求来修改是个不错的想法。你可以为你的网店设置多个样式，甚至可以每个页面都添加一个样式表。

样式设计法则：保证样式的选择器尽量少而简，并且名称易于理解，尽量不要修核心文件的id和class属性。

Creating and Modifying Email Templates 创建和修改E-mail模板
As a store owner, you need to send several mails to your existing and potential customers. All these emails use some templates that reside in the /email folder under the Zen Cart installation directory. To change these emails to your style, you may edit these templates.

The email\'s structure is determined in one of two ways. If you are sending plain text emails, the email structure is determined by the way you put together the various items (customer greeting, order number, link to detailed invoice, and so on) in a string variable that is then passed to the zen_mail() function. If you are sending HTML emails, the structure is determined by the template you use.

作为店长，你时常需要发送一些邮件给你的老客户或是潜在的客户。所有的E-mail模板都保存在Zencart安装目录中的 /email文件夹中。你可以按照自己的需要来修改这些邮件模板。

E-mail的格式有两种方式。一种是text emails，这种E-mail的格式取决于你将多种变量（问候客户，订单号，发票链接等等）组合到一个字符串变量的方式，发送邮件的方式则是利用函数 zen_mail().另一种是HTML emails，这种结构取决于你正使用的模板。

Text Email Template 文本模板

You can rearrange, add, or delete items in a plain text email. To do so, you will need to edit the Zen Cart files where the email is created. For example, if you want to edit the order confirmation email, you will need to edit the file includes/classes/order.php.

In your example, open up includes/classes/order.php and scroll down to the bottom of the file, in the function send_order_email(). There, you will see the lines that construct the plain text email message:

[Line 827]
$email_order = EMAIL_TEXT_HEADER . EMAIL_TEXT_FROM . STORE_NAME . "n
n" . $this->customer[\'firstname\'] . \' \' . $this->customer[\'lastname\'] 
. "nn" . EMAIL_THANKS_FOR_SHOPPING . "n" . EMAIL_DETAILS_FOLLOW 
. "n" . EMAIL_SEPARATOR . "n" . EMAIL_TEXT_ORDER_NUMBER . \' \' . 
$zf_insert_id . "n" . EMAIL_TEXT_DATE_ORDERED . \' \' . strftime(DATE_
FORMAT_LONG) . "n" . EMAIL_TEXT_INVOICE_URL . \' \' . zen_href_
link(FILENAME_ACCOUNT_HISTORY_INFO, \'order_id=\' . $zf_insert_id, \'SSL\' 
[Line 848]
$email_order .= zen_db_output($this->info[\'comments\']) . "nn";
[Line 855]
$email_order .= EMAIL_TEXT_PRODUCTS . "n" .
EMAIL_SEPARATOR . "n" .
$this->products_ordered .
EMAIL_SEPARATOR . "n";

In this file, the variable that holds the plain text email message is called $email_order. It generally has a different name in each file, such as $email or $email_text. Whatever its name, this is the place where you will make your changes. You can add, delete, and rearrange the order of the items to suit your wishes.

在一个文本邮件模板中，你能够重组、增加和删除词条。为了达到这一目的，你需要修改zencart生成邮件的文件。比如说，你想要修改订单确认邮件，你需要修改includes/classes/order.php.具体步骤如下：

打开includes/classes/order.php文件，来到文件的底部，查看函数send_order_email()。你能够看到有关邮件模板的代码如下：

[Line 827]
$email_order = EMAIL_TEXT_HEADER . EMAIL_TEXT_FROM . STORE_NAME . "n
n" . $this->customer[\'firstname\'] . \' \' . $this->customer[\'lastname\'] 
. "nn" . EMAIL_THANKS_FOR_SHOPPING . "n" . EMAIL_DETAILS_FOLLOW 
. "n" . EMAIL_SEPARATOR . "n" . EMAIL_TEXT_ORDER_NUMBER . \' \' . 
$zf_insert_id . "n" . EMAIL_TEXT_DATE_ORDERED . \' \' . strftime(DATE_
FORMAT_LONG) . "n" . EMAIL_TEXT_INVOICE_URL . \' \' . zen_href_
link(FILENAME_ACCOUNT_HISTORY_INFO, \'order_id=\' . $zf_insert_id, \'SSL\' 
[Line 848]
$email_order .= zen_db_output($this->info[\'comments\']) . "nn";
[Line 855]
$email_order .= EMAIL_TEXT_PRODUCTS . "n" .
EMAIL_SEPARATOR . "n" .
$this->products_ordered .
EMAIL_SEPARATOR . "n";

在这个文件中，我们可以看到一个完整的文本邮件模板被保存在一个名为$email_order的变量中。一般来说，它都有不同的名称，比如$email 或者 $email_text，但不变的是，当你需要修改这些常量词条来达到你想要的效果时，修改这一类型的变量。

HTML Email Templates HTML邮件模板
HTML Email templates have two parts: embedded CSS and HTML codes. You may be surprised to see the embedded stylesheet in each mail template, and may want to know why linked stylesheets have not been used. One reason for not using the linked stylesheet is that you may not know how the email clients will behave. Most email clients used today can handle HTML emails and stylesheets to some extent. But there is no guarantee that every customer will have an email client that can retrieve linked stylesheets and render the emails in the desired format.

HTML邮件模板包括两个部分：嵌入的样式和HTML代码。你可能会惊讶，为什么每个邮件模板都嵌入了一个样式表，而不是从外部导入样式。这是因为 你可能无法知道邮件客户端的反馈。目前，大多数的邮件客户端都支持样式和HTML 邮件作为扩展，但是，没人能保证每一个收取邮件的客户使用的邮件客户端都能够索引到样式表并且按照你希望的格式来显示。

Stylesheets 样式表
The first portion of the email template is devoted to defining styles for different parts of the mail. Open the /email/email_template_welcome.html file in your favorite text editor to examine the stylesheet in an email template. The stylesheet in this template will appear as follows:

<style type="text/css">
.body {background-color:#ffffff; color:#000000; font-family:Verdana, 
Arial, Helvetica, sans-serif;}
...
.header {font-size:10px; padding:0px; width:550px;}
.content {font-size:10px; padding:5px; width:550px;}
.content-line {padding:5px;}
.coupon-block { padding: 5px; border: 1px #cccccc solid; background-
color: #FFFF99; }
...
.disclaimer1 a:link {color:#666666;}
.disclaimer1 a:visited {color:#666666;}
.disclaimer2 { color: #666666; padding: 5px; }
.copyright { border-bottom: 0px #9a9a9a solid; padding: 5px; }
</style>

Style declarations in this stylesheet are straight-forward. First, it has defined style for the body and hyperlinks. Then, it defines the content and email related styles. Most of the style names are self-explanatory. You will find the HTML blocks with these names in the template.

HTML with variables
The main part of the email template is the HTML code with style classes and variables. The following are some of the variables used to construct content for the email:

• $EMAIL_GREETING
• $EMAIL_WELCOME
• $COUPON_BLOCK
• $GV_BLOCK
• $EMAIL_MESSAGE_HTML
• $EMAIL_CONTACT_OWNER
• $EMAIL_CLOSURE
• $EMAIL_FOOTER_COPYRIGHT
• $EMAIL_DISCLAIMER
• $EMAIL_SPAM_DISCLAIMER
• $EXTRA_INFO

These variables are defined in several PHP files, such as create_account.php. Once you have found the files that need to be edited, you may want to add a definition for your new HTML item to each one. For example, you have added an item called $EMAIL_HOURS_OF_OPERATION to theemail_template_order_status.html template. One of the files that you will need to edit isadmin/orders.php. Find the part of that file where the email message is being constructed. In this case, it begins around line 100.

You can see that the HTML message is constructed with several statements such as:

$html_msg[\'EMAIL_CUSTOMERS_NAME\'] = $check_status->fields[\'customers_name\'];
$html_msg[\'EMAIL_TEXT_ORDER_NUMBER\'] = EMAIL_TEXT_ORDER_NUMBER . \' \' . $oID;

All you need to do is add a new statement under all of these, to define your new item:

$html_msg[\'EMAIL_HOURS_OF_OPERATION\'] = \'We are open from 9 AM to 5 PM
every day of the week.\';

Use a $ in front of the name of your new item in the HTML template, but do not use the $ where you define it.

To change the text displayed in your emails, edit the corresponding language file. You can change an existing text, or add a new one (if you\'ve added it to your email structure). You add or change text values using the define() statements:

define(EMAIL_LOVELY_YOU_DROPPED_BY,\'We are just so immeasurably 
delighted that you stopped by our store today!\');

There is another language file you need to modify when altering text for your emails,includes/languages/english/email_extras.php. This file contains several text strings common to all emails sent from your store.

邮件模板的第一部分就是定义邮件不同部分的样式。在一个邮件模板中用编辑器打开文件/email/email_template_welcome.html来查看样式文件。代码如下：

<style type="text/css">
.body {background-color:#ffffff; color:#000000; font-family:Verdana, 
Arial, Helvetica, sans-serif;}
...
.header {font-size:10px; padding:0px; width:550px;}
.content {font-size:10px; padding:5px; width:550px;}
.content-line {padding:5px;}
.coupon-block { padding: 5px; border: 1px #cccccc solid; background-
color: #FFFF99; }
...
.disclaimer1 a:link {color:#666666;}
.disclaimer1 a:visited {color:#666666;}
.disclaimer2 { color: #666666; padding: 5px; }
.copyright { border-bottom: 0px #9a9a9a solid; padding: 5px; }
</style>

选择器直接了当，首先他规定了整个文档和超链接的样式属性。接着是邮件内容的属性。大多数的样式名称易于理解，你可以在HTML模块里面找到对应的名称。

HTML with variables
HTML邮件模板的主要部分是样式类和变量，以下是一些实例：

• $EMAIL_GREETING
• $EMAIL_WELCOME
• $COUPON_BLOCK
• $GV_BLOCK
• $EMAIL_MESSAGE_HTML
• $EMAIL_CONTACT_OWNER
• $EMAIL_CLOSURE
• $EMAIL_FOOTER_COPYRIGHT
• $EMAIL_DISCLAIMER
• $EMAIL_SPAM_DISCLAIMER
• $EXTRA_INFO

这些模板都是在一些php文件中被定义，比如create_account.php.一旦你找到了你需要编辑的文件，你可以为你的HTML模板添加一个变量。比如你想增加变量 $EMAIL_HOURS_OF_OPERATION到模板 email_template_order_status.html中，你只需要打开文件admin/orders.php，找到邮件结构定义的部分，在这里，是第100行：

$html_msg[\'EMAIL_CUSTOMERS_NAME\'] = $check_status->fields[\'customers_name\'];
$html_msg[\'EMAIL_TEXT_ORDER_NUMBER\'] = EMAIL_TEXT_ORDER_NUMBER . \' \' . $oID;

你可以在这行代码下面添加你新定义的变量：

$html_msg[\'EMAIL_HOURS_OF_OPERATION\'] = \'We are open from 9 AM to 5 PM
every day of the week.\';

在你的HTML模板中使用变量时加上$符号，但是在定义变量时不要加$

要想改变email模板中的文本内容，你需要编辑对应的语言文件，你可以使用define()语句新增或是改变原来的变量。

define(EMAIL_LOVELY_YOU_DROPPED_BY,\'We are just so immeasurably 
delighted that you stopped by our store today!\');

还有另外一个你必须修改的语言文件，includes/languages/english/email_extras.php.这个文件包含了所以email使用的公用字符串文本。（完）

原创文章，转载请注明： 转载自电商沙龙ec-shalom.com，专研电商艺术。

本文链接地址: 来自damon的zencart二次开发教程-3.1开发自己的zencart模板

Related posts:

zencart二次开发