我的ECshop二次开发从零开始

　　我是一个EC新手，EC就算做再多的模板，肯定也满足不了我们的需要，更何况各行有各行的门道，EC统一做出来的模板也不一定合适于我们这个行业用，因此，只有我们真正掌握了自己做模板，修改模板的功夫，才能真正的打造适合自己的电子商务平台，真正打造符合自己行业内的客户习惯的电子商务平台。

　　首先欢迎各位浏览本教程，恭喜大家使用 ECshop,！EC有多好，ECshop是PHP构建的，PHP的应用我也不想多说了(亚马逊:amazon.com,雅虎:yahoo.com,百度:baidu.com淘宝:taobao.com新浪:sina.com,腾讯:qq.com),（ps: ECshop成功了！在这一刻，他是伟大电子商务的传承，他不是一个人在战斗，他不是一个人 -_-!!! ) 我也不多讲了大家都知道，不过有时候热爱潜水的我真的时是实在忍不住要跳出来说两句.

　　本教程适用于了解 ECshop 和 ECshop模板DIY 以及它们的日常使用,在查看前阁下需要至少会使用一种编辑器(exp:Dreamweaver, editplus, emacs, vi, ee …意思就是可视化的HTML编辑器或者直接文本编辑器,我在讲的时候用Dreamwaver来讲,这样比较适合初学者和设计师)。 这个教程目前由我一个人维护，但我相信，过不了多久就会有多人 持续地 维护。其中的内容需要不断地更新。如果您有兴趣参加,嘿嘿，PM我。我们一起为大家服务啊.

　　通过对本教程的学习，只要您边看边跟着做，一定能够学会自己做模板的。:)

　　下列章节的适用于ECshop程序。 同时这里许多内容和一些 Smarty相关。 假如您已经熟悉这些内容可跳过不阅读。假如您是ECshop新手并且想diy一下自己的店铺， 那您应该认真详细地从头到尾读一遍这些章节。( ps: 大家不要紧张，我会尽量用人类的语言和大家交流，实在万不得已才会用机器语言展示给大家 ) 希望大家能够通过本教程，想要什么模板都能自己做出来。哈哈！一起加油吧！

读取这些内容，您将了解：

     

　　模板存放路径：ecshop/themes/xxxxx   其中的 xxxxx 就是某一套模板，如系统一般会自带的模板文件名叫做 default, (即：ecshop/themes/default )里面放的就是安装好时的默认模板,以下所有的说明都是针对默认模板来讲解.

　　我们随便找一张gif图片，起名为logo.gif放到images目录中，然后我们刷新首页。看到没？首页logo被修改了。如果你觉得大小不合适，那么我们打开library目录中的 page_header.lib 查看源代码，然后搜索 images/logo.gif 然后看它后面 width=”130″ height=”56″  把130和56改为相应的值就可以了，到前台刷新看看。到浏览器前台刷新，看看页面有什么变化。虾米？没有发现吗？看看浏览器头部啊，呵呵，是不是网站的标题被改变了？

　　哈哈，对，{$page_title}就是网站标题的标签 ( 注： 标签是从{开始到}结束哦，{和}属于标签的一部分 ). 整个ECshop的模板就是一个一个这样的标签组成了，控制网站内容和数据的动态显示。

　　比如

（{$keywords} )控制网站的关键字标签，

　　{$description} :网站描述标签 ，( 这就是模板中的标签，每个标签都会对应程序里面的一个值，网站运行时模板引擎会来读取模板页面，然后把对应的标签用对应的值进行替换，就显示出我们看到的网站页面了,明白了吧。这一段内容对于新手来说，可能一下子不能完全消化,还有什么问题就留言，我会更新到这里来) 大家不要着急，欲速则不达，呵呵，下面我们真正开始做ECshop的模板了，( 不懂HTML的观众准备好Dreamweaver哦 )

操作前提，将您当前使用的模板调整为default模板,然后清空缓存。

接下来我们进入default目录,可以看到以下文件目录：

*.dwt    (表示其它.dwt文件)

虾米？难道你不相信这些就是模板吗？好，那我证明给你看看.

我们把把images里面的logo.gif文件的名字,改为logo2.gif,然后

