Get to know ecshop

Recommended (free):ecshop tutorial

I am an EC Novices, no matter how many templates EC makes, they will definitely not be able to meet our needs. What’s more, each industry has its own approach, and the templates unified by EC may not be suitable for our industry. Therefore, only we can truly master our own. Only by making templates and modifying them can you truly create an e-commerce platform that suits you and that is in line with the habits of customers in your industry.

First of all, welcome everyone to browse this tutorial. Congratulations to everyone for using ECshop! How good is EC? ECshop is built with PHP. I don’t want to say more about PHP applications (Amazon: http://www.020jz.org/, Yahoo: yahoo.com, Baidu: baidu.com Taobao: http:/ /www.020jz.org/Sina: sina.com, Tencent: qq.com), (ps: ECshop succeeded! At this moment, he is the inheritance of great e-commerce, he is not fighting alone, he is not alone -_-!!! ) I won’t go into too much detail, everyone knows it, but sometimes I, who love diving, really can’t help but jump out and say a few words.

This tutorial is suitable for understanding Before viewing ECshop and ECshop template DIY and their daily use, you need to be able to use at least one editor (exp: Dreamweaver, editplus, emacs, vi, ee...meaning a visual HTML editor or a direct text editor, I When talking about it, I will use Dreamwaver, which is more suitable for beginners and designers). This tutorial is currently maintained by me alone, but I believe that it won’t be long before many people will continue to maintain it. The content needs to be constantly updated. If you are interested in participating, PM me. Let's serve everyone together.

By studying this tutorial, as long as you follow it while watching it, you will definitely be able to learn to make your own templates. :)

The following chapters apply to the ECshop program. At the same time, a lot of content here is related to some Smarty. If you are already familiar with these contents, you can skip reading. If you are new to ECshop and want to DIY your own store, you should read these chapters carefully and in detail from beginning to end. (ps: Don’t be nervous, I will try my best to communicate with you in human language. I will only show it to you in machine language as a last resort.) I hope that everyone can pass this tutorial and make any template you want. Ha ha! let's work hard together!

Chapter One:

Read these contents, you will understand:

Template storage path: ecshop/themes/xxxxx Where xxxxx is a certain A set of templates. For example, the template file that comes with the system is generally called default, (i.e.: ecshop/themes/default). What is placed in it is the default template when it is installed. All the following instructions are for the default template.

We find a random gif picture, name it logo.gif and put it in the images directory, and then we refresh the homepage. did you see? The homepage logo has been modified. If you think the size is inappropriate, then we open page_header.lib in the library directory to view the source code, then search for images/logo.gif and then look behind it width="130″ height="56″ and change 130 and 56 to the corresponding ones. The value is enough, go to the front desk to refresh and see. Refresh the browser to see if there are any changes to the page. Shrimp? Didn't find it? Look at the browser header. Haha, has the title of the website been changed?

Haha, yes, {$page_title} is the tag of the website title (note: the tag starts from {to} and ends, {and} are part of the tag). The entire ECshop template is like this one by one Tags are composed of tags that control the dynamic display of website content and data.

For example,

({$keywords}) controls the keyword tag of the website,

{$description}: website description tag, (this is the tag in the template, each Each tag will correspond to a value in the program. When the website is running, the template engine will read the template page, and then replace the corresponding tag with the corresponding value, and the website page we see will be displayed. Got it. This For novices, this piece of content may not be fully digested at once. If you have any questions, please leave a message and I will update it here.) Don’t worry, haste makes waste, haha, let’s really start to make the ECshop template now. (Viewers who don’t understand HTML should prepare Dreamweaver)

Prerequisite: adjust the template you are currently using to the default template, and then clear the cache.

Next we enter the default directory and you can see the following file directory:

*.dwt (indicating other .dwt files)

Xiaomi? Don't you believe these are templates? Okay, let me prove it to you.

We change the name of the logo.gif file in images to logo2.gif, and then

Okay, then we use Dreamweaver to open the index .dwt file, search for {$page_title} in the source code. After finding it, modify {$page_title} to Super Invincible Hypermarket. Then go to

It’s very simple 8, haha, everyone is really smart, Kong Ming Reincarnation, I learned it so quickly. If your previous step was super, very simple, the next step will be the same. How should I change it next? We continue after commercials.

…Golden advertising space…Welcome to buy…PM me if necessary…(PS: People can’t be so shameless)…Haha…

1. We go to the /themes/default directory, rename index.dwt to index_bak.dwt, then use Dreamweaver to create a new HTML file, then save it to the /themes/default directory and name it index.dwt. OK, let’s refresh the front desk Look, haha, there is nothing. Okay, findwith: {$page_title}, in Also put a {$page_title} betweenand, refresh the front desk and take a look. Hey, what do you see? Is the website title printed?

If a dialog box pops up during operation:

Just click OK, :)

2. Next we select the visual interface editor: then click after {$page_title} Enter key to change the line, and then enter: Store announcement: {$shop_notice} Go to the browser to refresh the homepage to refresh and see, haha. The store announcement has been called up. You can go to the website backend

System Settings->Store Settings->Online Store Information->Store Announcement to modify the content, and then go to the browser and refresh the website homepage to see, haha , the store announcement is dropped out dynamically.

3. You can continue to press the Enter key after {$shop_notice} to change the line, and then enter

