沉浸式阅读
Beta

DESTOON b2b教程之调用指定itemid的商品信息且使用自定义图片

     订阅 模板相关     2016-02-14     小黑    1613    0    1    1    2017-01-01
学习要点:那就是:“将代码分为三块,起始部分(模板标签调用)、中间部分(指定图片)、结尾部分(模板标签调用)、”。剖析图:虽然每实现一个图片要3行代码,但相比而言,已经很完美了。每次修改时只需要修改图片的src即可。其它什么标题、价格、促销价、销量、评分等数据均是动态调用,是不是很节省时间?还是一起来看下最终的代码吧。修改标签代码!--用一个外包封装,便于整体移动--div class="w-105 pro-c4-ditan clearfix"!--起始部分--!--{tag("mod

那就是:“将代码分为三块,起始部分(模板标签调用)、中间部分(指定图片)、结尾部分(模板标签调用)、”。剖析图:destoon标签模板调用商品信息

虽然每实现一个图片要3行代码,但相比而言,已经很完美了。每次修改时只需要修改图片的src即可。其它什么标题、价格、促销价、销量、评分等数据均是动态调用,是不是很节省时间?还是一起来看下最终的代码吧。

修改标签代码

  1. <!--用一个外包封装,便于整体移动-->
  2. <div class="w-105 pro-c4-ditan clearfix">
  3. <!--起始部分-->
  4. <!--{tag("moduleid=16&condition=status=3 and itemid='6895'&template=tbjj_1")}-->
  5. <!--指定图片-->
  6. <img class="lazy prol-img" data-original="/file/upload/img151109/katong_06.jpg">
  7. <!--结束部分(包括标题、价格、促销价、销量、评分等)-->
  8. <!--{tag("moduleid=16&condition=status=3 and itemid='6895'&template=tbjj_1_1")}-->
  9. ......
  10. </div>
  11. <!--简注:黄色高亮表示商品id号,红色高亮表示对应的模板名称-->

上面的代码中提到了两个模板,接下来我们来看下模板里面的代码吧。

二、标签模板源码

tbjj_1,起始标签

  1. {loop $tags $i $t}
  2. <dl class="product-list">
  3. <dt>
  4. <a href="{$t[linkurl]}" class="prol-a" target="_blank">
  5. {/loop}

tbjj_1_1,结束标签

  1. {loop $tags $i $t}
  2. </a>
  3. </dt>
  4. <dd class="prol-titw">
  5. <a href="{$t[linkurl]}" title="{$t[alt]}" target="_blank" class="prol-tit">{$t[title]}</a>
  6. <p class="prol-priw">
  7. <span class="prol-sales">销售:<em class="prols-num">{$t[sales]}</em>件</span>
  8. <span class="prol-pri">¥{$t[price]}</span>
  9. </p>
  10. </dd>
  11. </dl>
  12. {/loop}

至此,大功已告成!但在使用过程中却发现存在问题:如果产品已下架,此时模板tbjj_1和tbjj_1_1不能成功调用标签。如图:很显然,这是不行的!由于模板不能调用,也就意味着对应的图片失去了css样式,所以这个问题必须得解决才行。

五、代码升级(包含已下架等非通过条件)

不知道有没有看官注意这个条件:status=3。如果看官不知道这个条件的意思,我们可以在数据字典中找到答案。如图:此时我们已经知道了status表示状态且有5个取值,分别为:0为回收站,1为未通过,2为待审核,3为已通过,4为已过期。

除了已通过条件外,还要将库存也加进去,毕竟有时候库存会被突然拍完。通过查看数据字典,我们知道了amount是我们要找的供货总量,也就是所谓的库存。接下来,我们来实现一个小判断吧:如果商品已通过,则正常显示,否则提示已下架等字样。下面开始改造代码。

tbjj_1_1,修改结束标签

  1. {loop $tags $i $t}
  2. </a>
  3. </dt>
  4. <!--这里加一个判断条件,有库存且已通过时执行-->
  5. {if $t[status] == 3 && $t[amount] > 0}
  6. <dd class="prol-titw">
  7. <a href="{$t[linkurl]}" title="{$t[alt]}" target="_blank" class="prol-tit">{$t[title]}</a>
  8. <p class="prol-priw">
  9. <span class="prol-sales">销售:<em class="prols-num">{$t[sales]}</em>件</span>
  10. <span class="prol-pri">¥{$t[price]}</span>
  11. </p>
  12. <!--其它情况时执行-->
  13. {else}
  14. <dd class="prol-titw prol-yxj">已下架(提示文本可自己修改)
  15. {/if}
  16. </dd>
  17. </dl>
  18. {/loop}

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

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

本文标题: DESTOON b2b教程之调用指定itemid的商品信息且使用自定义图片

本文链接: https://www.mbkfw.com/course/267.html (转载时请注明来源链接)

本文说明: 有问题或投稿请发送至: 邮箱/kf@dtmuban.com    QQ/290948585

特别鸣谢: 如果您觉得本文对您有帮助,请给我们一个小小的赞,收藏本文更利于反复学习哦!

 
destoon程序前端开发标签生成器

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“商企云服”
"模板开发网前端开发教学"
每日干货技术分享
 
0

圈友点评

文明上网理性发言,请遵守网络评论服务协议


色彩
×

《客户实名在线注册登记》售后一直都在!

关注

微信
关注

微信扫一扫
不同的环境体验

幸运大转盘,好礼等您拿

模板开发网公众号

模板开发网微信小程序

代授权

程序
授权

黑小二

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。咨询客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

微信公众号: 商企云服

微信小程序: 模板开发

QQ客服 微信客服DT授权代办 在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 18:00

APP下载

安卓
APK

模板开发网安卓版APP

反馈

我要
反馈