摘要：
这几天在改公司页面，遇到一个问题：调用指定商品信息，但图片必须要替换成指定的图片。一番折腾后终于解决......

一、需求分析

公司网站的商品分类有：中式风格、韩式风格、欧式风格、古典风格、田园风格、现代简约、童趣卡通、东南亚、地中海、明清古典、办公工装、成品窗帘、辅料及其他等十余个分类。每个分类都有一个首页，美工在出图时为了保证不同分类有不同的风格，所以这些页面中展示的商品与商家上传的图片是完全不同的。要求是：除图片外，其它信息如标题、价格、促销价、销量、评分等信息必须动态对应。

二、初期想法

可不要小看这个问题，让艺灵苦思了一个上午才想到解决的方法，我们还是先来仔细分析一下吧。

由于图片是自定义的，所以不能通过调用后台中已有的数据图片，但除了图片之外，标题、价格、促销价、销量、评分等等数据均要使用系统的。如果是直接写死的话，工作量太过庞大！毕竟暂时是8个页面，加起来也有上百款产品。如果后期产品经常变动的话，每修改一款产品时我都要将标题、价格、促销价、销量、评分等数据一一修改，这是一个非常笨且非常耗时的方法！

怎么办呢？刚开始艺灵想了好久后才想到一个方法：“通过修改调用标签中的thumb来指定图片”。虽然看似很不错，但西安destoon官方技术那边给的回复是：“没有这种写法”......

三、最终成功方法

又想了好久后，艺灵终于想到了一个方法，那就是：“将代码分为三块，起始部分(模板标签调用)、中间部分(指定图片)、结尾部分(模板标签调用)、”。剖析图：虽然每实现一个图片要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}

现在再来看下最终的源码效果吧，如图：

不知道哪位大大还有更好的方法......

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2015-11-17/343.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。