.jpg)
推薦（免費(fèi)）：ecshop教程
我是一個(gè)EC新手，EC就算做再多的模板，肯定也滿足不了我們的需要，更何況各行有各行的門(mén)道，EC統(tǒng)一做出來(lái)的模板也不一定合適于我們這個(gè)行業(yè)用，因此，只有我們真正掌握了自己做模板，修改模板的功夫，才能真正的打造適合自己的電子商務(wù)平臺(tái)，真正打造符合自己行業(yè)內(nèi)的客戶習(xí)慣的電子商務(wù)平臺(tái)。
首先歡迎各位瀏覽本教程，恭喜大家使用?ECshop,！EC有多好，ECshop是PHP構(gòu)建的，PHP的應(yīng)用我也不想多說(shuō)了(亞馬遜:http://www.020jz.org/,雅虎:yahoo.com,百度:baidu.com淘寶:http://www.020jz.org/新浪:sina.com,騰訊:qq.com),（ps:?ECshop成功了！在這一刻，他是偉大電子商務(wù)的傳承，他不是一個(gè)人在戰(zhàn)斗，他不是一個(gè)人?-_-!!!?)?我也不多講了大家都知道，不過(guò)有時(shí)候熱愛(ài)潛水的我真的時(shí)是實(shí)在忍不住要跳出來(lái)說(shuō)兩句.
本教程適用于了解?ECshop?和?ECshop模板DIY?以及它們的日常使用,在查看前閣下需要至少會(huì)使用一種編輯器(exp:dreamweaver,?editplus,?emacs,?vi,?ee?…意思就是可視化的HTML編輯器或者直接文本編輯器,我在講的時(shí)候用Dreamwaver來(lái)講,這樣比較適合初學(xué)者和設(shè)計(jì)師)。?這個(gè)教程目前由我一個(gè)人維護(hù)，但我相信，過(guò)不了多久就會(huì)有多人?持續(xù)地?維護(hù)。其中的內(nèi)容需要不斷地更新。如果您有興趣參加,嘿嘿，PM我。我們一起為大家服務(wù)啊.
通過(guò)對(duì)本教程的學(xué)習(xí)，只要您邊看邊跟著做，一定能夠?qū)W會(huì)自己做模板的。:)
下列章節(jié)的適用于ECshop程序。?同時(shí)這里許多內(nèi)容和一些?Smarty相關(guān)。?假如您已經(jīng)熟悉這些內(nèi)容可跳過(guò)不閱讀。假如您是ECshop新手并且想diy一下自己的店鋪，?那您應(yīng)該認(rèn)真詳細(xì)地從頭到尾讀一遍這些章節(jié)。(?ps:?大家不要緊張，我會(huì)盡量用人類的語(yǔ)言和大家交流，實(shí)在萬(wàn)不得已才會(huì)用機(jī)器語(yǔ)言展示給大家?) 希望大家能夠通過(guò)本教程，想要什么模板都能自己做出來(lái)。哈哈！一起加油吧！
讀取這些內(nèi)容，您將了解：
模板存放路徑：ecshop/themes/xxxxx???其中的?xxxxx?就是某一套模板，如系統(tǒng)一般會(huì)自帶的模板文件名叫做?default,?(即：ecshop/themes/default?)里面放的就是安裝好時(shí)的默認(rèn)模板,以下所有的說(shuō)明都是針對(duì)默認(rèn)模板來(lái)講解.
我們隨便找一張gif圖片，起名為logo.gif放到images目錄中，然后我們刷新首頁(yè)。看到?jīng)]？首頁(yè)logo被修改了。如果你覺(jué)得大小不合適，那么我們打開(kāi)library目錄中的?page_header.lib?查看源代碼，然后搜索?images/logo.gif?然后看它后面?width=”130″?height=”56″??把130和56改為相應(yīng)的值就可以了，到前臺(tái)刷新看看。到瀏覽器前臺(tái)刷新，看看頁(yè)面有什么變化。蝦米？沒(méi)有發(fā)現(xiàn)嗎？看看瀏覽器頭部啊，呵呵，是不是網(wǎng)站的標(biāo)題被改變了？
哈哈，對(duì)，{$page_title}就是網(wǎng)站標(biāo)題的標(biāo)簽?(?注：?標(biāo)簽是從{開(kāi)始到}結(jié)束哦，{和}屬于標(biāo)簽的一部分?).?整個(gè)ECshop的模板就是一個(gè)一個(gè)這樣的標(biāo)簽組成了，控制網(wǎng)站內(nèi)容和數(shù)據(jù)的動(dòng)態(tài)顯示。
比如
（{$keywords}?)控制網(wǎng)站的關(guān)鍵字標(biāo)簽，
{$description}?:網(wǎng)站描述標(biāo)簽?，(?這就是模板中的標(biāo)簽，每個(gè)標(biāo)簽都會(huì)對(duì)應(yīng)程序里面的一個(gè)值，網(wǎng)站運(yùn)行時(shí)模板引擎會(huì)來(lái)讀取模板頁(yè)面，然后把對(duì)應(yīng)的標(biāo)簽用對(duì)應(yīng)的值進(jìn)行替換，就顯示出我們看到的網(wǎng)站頁(yè)面了,明白了吧。這一段內(nèi)容對(duì)于新手來(lái)說(shuō)，可能一下子不能完全消化,還有什么問(wèn)題就留言，我會(huì)更新到這里來(lái)) 大家不要著急，欲速則不達(dá)，呵呵，下面我們真正開(kāi)始做ECshop的模板了，(?不懂HTML的觀眾準(zhǔn)備好Dreamweaver哦?)
操作前提，將您當(dāng)前使用的模板調(diào)整為default模板,然后清空緩存。
接下來(lái)我們進(jìn)入default目錄,可以看到以下文件目錄：
*.dwt????(表示其它.dwt文件)
蝦米？難道你不相信這些就是模板嗎？好，那我證明給你看看.
我們把把images里面的logo.gif文件的名字,改為logo2.gif,然后
好接下來(lái)我們用dreamweaver打開(kāi)index.dwt文件,在源代碼中搜索?{$page_title}?，找到后，將{$page_title}?修改為?超級(jí)無(wú)敵的大賣(mài)場(chǎng).?然后到
很簡(jiǎn)單8,哈哈，大家真是冰雪聰明，孔明再世啊，這么快就學(xué)會(huì)了，如果你上一步你操作很超級(jí)非常very的簡(jiǎn)單的話，接下來(lái)的學(xué)習(xí)也時(shí)一樣的哦.接下來(lái)要怎么改呢？廣告之后我們繼續(xù)。
…..黃金廣告位…歡迎購(gòu)買(mǎi)……需要的話PM我…..(PS:人不能無(wú)恥到這個(gè)地步)….哈哈…?
1.???我們到/themes/default目錄中，把index.dwt改名為index_bak.dwt,?然后用Dreamweaver新建一個(gè)HTML文件,然后保存到/themes/default目錄中，命名為?index.dwt,?好，我們刷新前臺(tái)看看，哈哈，什么也沒(méi)有哦.?好，在我們新建的index.dwt中找到
如有操作時(shí)候有彈出對(duì)話框:
點(diǎn)擊確定就可以了，:)
2.???接下來(lái)我們選擇可視化界面編輯：然后在{$page_title}后面按Enter鍵換行,然后輸入:?商店公告：{$shop_notice} 到瀏覽器刷新首頁(yè)刷新看看，呵呵。商店公告被調(diào)出來(lái)了，可以去網(wǎng)站后臺(tái)?
系統(tǒng)設(shè)置->商店設(shè)置->網(wǎng)店信息->商店公告??修改內(nèi)容，然后到瀏覽器再刷新網(wǎng)站首頁(yè)看看，呵呵，商店公告是被動(dòng)態(tài)掉出來(lái)的哦.
?
3.???好繼續(xù)在{$shop_notice}后面按Enter鍵換行，然后輸入
1.?網(wǎng)站快訊：?????2.?{foreach?from=$new_articles?item=article}???????3.?{$article.short_title}???????4.?{/foreach}
注：
注釋：
?
以后這個(gè)循環(huán)我們會(huì)經(jīng)常的用到哦.?還是不懂也沒(méi)有關(guān)系，每次遇到我都會(huì)講哪里要怎么設(shè)置的，多用就會(huì)了。
我們也可以這么寫(xiě)哦?,?注意：?在代碼編輯的視圖里面編輯
1.?
| ???????4.?{$article.short_title}???????5.? |
哈哈，保存,刷新首頁(yè)看看，表格被一行一行的循環(huán)出來(lái)了哦
?
一人得道，雞犬升天啊，謝謝ECshop將我提升為教程區(qū)版主?,實(shí)在時(shí)榮幸啊，謝謝大家的支持，?謝謝我的筆記本電腦小Y，謝謝我的電腦桌，謝謝我的椅子，謝謝大家!?呵呵!??~Orz.???
模板教程繼續(xù)啦！
不知道大家是學(xué)會(huì)用循環(huán)了呢，還是我的言語(yǔ)實(shí)在有問(wèn)題，大家實(shí)在無(wú)法完成閱讀哦，居然大家都沒(méi)有問(wèn)題，暫時(shí)心里安慰，把他當(dāng)做好事情，大家都會(huì)調(diào)用了，呵呵，那我們繼續(xù)循環(huán)調(diào)用商品了！
好，繼續(xù)在我們昨天的基礎(chǔ)上，我們?cè)诰W(wǎng)站快訊的循環(huán)后面，按?Enter鍵,?輸入:商品列表,接著建立一個(gè)2行3列的表格，寬度為70%,?表格邊框?yàn)?（為了讓大家看清楚?),起HTML代碼如下
1.?<p>商品列表</p>???????2.?
| 1 | 2 | 3 |
| 4 | 5 | 6 |
注:?(?1,2,3,4,5,6這些個(gè)是序號(hào)，方便跟大家講解呢?)
在這里，我們暫時(shí)先把下面這一行去掉(為了大家操作簡(jiǎn)單)，變成
1.?<p>商品列表</p>???????2.?
| 1 | 2 | 3 |
我們要循環(huán)的是列，也就是
的外面,?而2,和3應(yīng)該是循環(huán)出來(lái)的東西，也就時(shí)我模板里面只用保留?1?這個(gè)td就可以了，2?和3都要去掉，
于是就變成了下面的樣子
1.?<p>商品列表</p>???????2.?
| 1 |
好，現(xiàn)在我們開(kāi)始加循環(huán)標(biāo)簽，我們要調(diào)用的是精品推薦商品,?代碼如下:
1.?<p>商品列表</p>???????2.?
| {$goods.short_style_name} |
注意了：foreach?表示下面的內(nèi)容屬于要進(jìn)行循環(huán)，from=$best_goods?表示循環(huán)的內(nèi)容來(lái)自$best_goods,($best_goods是精品商品推薦的標(biāo)簽?)?,?item=goods?表示當(dāng)前循環(huán)這一次的對(duì)象叫g(shù)oods,你也可以改為其它的東東，當(dāng)然{$goods.short_style_name}這個(gè)地方的goods也要相應(yīng)的改了哦,{$goods.short_style_name}?表示goods?這個(gè)對(duì)象的商品名稱. 好了，我們保存，前臺(tái)刷新看一下啊。呵呵，精品商品被循環(huán)出來(lái)了吧？
接著，為了大家應(yīng)用方便，我們把goods改為jingpinshangpin,代碼如下：
1.?<p>商品列表</p>???????2.?
| {$jingpinshangpin.short_style_name} |
| {$jingpinshangpin.short_style_name} |
刷新瀏覽器，點(diǎn)擊鏈接看看鏈接到什么地方去了哦。呵呵!?鏈接到了每個(gè)產(chǎn)品自己的頁(yè)面了呢。 說(shuō)明：標(biāo)簽?{$jingpinshangpin.url}?就是精品商品的商品鏈接的標(biāo)簽了，但是要記得哦，$jingpinshangpin?是你起的名字哦，item=$jingpinshangpin的這個(gè)?$jingpinshangpin改變了的話,這里也要跟著改變。
接下來(lái)我們添加上商品的圖片哦?,也就是增加一個(gè)屬性?,代碼如下：
1.?<p>商品列表</p>???????2.?
| @@##@@ {$jingpinshangpin.short_style_name} |
到前臺(tái)刷新瀏覽器看看看，呵呵，商品縮略圖也被調(diào)出來(lái)了。
說(shuō)明：標(biāo)簽?{$jingpinshangpin.thumb}?就是精品商品的縮略圖的標(biāo)簽了，但是要記得哦，$jingpinshangpin?是你起的名字哦，item=$jingpinshangpin的這個(gè)?$jingpinshangpin改變了的話,這里也要跟著改變。
如果你已經(jīng)熟練理解和掌握了以上的步驟，那么下面就越來(lái)越清晰和容易了。
接下來(lái)我們調(diào)取新品上市(標(biāo)簽為:?$new_goods?）和熱賣(mài)商品(?標(biāo)簽為：$hot_goods)?，接著在剛才的代碼后面加上去就是了。我就不多講了哦，代碼如下
1.?<p>新品上市</p>???????2.?
| @@##@@ ???????6.?{$xinpinshangshi.short_style_name} |
???????10.???????11.?
熱賣(mài)商品
???????12.?
| @@##@@ ???????16.?{$remaishangpin.short_style_name} |
接著我們要一個(gè)Menu菜單，也就是做一個(gè)產(chǎn)品的分類列表出來(lái)。相信你現(xiàn)在至少知道分類的標(biāo)簽是什么，就知道要怎么做了吧，呵呵.
分類的標(biāo)簽是：$categories
代碼如下：
1.?<p>分類列表</p>???????2.?{foreach?from=$categories?item=fenlei}???????3.????<a>{$fenlei.name}</a>???????4.?{/foreach}
到前臺(tái)刷新看看哦，呵呵，分類列表被調(diào)取出來(lái)了，我們?cè)囍诤笈_(tái)多添加幾個(gè)一級(jí)分類，然后到首頁(yè)刷新看看。
呵呵，我先去吃飯啦，吃完飯繼續(xù)寫(xiě)如何把子分類調(diào)用出來(lái)，大家有問(wèn)題多問(wèn)哦，
吃飯回來(lái)了….(PS:這是怎么地啊，呵呵!)
子分類的標(biāo)簽是對(duì)應(yīng)在父分類標(biāo)簽來(lái)調(diào)用的.代碼如下:
1.?<p>分類列表</p>???????2.?{foreach?from=$categories?item=fenlei}???????3.????<a>?{$fenlei.name}</a>???????4.??????{foreach?from=$fenlei.children?item=child}???????5.??????<br>-?–?<a>{$child.name|escape:html}</a>???????6.??????{/foreach}???????7.?{/foreach}
保存以后前臺(tái)刷新看看呢。呵呵，怎么樣？子分類也被調(diào)用出來(lái)了吧，當(dāng)然可以根據(jù)自己的需要，加上不同的表格或者圖片的修飾哦，子分類是放在了父分類標(biāo)簽的基礎(chǔ)上來(lái)調(diào)用的呢。
不過(guò)如果你的分類已經(jīng)固定了很少改動(dòng)，我建議還是做成死的，這樣可以做的更漂亮一些，比如每個(gè)分類直接是用圖片來(lái)代替。呵呵,我一般就是這么處理的，我除了商品和新聞是動(dòng)態(tài)調(diào)用出來(lái)的以外，其它的都是做成固定的死的，這樣就能夠設(shè)計(jì)的很漂亮，因?yàn)橛袝r(shí)候受到代碼的限制，做出來(lái)不是很好看。(…說(shuō)的好模糊，您能理解嗎？不能的話就告訴我?).
本來(lái)教程已經(jīng)寫(xiě)了好多了，但是很多地方寫(xiě)的有點(diǎn)讓新手不是那么容易接受，所以就一直在想辦法，如何講解的更簡(jiǎn)單一些，能讓每個(gè)人都學(xué)會(huì)做模板。思考中…..
由于個(gè)人原因,今天教程停播一天,明天繼續(xù)，實(shí)在不好意思各位.?~Orz.
啊，今天的章節(jié)就算是結(jié)束啦，明天預(yù)告:
1.如何調(diào)用某個(gè)分類里面的商品 2.如何制作商品展示頁(yè)面的模板 3.完善前面講的章節(jié)，并對(duì)大家提出的問(wèn)題做出解答
今天我們來(lái)學(xué)習(xí)如何掉用某一個(gè)分類里面的產(chǎn)品。 首先把?default文件夾中的category.dwt?的名字改為category_bak.dwt,然后新建一個(gè)category.dwt文件.?然后插入下面的代碼：
1.?{foreach?from=$goods_list?item=goods}???????2.?@@##@@<br>???????3.?{$goods.goods_name}???????4.?{/foreach}
復(fù)制代碼
注：$goods_list表示商品標(biāo)簽
接著我們?cè)L問(wèn)這個(gè)頁(yè)面:(Ecshop的訪問(wèn)網(wǎng)址/category.php?id=1)例如：http://localhost/ecshop/category.php?id=1 這樣我們就訪問(wèn)到了分類id為1的商品了，我們也可以讓id=2就訪問(wèn)到id?=?2商品了，那如何看某個(gè)分類的id呢？ 我們看后臺(tái)：?商品管理-》商品分類-》就可以看到商品分類的列表，然后把鼠標(biāo)指上去選擇新窗口打開(kāi)，就能在地址來(lái)里面看到goods.php?act=list&cat_id=1這樣子的信息，cat_id所等于的值就是這個(gè)分類的id了，然后就可以拿來(lái)調(diào)取了，呵呵。
好每次每次都把商品的列表調(diào)取出來(lái)了，那么如何調(diào)取某一個(gè)商品的頁(yè)面呢？ 首先把?default文件夾中的goods.dwt?的名字改為goods_bak.dwt,然后新建一個(gè)goods.dwt文件.?然后插入下面的代碼：
1.?商品圖片:?@@##@@<br><br>???????2.?商品名稱：{$goods.goods_style_name}<br><br>???????3.?商品貨號(hào)：{$goods.goods_sn}<br><br>???????4.?商品品牌:?{$goods.goods_brand}<br><br>???????5.?商品數(shù)量：{$goods.goods_number}?單位：{$goods.measure_unit}<br><br>???????6.?添加時(shí)間：{$goods.add_time}<br><br>???????7.?市場(chǎng)價(jià)格：{$goods.market_price}<br><br>???????8.?本店價(jià)格：{$goods.shop_price_formated}<br><br>???????9.?注冊(cè)用戶價(jià)格：{$rank_price.price}<br><br>???????10.?注冊(cè)用戶價(jià)格：{$rank_price.price}<br><br>???????11.?注冊(cè)用戶價(jià)格：{$rank_price.price}<br><br>
復(fù)制代碼
接著我們?cè)L問(wèn)這個(gè)頁(yè)面:(Ecshop的訪問(wèn)網(wǎng)址/goods.php?id=1)例如：http://localhost/ecshop/goods.php?id=1 這樣我們就訪問(wèn)到了商品id為1的商品了，我們也可以讓id=2就訪問(wèn)到id?=?2商品了，那如何看某個(gè)商品的id呢？
我們看后臺(tái)：商品管理-》商品列表-》就可以看到商品品的列表，最前面那一欄就是商品的id了，，然后就可以拿來(lái)調(diào)取了，呵呵。
還有人在問(wèn)品牌的，某一個(gè)品牌的商品怎么調(diào)用，呵呵，下次有時(shí)間再講 更新啦!!
今天我們學(xué)習(xí)一下如何在首頁(yè)調(diào)取某個(gè)分類的商品: 注意了，這里的修改有一些麻煩了哦：
首先你需要下載一套新的模板，比如blueksy?上傳到模板目錄?/themes/???也就是?/themes/bluesky,
然后進(jìn)入網(wǎng)站后臺(tái)->模板管理->模板選擇，選擇bluesky,?選擇OK, 然后到網(wǎng)站后臺(tái)?->?模板管理?->?設(shè)置模板?->?分類下的商品?(?點(diǎn)擊分類下的商品前面的+號(hào)，然后選擇“主區(qū)域中間“，序號(hào)默認(rèn),?商品分類隨便選擇一個(gè)就可以了”,?
然后填寫(xiě)顯示的條數(shù),填寫(xiě)好后點(diǎn)擊確定提交，(?注意:?有的朋友可能會(huì)遇到提交不了，是因?yàn)闄?quán)限問(wèn)題，需要把bluesky的模板權(quán)限改,然后再重新提交一次)。
這里我增加了兩個(gè),的數(shù)據(jù)是：主區(qū)域空間?0?手機(jī)??6 ??????????????????????????????????????????
主區(qū)域空間??0?手機(jī)?6 我們?cè)谶@里增加了多少條記錄，對(duì)應(yīng)首頁(yè)就可以調(diào)取多少個(gè)分類。
好接下來(lái)我們恢復(fù)模板為原來(lái)我們改過(guò)的default模板
在我們以前做的基礎(chǔ)上增加如下代碼(也就是在原來(lái)代碼的下面加上):
1.?<p>第一個(gè)分類的</p><p>???????2.?<?php $this->assign(‘cat_goods’,$this->_var['cat_goods_1']);??><?php $this->assign(‘goods_cat’,$this->_var['goods_cat_1']);??><?php echo $this->fetch(‘library/cat_goods.lbi’);??>???????3.?</p><p>第二個(gè)分類的</p><p>???????4.?<?php $this->assign(‘cat_goods’,$this->_var['cat_goods_3']);??><?php $this->assign(‘goods_cat’,$this->_var['goods_cat_3']);??><?php echo $this->fetch(‘library/cat_goods.lbi’);??></p>
復(fù)制代碼
這里要注意了,?紅色的?1?代表你要顯示分類的分類的ID,?將它改為你需要的?剛才添加的ID就可以了 紅色的?3?代表你要顯示分類的分類的ID,?將它改為你需要的?剛才添加的ID就可以了
好了，保存,前臺(tái)刷新看看啊,呵呵.是不是我們要的分類就出來(lái)了,
看樣子改起來(lái)很簡(jiǎn)單哦，不過(guò)每次都是這樣要操作兩個(gè)模板才能改還是有些麻煩,呵呵，等到高手進(jìn)階的時(shí)候再來(lái)講怎么做。
仔細(xì)一看還是有點(diǎn)不好的地方哦，就是樣子不好看啊，對(duì)不對(duì)？是默認(rèn)模板的樣子，沒(méi)有關(guān)系啦，我們打開(kāi)?librasy目錄中的cat_goods.lbi文件修改就可以了。修改要注意的地方上門(mén)講過(guò)了，不過(guò)這里還是要再說(shuō)明一些小問(wèn)題
cat_goods.lbi的代碼如下：
1.?<meta>???????2.?<p>@@##@@<a>{$goods_cat.name|escape:html}</a></p>???????3.?<p>???????4.??????????5.???</p>
| @@##@@ |
| {$goods.short_name|escape:html} ???????11.????????????????12.?????????{$lang.promote_price}{$goods.promote_price}???????13.????????????????14.?????????{$lang.shop_price}{$goods.shop_price}???????15.????????????????16.??????? |
???????19.??????????20.???
???????21.?
復(fù)制代碼
這里哦于一些奇怪的地方就是在標(biāo)簽兩邊多了??符號(hào)，這個(gè)是沒(méi)有關(guān)系的.刪除掉也沒(méi)有關(guān)系的啦
ECSHOP?
文章列表頁(yè)
?
文章內(nèi)容頁(yè)
?
商品品牌頁(yè)
?
所有分類頁(yè)
?
商品列表頁(yè)
?
商品比較頁(yè)
?
購(gòu)物車和購(gòu)物流程頁(yè)
?
商品相冊(cè)頁(yè)
?
商品詳情頁(yè)
?
團(tuán)購(gòu)商品詳情頁(yè)
?
團(tuán)購(gòu)商品列表頁(yè)
?
首頁(yè)
?
信息提示頁(yè)
?
選購(gòu)中心頁(yè)
?
收貨確認(rèn)信息頁(yè)
?
在線支付提示信息頁(yè)
?
商品搜索頁(yè)
?
奪寶奇兵頁(yè)
?
標(biāo)簽云頁(yè)
?
用戶中心頁(yè)（包含：歡迎頁(yè)，我的留言，我的標(biāo)簽，收藏商品，缺貨登記列表，添加缺貨登記。）
?
用戶安全頁(yè)（包含：會(huì)員登錄，會(huì)員注冊(cè)，找回密碼。）
?
用戶中心頁(yè)?（包含：個(gè)人資料，我的紅包，添加紅包，我的訂單，訂單詳情，合并訂單，訂單狀態(tài)，商品列表，費(fèi)用總計(jì)，收貨人信息，支付方式，其他信息，會(huì)員余額。）
.png)