1. 网站快讯： 2. {foreach from=$new_articles item=article} 3. {$article.short_title} 4. {/foreach}

Note:

Note:

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

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

1.  2. {foreach from=$new_articles item=article} 3.  6. {/foreach} 7. 
 4. {$article.short_title} 5. 

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

第二章

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

模板教程继续啦！

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

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

1. 
商品列表
 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. 
商品列表
 2.  3.  4.  5.  6.  7.  8. 
1
2
3

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

于是就变成了下面的样子

1. 
商品列表
 2.  3.  4.  5.  6. 
1

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

1. 
商品列表
 2.  3.  4. {foreach from=$best_goods item=goods} 5.  6. {/foreach} 7.  8. 
{$goods.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. 
商品列表
 2.  3.  4. {foreach from=$best_goods item=jingpinshangpin} 5.  6. {/foreach} 7. 

         Copy after login
        
好前台刷新看看哦，呵呵，夷？如果你有很多的精品商品你会发现商品变了，因为精品商品是随机调取出来的.
好我们继续完善他，给它加上链接对应商品的链接,也就是添加属性, 代码如下：


        
1. 
商品列表
 2. 
{$jingpinshangpin.short_style_name}
        
       
       
       
       
       
 3.  4. {foreach from=$best_goods item=jingpinshangpin} 5.  6. {/foreach} 7.  8. 
{$jingpinshangpin.short_style_name}

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

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

1. 
商品列表
 2.  3.  4. {foreach from=$best_goods item=jingpinshangpin} 5.  6. {/foreach} 7.  8. 

{$jingpinshangpin.short_style_name}

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

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

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

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

1. 
新品上市
 2.  3.  4. {foreach from=$new_goods item=xinpinshangshi} 5.  7. {/foreach} 8.  9. 

 6. {$xinpinshangshi.short_style_name}
 10. 11. 
热卖商品
 12.  13.  14. {foreach from=$hot_goods item=remaishangpin} 15.  17. {/foreach} 18.  19. 

 16. {$remaishangpin.short_style_name}

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

分类的标签是：$categories

代码如下：

1. 
分类列表
 2. {foreach from=$categories item=fenlei} 3. {$fenlei.name} 4. {/foreach}

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

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

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

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

1. 
分类列表
 2. {foreach from=$categories item=fenlei} 3.  {$fenlei.name} 4. {foreach from=$fenlei.children item=child} 5. 
- – {$child.name|escape:html} 6. {/foreach} 7. {/foreach}

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

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

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

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

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

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

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

1. {foreach from=$goods_list item=goods} 2. 
 3. {$goods.goods_name} 4. {/foreach}

复制代码

注：$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. 商品图片: 

 2. 商品名称：{$goods.goods_style_name}

 3. 商品货号：{$goods.goods_sn}

 4. 商品品牌: {$goods.goods_brand}

 5. 商品数量：{$goods.goods_number} 单位：{$goods.measure_unit}

 6. 添加时间：{$goods.add_time}

 7. 市场价格：{$goods.market_price}

 8. 本店价格：{$goods.shop_price_formated}

 9. 注册用户价格：{$rank_price.price}

 10. 注册用户价格：{$rank_price.price}

 11. 注册用户价格：{$rank_price.price}

复制代码

接着我们访问这个页面:(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. 
第一个分类的
 2. assign(‘cat_goods’,$this->_var['cat_goods_1']); ?>assign(‘goods_cat’,$this->_var['goods_cat_1']); ?>fetch(‘library/cat_goods.lbi’); ?> 3. 
第二个分类的
 4. assign(‘cat_goods’,$this->_var['cat_goods_3']); ?>assign(‘goods_cat’,$this->_var['goods_cat_3']); ?>fetch(‘library/cat_goods.lbi’); ?>

复制代码

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

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

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

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

cat_goods.lbi的代码如下：

1.  2. 
{$goods_cat.name|escape:html}
 3. 
 4.  5.  6.  7.  8.  9.  10.  17.  18. 
{$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. 

复制代码

Some strange thing here is that there are more symbols on both sides of the label. This does not matter. It does not matter if you delete it.

ECSHOPLayout reference picture(Applicable versionv2.1.5)

Article list page: article_cat.dwt

Article content page: article.dwt

Product brand page: brand.dwt

All category pages: catalog.dwt

Product list page: category.dwt

Product comparison page: compare.dwt

Shopping cart and shopping process page: flow.dwt

Product album page: gallery.dwt

Product details page: goods.dwt

Group purchase product details page: group_buy_goods.dwt

Group purchase product list page: group_buy_list.dwt

Homepage: index.dwt

Message prompt page: message.dwt

Shopping center page: pick_out.dwt

Receive confirmation information page: receive.dwt

Online payment prompt information page: respond.dwt

Product search page: search.dwt

Raiders of the Lost Ark Page: snatch.dwt

tagcloud page: tag_cloud. dwt

User center page (including: welcome page, my message, my tags, favorite products, out-of-stock registration list, add out-of-stock registration.): user_clips.dwt

User security page (including: member login, member registration, password retrieval.): user_passport.dwt

User center page (including: personal information, my red envelope, add red envelope, my order, order details, merged order, order status, product list, cost Total, consignee information, payment method, other information, membership balance.): user_transaction.dwt