好接下来我们用dreamweaver打开index.dwt文件,在源代码中搜索 {$page_title} ，找到后，将{$page_title} 修改为 超级无敌的大卖场. 然后到

很简单8,哈哈，大家真是冰雪聪明，孔明再世啊，这么快就学会了，如果你上一步你操作很超级非常very的简单的话，接下来的学习也时一样的哦.接下来要怎么改呢？广告之后我们继续。

…..黄金广告位…欢迎购买……需要的话PM我…..(PS:人不能无耻到这个地步)….哈哈…

 

1.   我们到/themes/default目录中，把index.dwt改名为index_bak.dwt, 然后用Dreamweaver新建一个HTML文件,然后保存到/themes/default目录中，命名为 index.dwt, 好，我们刷新前台看看，哈哈，什么也没有哦. 好，在我们新建的index.dwt中找到

中间的内容替换为:{$page_title},在和之间也放入一个{$page_title}, 刷新前台看看.嘿嘿，看到什么了？网站标题被打印出来了吧？

如有操作时候有弹出对话框:

点击确定就可以了，:)

2.   接下来我们选择可视化界面编辑：然后在{$page_title}后面按Enter键换行,然后输入: 商店公告：{$shop_notice} 到浏览器刷新首页刷新看看，呵呵。商店公告被调出来了，可以去网站后台 

系统设置->商店设置->网店信息->商店公告  修改内容，然后到浏览器再刷新网站首页看看，呵呵，商店公告是被动态掉出来的哦.

 

3.   好继续在{$shop_notice}后面按Enter键换行，然后输入

　　

