自主学习ECshop模板制作教程

2016-07-07 14:55 来源：www.chinab4c.com 作者：ecshop专家

我们在网站快讯的循环后面，按 Enter键, 输入:商品列表,接着建立一个2行3列的表格，宽度为70%, 表格边框为1（为了让大家看清楚 ),起HTML代码如下
<p>商品列表</p>
<table width="70%" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
在这里，我们暂时先把下面这一行去掉(为了大家操作简单)，变成 <p>商品列表</p>
<table width="70%" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

我们要循环的是列，也就是<td>,因此我们的循环标签应该在<td> 和</td>的外面, 而2,和3应该是循环出来的东西，也就时我模板里面只用保留 1 这个td就可以了，2 和3都要去掉，
于是就变成了下面的样子
<p>商品列表</p>
<table width="70%" border="1">
<tr>
<td>1</td>
</tr>
</table>
好，现在我们开始加循环标签，我们要调用的是精品推荐商品, 代码如下:
<p>商品列表</p>
<table width="70%" border="1">
<tr>
{foreach from=$best_goods item=goods}
<td>{$goods.short_style_name}</td>
{/foreach}
</tr>
</table>
注意了：foreach 表示下面的内容属于要进行循环，from=$best_goods 表示循环的内容来自$best_goods,($best_goods是精品商品推荐的标签 ) , item=goods 表示当前循环这一次的对象叫goods,你也可以改为其它的东东，当然{$goods.short_style_name}这个地方的goods也要相应的改了哦,{$goods.short_style_name} 表示goods 这个对象的商品名称.
好了，我们保存，前台刷新看一下啊。呵呵，精品商品被循环出来了吧？
接着，为了大家应用方便，我们把goods改为jingpinshangpin,代码如下：
<p>商品列表</p>
<table width="70%" border="1">
<tr>
{foreach from=$best_goods item=jingpinshangpin}
<td>{$jingpinshangpin.short_style_name}</td>
{/foreach}
</tr>
</table>
好前台刷新看看哦，呵呵，夷？如果你有很多的精品商品你会发现商品变了，因为精品商品是随机调取出来的.
http://titylc77.com
http://ewinylc51.com
http://**yulc67.com

好我们继续完善他，给它加上链接对应商品的链接,也就是添加<a>属性, 代码如下：
<p>商品列表</p>
<table width="70%" border="1">
<tr>
{foreach from=$best_goods item=jingpinshangpin}
<td><a href="{$jingpinshangpin.url}">{$jingpinshangpin.short_style_name}</a></td>
{/foreach}
</tr>
</table>
刷新浏览器，点击链接看看链接到什么地方去了哦。呵呵! 链接到了每个产品自己的页面了呢。
说明：标签 {$jingpinshangpin.url} 就是精品商品的商品链接的标签了，但是要记得哦，$jingpinshangpin 是你起的名字哦，item=$jingpinshangpin的这个 $jingpinshangpin改变了的话,这里也要跟着改变。
接下来我们添加上商品的图片哦 ,也就是增加一个<img>属性 ,代码如下：
<p>商品列表</p>
<table width="70%" border="1">
<tr>
{foreach from=$best_goods item=jingpinshangpin}
<td><a href="{$jingpinshangpin.url}"><img src="{$jingpinshangpin.thumb}" border="0" /><br>{$jingpinshangpin.short_style_name}</a></td>
{/foreach}
</tr>
</table>
到前台刷新浏览器看看看，呵呵，商品缩略图也被调出来了。