• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > CMS教程 > ecshop教程 >

菜鸟快速入门ecshop模板制作教程(2)

来源: www.dedecms8.com 编辑:织梦吧 时间:2013-07-07点击:

第二章

好,继续在我们昨天的基础上,我们在网站快讯的循环后面,按 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>

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

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

<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>

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

好我们继续完善他,给它加上链接对应商品的链接,也就是添加<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>

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

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

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

<p>新品上市</p>

<table width=”70%” border=”1″>

<tr>

{foreach from=$new_goods item=xinpinshangshi}

<td><a href=”{$xinpinshangshi.url}”><img src=”{$xinpinshangshi.thumb}” border=”0″ /><br>

{$xinpinshangshi.short_style_name}</a></td>

{/foreach}

</tr>

</table>

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1170734538@qq.com ,  QQ