我是一個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中找到<title>,我們把<title>和</title>中間的內容替換為:{$page_title},在<body>和</body>之間也放入一個{$page_title}, 刷新前台看看.嘿嘿，看到什麼了？網站標題被打印出來了吧？
如有操作時候有彈出對話框:
點擊確定就可以了，:)
2. 接下來我們選擇可視化界面編輯：然後在{$page_title}後面按Enter鍵換行,然後輸入: 商店公告：{$shop_notice} 到浏覽器刷新首頁刷新看看，呵呵。商店公告被調出來了，可以去網站後台
系統設置->商店設置->網店信息->商店公告 修改內容，然後到浏覽器再刷新網站首頁看看，呵呵，商店公告是被動態掉出來的哦.
3. 好繼續在{$shop_notice}後面按Enter鍵換行，然後輸入
1.2. { from= item=3. {.4. {/}
復制代碼
注：
換行的地方按Enter鍵哦, 好刷新前台看看 ，呵呵，網站快訊被調出來了哦。好我們再到網站後台->文章管理->網站列表->添加文章，選擇 網站快訊這個分類，隨便添加一篇內容，完成後前台刷新看看。兩篇文章都被動態掉出來了哦。
注釋：
以後這個循環我們會經常的用到哦. 還是不懂也沒有關系，每次遇到我都會講哪裡要怎麼設置的，多用就會了。
我們也可以這麼寫哦 , 注意： 在代碼編輯的視圖裡面編輯
1. <table>
2. { from= item=3. <tr><td>
4. {.5. </td></td>
6. {/7. </table>
復制代碼
哈哈，保存,刷新首頁看看，表格被一行一行的循環出來了哦
一人得道，雞犬升天啊，謝謝ECshop將我提升為教程區版主 ,實在時榮幸啊，謝謝大家的支持， 謝謝我的筆記本電腦小Y，謝謝我的電腦桌，謝謝我的椅子，謝謝大家! 呵呵! ~Orz.
模板教程繼續啦！
不知道大家是學會用循環了呢，還是我的言語實在有問題，大家實在無法完成閱讀哦，居然大家都沒有問題，暫時心裡安慰，把他當做好事情，大家都會調用了，呵呵，那我們繼續循環調用商品了！
好，繼續在我們昨天的基礎上，我們在網站快訊的循環後面，按 Enter鍵, 輸入:商品列表,接著建立一個2行3列的表格，寬度為70%, 表格邊框為1（為了讓大家看清楚 ),起HTML代碼如下
1. <p>商品列表</p> 2. <table width=”70%” border=”1″> 3. <tr> 4. <td>1</td> 5. <td>2</td> 6. <td>3</td> 7. </tr> 8. <tr> 9. <td>4</td> 10. <td>5</td> 11. <td>6</td> 12. </tr> 13. </table>
復制代碼
注: ( 1,2,3,4,5,6這些個是序號，方便跟大家講解呢 )
在這裡，我們暫時先把下面這一行去掉(為了大家操作簡單)，變成
1. <p>商品列表</p> 2. <table width=”70%” border=”1″> 3. <tr> 4. <td>1</td> 5. <td>2</td> 6. <td>3</td> 7. </tr> 8. </table>
復制代碼
我們要循環的是列，也就是<td>,因此我們的循環標簽應該在<td> 和</td>的外面, 而2,和3應該是循環出來的東西，也就時我模板裡面只用保留 1 這個td就可以了，2 和3都要去掉，
於是就變成了下面的樣子
1. <p>商品列表</p> 2. <table width=”70%” border=”1″> 3. <tr> 4. <td>1</td> 5. </tr> 6. </table>
復制代碼
好，現在我們開始加循環標簽，我們要調用的是精品推薦商品, 代碼如下:
1. <p>商品列表</p>
2. <table width=”70%” border=”1″>
3. <tr>
4. { from= item=5. <td>{.short_style_name}</td>
6. {/7. </tr>
8. </table>
復制代碼
注意了：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. <table width=”70%” border=”1″>
3. <tr>
4. { from= item=5. <td>{.short_style_name}</td>
6. {/7. </tr>
8. </table>
復制代碼
好前台刷新看看哦，呵呵，夷？如果你有很多的精品商品你會發現商品變了，因為精品商品是隨機調取出來的.
好我們繼續完善他，給它加上鏈接對應商品的鏈接,也就是添加<a>屬性, 代碼如下：
1. <p>商品列表</p>
2. <table width=”70%” border=”1″>
3. <tr>
4. { from= item=5. <td><a href=”{.url}”>{.short_style_name}</a></td>
6. {/7. </tr>
8. </table>
復制代碼
刷新浏覽器，點擊鏈接看看鏈接到什麼地方去了哦。呵呵! 鏈接到了每個產品自己的頁面了呢。 說明：標簽 {$jingpinshangpin.url} 就是精品商品的商品鏈接的標簽了，但是要記得哦，$jingpinshangpin 是你起的名字哦，item=$jingpinshangpin的這個 $jingpinshangpin改變了的話,這裡也要跟著改變。
接下來我們添加上商品的圖片哦 ,也就是增加一個<img>屬性 ,代碼如下：
1. <p>商品列表</p>
2. <table width=”70%” border=”1″>
3. <tr>
4. { from= item=5. <td><a href=”{.url}”><img src=”{.thumb}” border=”0″ /><br>{.short_style_name}</a></td>
6. {/7. </tr>
8. </table>
復制代碼
到前台刷新浏覽器看看看，呵呵，商品縮略圖也被調出來了。
說明：標簽 {$jingpinshangpin.thumb} 就是精品商品的縮略圖的標簽了，但是要記得哦，$jingpinshangpin 是你起的名字哦，item=$jingpinshangpin的這個 $jingpinshangpin改變了的話,這裡也要跟著改變。
如果你已經熟練理解和掌握了以上的步驟，那麼下面就越來越清晰和容易了。
接下來我們調取新品上市(標簽為: $new_goods ）和熱賣商品( 標簽為：$hot_goods) ，接著在剛才的代碼後面加上去就是了。我就不多講了哦，代碼如下
1. <p>新品上市</p>
2. <table width=”70%” border=”1″>
3. <tr>
4. { from= item=5. <td><a href=”{.url}”><img src=”{.thumb}” border=”0″ /><br>
6. {.short_style_name}</a></td>
7. {/8. </tr>
9. </table>
10.
11. <p>熱賣商品</p>
12. <table width=”70%” border=”1″>
13. <tr>
14. { from= item=15. <td><a href=”{.url}”><img src=”{.thumb}” border=”0″ /><br>
16. {.short_style_name}</a></td>
17. {/18. </tr>
19. </table>
復制代碼
接著我們要一個Menu菜單，也就是做一個產品的分類列表出來。相信你現在至少知道分類的標簽是什麼，就知道要怎麼做了吧，呵呵.
分類的標簽是：$categories
代碼如下：
1. <p>分類列表</p>
2. { from= item=3. <a href=”{.url}”>{.name}</a>
4. {/}
復制代碼
到前台刷新看看哦，呵呵，分類列表被調取出來了，我們試著在後台多添加幾個一級分類，然後到首頁刷新看看。
呵呵，我先去吃飯啦，吃完飯繼續寫如何把子分類調用出來，大家有問題多問哦，
吃飯回來了….(PS:這是怎麼地啊，呵呵!)
子分類的標簽是對應在父分類標簽來調用的.代碼如下:
1. <p>分類列表</p>
2. { from= item=3. <a href=”{.url}”> {.name}</a>
4. { from=.children item=5. <br>- – <A href=”{.url}”>{.name|escape:html}</A>
6. {/7. {/}
復制代碼
保存以後前台刷新看看呢。呵呵，怎麼樣？子分類也被調用出來了吧，當然可以根據自己的需要，加上不同的表格或者圖片的修飾哦，子分類是放在了父分類標簽的基礎上來調用的呢。
不過如果你的分類已經固定了很少改動，我建議還是做成死的，這樣可以做的更漂亮一些，比如每個分類直接是用圖片來代替。呵呵,我一般就是這麼處理的，我除了商品和新聞是動態調用出來的以外，其它的都是做成固定的死的，這樣就能夠設計的很漂亮，因為有時候受到代碼的限制，做出來不是很好看。(…說的好模糊，您能理解嗎？不能的話就告訴我 ).
本來教程已經寫了好多了，但是很多地方寫的有點讓新手不是那麼容易接受，所以就一直在想辦法，如何講解的更簡單一些，能讓每個人都學會做模板。思考中…..
由於個人原因,今天教程停播一天,明天繼續，實在不好意思各位. ~Orz.
啊，今天的章節就算是結束啦，明天預告:
1.如何調用某個分類裡面的商品 2.如何制作商品展示頁面的模板 3.完善前面講的章節，並對大家提出的問題做出解答
今天我們來學習如何掉用某一個分類裡面的產品。 首先把 default文件夾中的category.dwt 的名字改為category_bak.dwt,然後新建一個category.dwt文件. 然後插入下面的代碼：
1. { from= item=2. <img src=”{.goods_thumb}” border=”0″ /><br>
3. {.4. {/}
復制代碼
注：$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=”{.goods_img}” /><br><br>
2. 商品名稱：{.goods_style_name}<br><br>
3. 商品貨號：{.goods_sn}<br><br>
4. 商品品牌: {.goods_brand}<br><br>
5. 商品數量：{.goods_number} 單位：{.measure_unit}<br><br>
6. 添加時間：{.add_time}<br><br>
7. 市場價格：{.market_price}<br><br>
8. 本店價格：{.shop_price_formated}<br><br>
9. 注冊用戶價格：{.price}<br><br>
10. 注冊用戶價格：{.price}<br><br>
11. 注冊用戶價格：{.price}<br><br>
復制代碼
接著我們訪問這個頁面:(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> 2. <?php ->assign(‘cat_goods’,->_var['cat_goods_1']); ?><?php ->assign(‘goods_cat’,->_var['goods_cat_1']); ?><?php ->fetch(‘library/cat_goods.lbi’); ?> 3. <p>第二個分類的<p> 4. <?php ->assign(‘cat_goods’,->_var['cat_goods_3']); ?><?php ->assign(‘goods_cat’,->_var['goods_cat_3']); ?><?php ->fetch(‘library/cat_goods.lbi’); ?>
復制代碼
這裡要注意了, 紅色的 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=”../images/green_arrow.gif” width=”37″ height=”37″ alt=”" border=”0″ style=”vertical-align:middle” /><a href=”{.url}”>{.url}”><img src=”{.thumb}” border=”0″ alt=”{.url}” title=”{.name|escape:html}”>{.promote_price}<span>{.shop_price}<span>{
復制代碼
這裡哦於一些奇怪的地方就是在標簽兩邊多了 <!– 和 –> 符號，這個是沒有關系的.刪除掉也沒有關系的啦
名稱
類型
備注（作用或意義）
文件
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
文章列表頁
常見問題解答：