1.<span>2. {<span foreach> from=<span> item=<span article>3. {<span>.<span short_title>4. {/<span foreach>} </span></span></span></span></span></span></span>

 

复制代码

注：

换行的地方按Enter键哦, 好刷新前台看看 ，呵呵，网站快讯被调出来了哦。

好我们再到网站后台->文章管理->网站列表->添加文章，选择 网站快讯这个分类，随便添加一篇内容，完成后前台刷新看看。两篇文章都被动态掉出来了哦。

注释：

 

以后这个循环我们会经常的用到哦. 还是不懂也没有关系，每次遇到我都会讲哪里要怎么设置的，多用就会了。

 

我们也可以这么写哦 , 注意： 在代码编辑的视图里面编辑

1. 

2. { from= item=3. 6. {/7.

4. {.5.

 

复制代码

哈哈，保存,刷新首页看看，表格被一行一行的循环出来了哦

 

　　一人得道，鸡犬升天啊，谢谢ECshop将我提升为教程区版主 ,实在时荣幸啊，谢谢大家的支持， 谢谢我的笔记本电脑小Y，谢谢我的电脑桌，谢谢我的椅子，谢谢大家! 呵呵!  ~Orz.   

模板教程继续啦！

不知道大家是学会用循环了呢，还是我的言语实在有问题，大家实在无法完成阅读哦，居然大家都没有问题，暂时心里安慰，把他当做好事情，大家都会调用了，呵呵，那我们继续循环调用商品了！

好，继续在我们昨天的基础上，我们在网站快讯的循环后面，按 Enter键, 输入:商品列表,接着建立一个2行3列的表格，宽度为70%, 表格边框为1（为了让大家看清楚 ),起HTML代码如下

1. <p>商品列表</p>   

2. 

3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.

1	2	3
4	5	6

 

复制代码

注: ( 1,2,3,4,5,6这些个是序号，方便跟大家讲解呢 )

在这里，我们暂时先把下面这一行去掉(为了大家操作简单)，变成

1. <p>商品列表</p>   

2. 

3. 4. 5. 6. 7. 8.

1

2

3

 

复制代码

我们要循环的是列，也就是

,因此我们的循环标签应该在  和的外面, 而2,和3应该是循环出来的东西，也就时我模板里面只用保留 1 这个td就可以了，2 和3都要去掉，

于是就变成了下面的样子

1. <p>商品列表</p>   

2. 

3. 4. 5. 6.

1

 

复制代码

好，现在我们开始加循环标签，我们要调用的是精品推荐商品, 代码如下:

1. <p>商品列表</p>   

2. 

3. 4. { from= item=5. 6. {/7. 8.

{.short_style_name}

 

复制代码

注意了：foreach 表示下面的内容属于要进行循环，from=$best_goods 表示循环的内容来自$best_goods,($best_goods是精品商品推荐的标签 ) , item=goods 表示当前循环这一次的对象叫goods,你也可以改为其它的东东，当然{$goods.short_style_name}这个地方的goods也要相应的改了哦,{$goods.short_style_name} 表示goods 这个对象的商品名称. 好了，我们保存，前台刷新看一下啊。呵呵，精品商品被循环出来了吧？

接着，为了大家应用方便，我们把goods改为jingpinshangpin,代码如下：

1. <p>商品列表</p>   

2. 

3. 4. { from= item=5. 6. {/7. 8.

{.short_style_name}

 

复制代码

好前台刷新看看哦，呵呵，夷？如果你有很多的精品商品你会发现商品变了，因为精品商品是随机调取出来的.

好我们继续完善他，给它加上链接对应商品的链接,也就是添加属性, 代码如下：

1. <p>商品列表</p>   

2. 

3. 4. { from= item=5. 6. {/7. 8.

.url}”>{.short_style_name}

 

复制代码

刷新浏览器，点击链接看看链接到什么地方去了哦。呵呵! 链接到了每个产品自己的页面了呢。 说明：标签 {$jingpinshangpin.url} 就是精品商品的商品链接的标签了，但是要记得哦，$jingpinshangpin 是你起的名字哦，item=$jingpinshangpin的这个 $jingpinshangpin改变了的话,这里也要跟着改变。

接下来我们添加上商品的图片哦 ,也就是增加一个属性 ,代码如下：

1. <p>商品列表</p>   

2. 

3. 4. { from= item=5. 6. {/7. 8.

.url}”>.thumb}” border=”0″ />
{.short_style_name}

 

复制代码

到前台刷新浏览器看看看，呵呵，商品缩略图也被调出来了。

说明：标签 {$jingpinshangpin.thumb} 就是精品商品的缩略图的标签了，但是要记得哦，$jingpinshangpin 是你起的名字哦，item=$jingpinshangpin的这个 $jingpinshangpin改变了的话,这里也要跟着改变。

如果你已经熟练理解和掌握了以上的步骤，那么下面就越来越清晰和容易了。

接下来我们调取新品上市(标签为: $new_goods ）和热卖商品( 标签为：$hot_goods) ，接着在刚才的代码后面加上去就是了。我就不多讲了哦，代码如下

1. <p>新品上市</p>   

2. 

3. 4. { from= item=5. 7. {/8. 9.

.url}”>.thumb}” border=”0″ />
6. {.short_style_name}

10. 11.

热卖商品

12. 13. 14. { from= item=15. 17. {/18. 19.

.url}”>.thumb}” border=”0″ />
16. {.short_style_name}

 

复制代码

接着我们要一个Menu菜单，也就是做一个产品的分类列表出来。相信你现在至少知道分类的标签是什么，就知道要怎么做了吧，呵呵.

分类的标签是：$categories

代码如下：

1. <p>分类列表</p>   

2. {<span foreach> from=<span> item=<span fenlei>3.    <a href="%E2%80%9D%7B<span">.url}”>{<span>.name}</span></a>   

4. {/<span foreach>} </span></span></span></span>

 

复制代码

到前台刷新看看哦，呵呵，分类列表被调取出来了，我们试着在后台多添加几个一级分类，然后到首页刷新看看。

呵呵，我先去吃饭啦，吃完饭继续写如何把子分类调用出来，大家有问题多问哦，

吃饭回来了….(PS:这是怎么地啊，呵呵!)

子分类的标签是对应在父分类标签来调用的.代码如下:

 

1. <p>分类列表</p>   

2. {<span foreach> from=<span> item=<span fenlei>3.    <a href="%E2%80%9D%7B<span">.url}”> {<span>.name}</span></a>   

4.      {<span foreach> from=<span>.children item=<span child>5.      <br>- – <a href="%E2%80%9D%7B<span">.url}”>{<span>.name|escape:html}</span></a>   

6.      {/<span foreach><span>7. {/<span foreach>} </span></span></span></span></span></span></span></span></span>

复制代码

保存以后前台刷新看看呢。呵呵，怎么样？子分类也被调用出来了吧，当然可以根据自己的需要，加上不同的表格或者图片的修饰哦，子分类是放在了父分类标签的基础上来调用的呢。

不过如果你的分类已经固定了很少改动，我建议还是做成死的，这样可以做的更漂亮一些，比如每个分类直接是用图片来代替。呵呵,我一般就是这么处理的，我除了商品和新闻是动态调用出来的以外，其它的都是做成固定的死的，这样就能够设计的很漂亮，因为有时候受到代码的限制，做出来不是很好看。(…说的好模糊，您能理解吗？不能的话就告诉我 ).

本来教程已经写了好多了，但是很多地方写的有点让新手不是那么容易接受，所以就一直在想办法，如何讲解的更简单一些，能让每个人都学会做模板。思考中…..

由于个人原因,今天教程停播一天,明天继续，实在不好意思各位. ~Orz.

啊，今天的章节就算是结束啦，明天预告:

1.如何调用某个分类里面的商品 2.如何制作商品展示页面的模板 3.完善前面讲的章节，并对大家提出的问题做出解答

今天我们来学习如何掉用某一个分类里面的产品。 首先把 default文件夹中的category.dwt 的名字改为category_bak.dwt,然后新建一个category.dwt文件. 然后插入下面的代码：

1. {<span foreach> from=<span> item=<span goods>2. <img  src="%E2%80%9D%7B<span" alt="我的ECshop二次开发从零开始" >.goods_thumb}” border=”0″  /><br>   

3. {<span>.<span goods_name>4. {/<span foreach>} </span></span></span></span></span></span>

 

复制代码

注：$goods_list表示商品标签

接着我们访问这个页面:(Ecshop的访问网址/category.php?id=1)例如：http://localhost/ecshop/category.php?id=1 这样我们就访问到了分类id为1的商品了，我们也可以让id=2就访问到id = 2商品了，那如何看某个分类的id呢？ 我们看后台： 商品管理-》商品分类-》就可以看到商品分类的列表，然后把鼠标指上去选择新窗口打开，就能在地址来里面看到goods.php?act=list&cat_id=1这样子的信息，cat_id所等于的值就是这个分类的id了，然后就可以拿来调取了，呵呵。

好每次每次都把商品的列表调取出来了，那么如何调取某一个商品的页面呢？ 首先把 default文件夹中的goods.dwt 的名字改为goods_bak.dwt,然后新建一个goods.dwt文件. 然后插入下面的代码：

1. 商品图片: <img  src="%E2%80%9D%7B<span" alt="我的ECshop二次开发从零开始" >.goods_img}” /><br><br>   

2. 商品名称：{<span>.goods_style_name}<br><br>   

3. 商品货号：{<span>.goods_sn}<br><br>   

4. 商品品牌: {<span>.goods_brand}<br><br>   

5. 商品数量：{<span>.goods_number} 单位：{<span>.measure_unit}<br><br>   

6. 添加时间：{<span>.add_time}<br><br>   

7. 市场价格：{<span>.market_price}<br><br>   

8. 本店价格：{<span>.shop_price_formated}<br><br>   

9. 注册用户价格：{<span>.price}<br><br>   

10. 注册用户价格：{<span>.price}<br><br>   

11. 注册用户价格：{<span>.price}<br><br> </span></span></span></span></span></span></span></span></span></span></span>

 

复制代码

接着我们访问这个页面:(Ecshop的访问网址/goods.php?id=1)例如：http://localhost/ecshop/goods.php?id=1 这样我们就访问到了商品id为1的商品了，我们也可以让id=2就访问到id = 2商品了，那如何看某个商品的id呢？

我们看后台：商品管理-》商品列表-》就可以看到商品品的列表，最前面那一栏就是商品的id了，，然后就可以拿来调取了，呵呵。

还有人在问品牌的，某一个品牌的商品怎么调用，呵呵，下次有时间再讲 更新啦!!

今天我们学习一下如何在首页调取某个分类的商品: 注意了，这里的修改有一些麻烦了哦：

首先你需要下载一套新的模板，比如blueksy 上传到模板目录 /themes/   也就是 /themes/bluesky,

然后进入网站后台->模板管理->模板选择，选择bluesky, 选择OK, 然后到网站后台 -> 模板管理 -> 设置模板 -> 分类下的商品 ( 点击分类下的商品前面的+号，然后选择“主区域中间“，序号默认, 商品分类随便选择一个就可以了”, 

然后填写显示的条数,填写好后点击确定提交，( 注意: 有的朋友可能会遇到提交不了，是因为权限问题，需要把bluesky的模板权限改,然后再重新提交一次)。

这里我增加了两个,的数据是：主区域空间 0 手机  6                                           

主区域空间  0 手机 6 我们在这里增加了多少条记录，对应首页就可以调取多少个分类。

好接下来我们恢复模板为原来我们改过的default模板

在我们以前做的基础上增加如下代码(也就是在原来代码的下面加上):

1. <p>第一个分类的</p><p>   

2. <?php <span $this</span>->assign(‘cat_goods’,<span>->_var['cat_goods_1']); ?><?php <span $this</span>->assign(‘goods_cat’,<span>->_var['goods_cat_1']); ?><?php <span echo</span> <span>->fetch(‘library/cat_goods.lbi’); ?>   

3. <p>第二个分类的</p>
<p>   

4. <?php <span $this</span>->assign(‘cat_goods’,<span>->_var['cat_goods_3']); ?><?php <span $this</span>->assign(‘goods_cat’,<span>->_var['goods_cat_3']); ?><?php <span echo</span> <span>->fetch(‘library/cat_goods.lbi’); ?> </span></span></span></p></span></span></span></p>

 

复制代码

这里要注意了, 红色的 1 代表你要显示分类的分类的ID, 将它改为你需要的 刚才添加的ID就可以了 红色的 3 代表你要显示分类的分类的ID, 将它改为你需要的 刚才添加的ID就可以了

好了，保存,前台刷新看看啊,呵呵.是不是我们要的分类就出来了,

看样子改起来很简单哦，不过每次都是这样要操作两个模板才能改还是有些麻烦,呵呵，等到高手进阶的时候再来讲怎么做。

仔细一看还是有点不好的地方哦，就是样子不好看啊，对不对？是默认模板的样子，没有关系啦，我们打开 librasy目录中的cat_goods.lbi文件修改就可以了。修改要注意的地方上门讲过了，不过这里还是要再说明一些小问题

cat_goods.lbi的代码如下：

1. <meta http-equiv="”Content-Type”" content="”text/html;" charset="utf-8″">   

2. <div>
<img src="%E2%80%9D../images/green_arrow.gif%E2%80%9D"    style="max-width:90%" height="”37″" alt='”"' border="”0″" style="”vertical-align:middle”"><a href="%E2%80%9D%7B<span">.url}”>{<span><span .name></span></span></a>
</div>   

3. <div>   

4.   <span><span item="goods}–">   

5.   <table border="”0″" cellpadding="”3″" cellspacing="”1″" style="”float:" left>   

6.     <tr>   

7.       <td align="”center”"><a href="%E2%80%9D%7B</span"><span>.url}”><img  src="%E2%80%9D%7B<span" alt="我的ECshop二次开发从零开始" >.thumb}” border=”0″ alt=”{<span><span .name></span></span></span></a></td>   

8.     </tr>   

9.     <tr>   

10.       <td><a href="%E2%80%9D%7B</span"><span>.url}” title=”{<span>.name|escape:html}”>{<span><span .short_name><br>   

11.         <span><span .promote_price neq>   

12.         {</span><span>.promote_price}<span>{<span><span .promote_price>   

13.            

14.         {</span><span>.shop_price}<span>{<span><span .shop_price>   

15.            

16.       </span></span></span></span></span></span></span></span></span></span></span></span></a></td>   

17.     </tr>   

18.   </table>   

19.      

20.   <br style="”clear:both”/">   

21. </span></span>
</div> 

 

复制代码

这里哦于一些奇怪的地方就是在标签两边多了  符号，这个是没有关系的.删除掉也没有关系的啦

名称	类型	备注（作用或意义）	文件
images	目录	存放模板图片目录	不可更改
library	目录	存放模板库文件目录	不可更改
screenshot.png	图片	用于	不可更改
style.css	css		不可更改
备注：模板文件共 提醒： 1,  2,  3,
brand.dwt	模板文件	商品品牌页	不可更改
article.dwt	模板文件	文章内容页	不可更改
article_cat.dwt	模板文件	文章列表页	不可更改
catalog.dwt	模板文件	所有分类页	不可更改
category.dwt	模板文件	商品列表页	不可更改
compare.dwt	模板文件	商品比较页	不可更改
flow.dwt	模板文件	购物车和购物流程页	不可更改
gallery.dwt	模板文件	商品相册页	不可更改
goods.dwt	模板文件	商品详情页	不可更改
group_buy_goods.dwt	模板文件	团购商品详情页	不可更改
group_buy_list.dwt	模板文件	团购商品列表页	不可更改
index.dwt	模板文件	首页	不可更改
message.dwt	模板文件	信息提示页	不可更改
pick_out.dwt	模板文件	选购中心页	不可更改
receive.dwt	模板文件	收货确认信息页	不可更改
respond.dwt	模板文件	在线支付结果提示信息页	不可更改
search.dwt	模板文件	商品搜索页	不可更改
snatch.dwt	模板文件	夺宝奇兵页	不可更改
tag_cloud.dwt	模板文件	标签云页	不可更改
user_clips.dwt	模板文件	用户中心页 （包含：欢迎页，我的留言，我的标签，收藏商品，缺货登记列表，添加缺货登记。）	不可更改
user_passport.dwt	模板文件	用户安全页（包含：会员登录，会员注册，找回密码。）	不可更改
user_transaction.dwt	模板文件	用户中心页 （包含：个人资料，我的红包，添加红包，我的订单，订单详情，合并订单，订单状态，商品列表，费用总计，收货人信息，支付方式，其他信息，会员余额。）	不可更改
备注：库文件共 提醒：文件名尽量保存默认，否则在后台管理将无法管理库文件或不可预见错误。
ad_position.lbi	库文件	广告位	不可更改
bought_goods.lbi	库文件	购买过此商品的人购买过哪些商品	不可更改
brand_goods.lbi	库文件	品牌的商品	不可更改
brands.lbi	库文件	品牌专区	不可更改
cart.lbi	库文件	购物车	不可更改
cat_articles.lbi	库文件	文章列表	不可更改
cat_goods.lbi	库文件	分类下的商品	不可更改
category_tree.lbi	库文件	商品分类树	不可更改
comments.lbi	库文件	用户评论列表 （	不可更改
comments_list.lbi	库文件	用户评论内容	不可更改
consignee.lbi	库文件	收货地址表单	不可更改
goods_article.lbi	库文件	相关文章	不可更改
goods_attrlinked.lbi	库文件	属性关联的商品	不可更改
goods_fittings.lbi	库文件	相关配件	不可更改
goods_gallery.lbi	库文件	商品相册	不可更改
goods_list.lbi	库文件	商品列表	不可更改
goods_related.lbi	库文件	相关商品	不可更改
goods_tags.lbi	库文件	商品标记	不可更改
group_buy.lbi	库文件	首页团购商品	不可更改
help.lbi	库文件	网店帮助	不可更改
history.lbi	库文件	商品浏览历史	不可更改
invoice_query.lbi	库文件	发货单查询	不可更改
member.lbi	库文件	会员登录	不可更改
member_info.lbi	库文件	会员登录表单和登录成功以后用户账户信息	不可更改
new_articles.lbi	库文件	最新文章	不可更改
order_total.lbi	库文件	订单费用总计	不可更改
page_footer.lbi	库文件	页面脚部	不可更改
page_header.lbi	库文件	页面顶部	不可更改
pages.lbi	库文件	列表分页	不可更改
recommend_best.lbi	库文件	精品推荐	不可更改
recommend_hot.lbi	库文件	热卖商品	不可更改
recommend_new.lbi	库文件	新品推荐	不可更改
recommend_promotion.lbi	库文件	促销商品	不可更改
search_form.lbi	库文件	搜索表单	不可更改
snatch.lbi	库文件	夺宝奇兵出价表单	不可更改
snatch_price.lbi	库文件	夺宝奇兵最新出价列表	不可更改
top10.lbi	库文件	销售排行	不可更改
ur_here.lbi	库文件	当前位置	不可更改
user_menu.lbi	库文件	用户中心菜单	不可更改
vote.lbi	库文件	在线调查	不可更改

ECSHOP 

文章列表页

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

常见问题解答：

 模板管理 -> 设置模板