那就是:“将代码分为三块,起始部分(模板标签调用)、中间部分(指定图片)、结尾部分(模板标签调用)、”。剖析图:
虽然每实现一个图片要3行代码,但相比而言,已经很完美了。每次修改时只需要修改图片的src即可。其它什么标题、价格、促销价、销量、评分等数据均是动态调用,是不是很节省时间?还是一起来看下最终的代码吧。
修改标签代码
- <!--用一个外包封装,便于整体移动-->
- <div class="w-105 pro-c4-ditan clearfix">
- <!--起始部分-->
- <!--{tag("moduleid=16&condition=status=3 and itemid='6895'&template=tbjj_1")}-->
- <!--指定图片-->
- <img class="lazy prol-img" data-original="/file/upload/img151109/katong_06.jpg">
- <!--结束部分(包括标题、价格、促销价、销量、评分等)-->
- <!--{tag("moduleid=16&condition=status=3 and itemid='6895'&template=tbjj_1_1")}-->
- ......
- </div>
- <!--简注:黄色高亮表示商品id号,红色高亮表示对应的模板名称-->
上面的代码中提到了两个模板,接下来我们来看下模板里面的代码吧。
二、标签模板源码
tbjj_1,起始标签
- {loop $tags $i $t}
- <dl class="product-list">
- <dt>
- <a href="{$t[linkurl]}" class="prol-a" target="_blank">
- {/loop}
tbjj_1_1,结束标签
- {loop $tags $i $t}
- </a>
- </dt>
- <dd class="prol-titw">
- <a href="{$t[linkurl]}" title="{$t[alt]}" target="_blank" class="prol-tit">{$t[title]}</a>
- <p class="prol-priw">
- <span class="prol-sales">销售:<em class="prols-num">{$t[sales]}</em>件</span>
- <span class="prol-pri">¥{$t[price]}</span>
- </p>
- </dd>
- </dl>
- {/loop}
至此,大功已告成!但在使用过程中却发现存在问题:如果产品已下架,此时模板tbjj_1和tbjj_1_1不能成功调用标签。如图:很显然,这是不行的!由于模板不能调用,也就意味着对应的图片失去了css样式,所以这个问题必须得解决才行。
五、代码升级(包含已下架等非通过条件)
不知道有没有看官注意这个条件:status=3。如果看官不知道这个条件的意思,我们可以在数据字典中找到答案。如图:此时我们已经知道了status表示状态且有5个取值,分别为:0为回收站,1为未通过,2为待审核,3为已通过,4为已过期。
除了已通过条件外,还要将库存也加进去,毕竟有时候库存会被突然拍完。通过查看数据字典,我们知道了amount是我们要找的供货总量,也就是所谓的库存。接下来,我们来实现一个小判断吧:如果商品已通过,则正常显示,否则提示已下架等字样。下面开始改造代码。
tbjj_1_1,修改结束标签
- {loop $tags $i $t}
- </a>
- </dt>
- <!--这里加一个判断条件,有库存且已通过时执行-->
- {if $t[status] == 3 && $t[amount] > 0}
- <dd class="prol-titw">
- <a href="{$t[linkurl]}" title="{$t[alt]}" target="_blank" class="prol-tit">{$t[title]}</a>
- <p class="prol-priw">
- <span class="prol-sales">销售:<em class="prols-num">{$t[sales]}</em>件</span>
- <span class="prol-pri">¥{$t[price]}</span>
- </p>
- <!--其它情况时执行-->
- {else}
- <dd class="prol-titw prol-yxj">已下架(提示文本可自己修改)
- {/if}
- </dd>
- </dl>
- {/loop}
现在再来看下最终的源码效果吧,如图:
不知道哪位大大还有更好的方法......