销售排行
模块定义
展示店铺内销售量最高的商品Top8。
模块模板参数可使用方法
| 名称 | 值 | 类型 | 描述 |
|---|---|---|---|
| 模块标题 | |||
| 标题文字 | $!moduleTitle.title | 引用 | 获取配置的模块标题 |
| 标题链接 | $!moduleTitle.titleLink | 引用 | 获取配置的模块标题链接地址 |
| 标题更多 | $!moduleTitle.more | 引用 | 获取配置的模块标题更多 |
| 标题更多链接 | $!moduleTitle.moreLink | 引用 | 获取配置的模块标题更多链接地址 |
| VM语句 | |||
| VM语句 | #foreach($!item in $!salesRank) #end | 遍历 | 1、通过遍历的方式获取“新销售排行”模块配置里某一个排序下的商品。 2、在#foreach和#end语句之间可以对商品的html展示结构进行编辑。 |
| 公用 | |||
| 商品ID(skuId) | $!item.wareid | 引用 | 获取商品的skuId |
| 商品名称 | $!item.wname | 引用 | 获取商品的名称 |
| 商品图片 | $!item.imageurl | 引用 | 获取商品图片的地址。需配合使用下面的“获取商品图片”方法获取商品图片 |
| 获取商品图片 | $!jshopCommon.getImage(imgName,size) | 方法 | 1、该方法返回指定商品的图片地址。 2、参数imgName值：$!item.imageurl 3、参数size值：1——6，图片尺寸分别为（单位：px）： 1(350*350)、2(160*160)、3(130*130)、4(100*100)、5(50*50)、6(240*240) |
| 商品详情地址 | |||
| JD | $!jshopProduct.getBuyUrl(skuId) | 方法 | 1、获取商品详情页链接地址 2、参数skuId值：$!item.wareid |
| 购物车地址 | |||
| JD | $!jshopCommon.addCart(skuId) | 方法 | 1、通过商品id将该其放入购物车，并返回操作成功后的地址 2、参数skuId值：$!item.wareid |
20130929更新：增加新销售排行模块帮助信息
模块效果参考
<div class="j-module" module-function="autoWidth,tabClass" module-param="{defaultClass:'jCurrent'}" >
#if($moduleTitle.exists)
<div class="jTitle">
#if($moduleTitle.moreExists)
<span class="jTitleExtra"><a href="$!moduleTitle.moreLink">$!moduleTitle.more</a></span>
#end
#if($moduleTitle.titleExists)
<span class="jTitleName"><a href="$!moduleTitle.titleLink">$!moduleTitle.title</a></span>
#end
</div>
#else
<div class="jTitle">
<span class="jTitleName">销售排行TOP8</span>
</div>
#end
<ul>
#foreach($!item in $!salesRank)
#if($velocityCount>8)
#break
#end
<li>
<div class="jItem">
<div class="jPic">
<a href="$!jshopProduct.getBuyUrl($!item.wareid)" target="_blank">
<img src="$!jshopCommon.getImage($!item.imageurl,2)" alt="$!item.wname" class="err-product" width="160" height="160" />
</a>
<div class="jDesc" title="$!item.warename">
<a href="$!jshopProduct.getBuyUrl($!item.wareid)" target="_blank">$!item.warename</a>
</div>
</div>
<div class="jGoodsInfo">
<div class="jPrice">
<div class="jdPrice">
<span class="jRmb">¥</span>
#set($wareid = $velocityCount.parseInt($item.wareid))
$!jshopPrice.getJdPrice($wareid)
</div>
</div>
<div class="jBtnArea">
<a target="_blank" href="$!jshopCommon.addCart($!item.wareid)" title="立即购买"><em></em>立即购买</a>
</div>
</div>
</div>
</li>
#end
</ul>
</div>
.userjSaleRank{background:#fff; overflow:hidden;}
.userjSaleRank .jTitle{background:#fff; color:#666; border-bottom:solid 2px #e6e6e6; padding:10px 0; margin-bottom:5px; overflow:hidden;}
.userjSaleRank .jTitle a{color:#666;}
.userjSaleRank .jTitleName{font-size:22px;}
.userjSaleRank .jTitleExtra{font-size:14px; font-weight:bold; float:right;}
.userjSaleRank li{float:left; width:240px; padding:5px 0; margin:0 3px; overflow:hidden; display:inline; position:relative;}
.userjSaleRank .jItem{height:auto;}
.userjSaleRank .jPic{position:relative; text-align:center; background:#fff; _height:100%; border:solid 1px #e6e6e6;}
.userjSaleRank .jPic img{vertical-align:top;}
.userjSaleRank .jPic img.err-product{background:url(//misc.360buyimg.com/lib/skin/e/i/error-jd.gif) no-repeat 50% 50%;}
.userjSaleRank .jPic a{width:238px; height:238px; display:block; margin:0 auto;}
.userjSaleRank .jGoodsInfo{overflow:hidden; position:relative; height:45px; padding:5px 50px 5px 10px; margin-top:1px; background:#f0f0f0;}
.userjSaleRank .jDesc{height:25px; line-height:25px; font-size:12px; overflow:hidden; background:#000; background:rgba(0,0,0,0.5); filter:alpha(opacity=50); position:absolute; left:0; bottom:0; width:100%; display:none;}
.userjSaleRank .jCurrent .jDesc{display:block;}
.userjSaleRank .jDesc a{color:#dcd3d3; text-decoration:none; width:96%; padding:0 2%; height:auto;}
.userjSaleRank .jDesc a:hover{text-decoration:underline;}
.userjSaleRank .jDesc .jSlogan{color:#e33a3d!important;}
.userjSaleRank .jPrice{height:26px; padding-top:10px; overflow:hidden;}
.userjSaleRank .jPrice span{display:inline-block; *display:inline; *zoom:1; vertical-align:middle;}
.userjSaleRank .jPrice .jsNumNo{text-decoration:none;}
.userjSaleRank .jdPrice{font-size:0;}
.userjSaleRank .jdPrice .jRmb{font-size:22px; line-height:normal; color:#666;}
.userjSaleRank .jdPrice .jText{font-size:12px; color:#666;}
.userjSaleRank .jdPrice .jdNum{font-size:22px; line-height:normal; color:#666;}
.userjSaleRank .jdPrice .jdNumNo{font-size:12px;}
.userjSaleRank .jSalePrice{text-decoration:line-through; color:#999; font-weight:bold; overflow:hidden;}
.userjSaleRank .jSalePrice .jText{text-decoration:line-through;}
.userjSaleRank .jSalePrice .jRmb{text-decoration:line-through;}
.userjSaleRank .jSalePrice .jsNum{text-decoration:line-through;}
.userjSaleRank .jBtnArea{overflow:hidden; position:absolute; right:10px; bottom:5px;}
.userjSaleRank .jBtnArea a{display:block; width:90px; height:45px; line-height:45px; text-align:center; background:#d43f40; font-size:20px; color:#fff; border-radius:3px; position:relative;}
.userjSaleRank .jBtnArea a em{position:absolute; top:0; left:0; background:url(//img14.360buyimg.com/cms/g12/M00/02/17/rBEQYFGIva8IAAAAAAAOlGlpzlMAAAiGwP_8DUAAA6s720.png) no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//img14.360buyimg.com/cms/g12/M00/02/17/rBEQYFGIva8IAAAAAAAOlGlpzlMAAAiGwP_8DUAAA6s720.png'); _background-image:none; width:90px; height:45px;}