组合推荐
模块定义
通过设置一个主商品和四个关联的商品，让用户可以快速地购买组合内的任意商品
模块模板参数可使用方法
| 名称 | 值 | 类型 | 描述 |
|---|---|---|---|
| VM语句 | #foreach($!goods in $!combinationBuySetting.comGoodsList) #end | 遍历 | 1、通过遍历的方式获取“组合推荐”模块配置里所有的商品。 2、在#foreach和#end语句之间可以对商品的html展示结构进行编辑。 |
| 公用 | |||
| 商品ID(skuId) | $!goods.goodsId | 引用 | 获取商品的skuId |
| 商品名称 | $!goods.wname | 引用 | 获取商品的名称 |
| 商品广告词 | $!goods.advertWord | 引用 | 获取商品的广告词 |
| 商品图片 | $!goods.imageurl | 引用 | 获取商品图片的地址。需配合使用下面的“获取商品图片”方法获取商品图片 |
| 获取商品图片 | $!jshopCommon.getImage(imgName,size) | 方法 | 1、该方法返回指定商品的图片地址。 2、参数imgName值：$!goods.imageurl 3、参数size值：1——6，图片尺寸分别为（单位：px）： 1(350*350)、2(160*160)、3(130*130)、4(100*100)、5(50*50)、6(240*240) |
| 参考价（文字） | $!jshopPrice.getSalePrice(skuId) | 方法 | 1、通过商品id获取参考价，其class值为jsNum，可通过它设置样式 2、参数skuId值：$!goods.goodsId |
| 促销价（文字） | $!jshopPrice.getJdPrice(skuId) | 方法 | 1、通过商品id获取促销价，其class值为jdNum，可通过它设置样式 2、参数skuId值：$!goods.goodsId |
| 商品详情地址 | |||
| JD | $!jshopProduct.getBuyUrl(skuId) | 方法 | 1、获取商品详情页链接地址 2、参数skuId值：$!goods.goodsId |
| 购物车地址 | |||
| JD | $!jshopCommon.addCart(skuId) | 方法 | 1、通过商品id将该其放入购物车，并返回操作成功后的地址 2、参数skuId值：$!goods.goodsId |
20130929更新：增加组合推荐模块帮助信息
暂无
模块效果参考
<div class="j-module" module-function="base" module-param="{}">
<ul>
#if(!$null.isNull($!combinationBuyList) && $!combinationBuyList.size()!=0)
#foreach($!combinationBuySetting in $!combinationBuyList)
<li class="jItem" id="combinationBuyRec${modId}">
<!-- 主商品 -->
<div class="jMain">
<div class="jPic">
<a target="_blank" href="$!jshopProduct.getBuyUrl($!combinationBuySetting.goods.goodsId)">
<img height="160" width="160" alt="$!combinationBuySetting.goods.wname" src="$!jshopCommon.getImage($!combinationBuySetting.goods.imageurl,2)">
</a>
</div>
<div class="jGoodsInfo">
<div title="$!combinationBuySetting.goods.wname" class="jDesc">
<a target="_blank" href="$!jshopProduct.getBuyUrl($!combinationBuySetting.goods.goodsId)">$!combinationBuySetting.goods.wname</a>
<span class="jSlogan"></span>
</div>
<div class="jPrice">
<div class="jSalePrice">
<span class="jText">参考价：</span>
<span class="jRmb">¥</span>
$!jshopPrice.getSalePrice($!combinationBuySetting.goods.goodsId)
</div>
<div class="jdPrice">
<span class="jRmb">¥</span>
$!jshopPrice.getJdPrice($!combinationBuySetting.goods.goodsId)
</div>
</div>
<div class="jBtnArea">
<a href="$!jshopProduct.getBuyUrl($!combinationBuySetting.goods.goodsId)" target="_blank">放入购物车</a>
</div>
</div>
</div>
<!-- 搭配商品 -->
<div class="jCombine">
<div class="jCombineArea">
<div class="title1"></div>
<ul>
#foreach($!goods in $!combinationBuySetting.comGoodsList)
<li>
<div class="jCombineItem">
<div class="jPic">
<a target="_blank" href="$!jshopProduct.getBuyUrl($!goods.goodsId)">
<img height="130" width="130" alt="$!goods.wname" src="$!jshopCommon.getImage($!goods.imageurl,2)">
</a>
</div>
<div class="jGoodsInfo">
<div title="$!goods.wname" class="jDesc">
<a target="_blank" href="$!jshopProduct.getBuyUrl($!goods.goodsId)">$!goods.wname</a>
<span class="jSlogan"></span>
</div>
<div class="jPrice">
<div class="jSalePrice">
<span class="jRmb">¥</span>
$!jshopPrice.getSalePrice($!goods.goodsId)
</div>
<div class="jdPrice">
<span class="jRmb">¥</span>
$!jshopPrice.getJdPrice($!goods.goodsId)
</div>
</div>
</div>
</div>
<div class="jBtnArea">
<input type="checkbox" name="combinePriceBox" value="" log="$!goods.wname" productid="$!goods.goodsId" />
<a class="btnAdd" href="#nogo">添加</a>
</div>
</li>
#end
</ul>
</div>
<div class="jTotal">
<div class="title2"></div>
<div class="jNum">共<em id="selectedGoodsNum">1</em>件商品</div>
<div class="jPrice">
<div class="jSalePrice">
<span class="jText">总参考价：</span>
<span class="jRmb">¥</span>
<span class="jsNum" id="selectedGoodsRefPrice" jsprice="$!combinationBuySetting.goods.goodsId"></span>
</div>
<div class="jSavePrice">
<span class="jText">共节省：</span>
<span class="jRmb">¥</span>
<span class="jsNum" id="selectedGoodsDisPrice" ssprice="$!combinationBuySetting.goods.goodsId"></span>
</div>
<div class="jdPrice">
<span class="jText">打包价：</span>
<span class="jRmb">¥</span>
<span class="jdNum" id="selectedGoodsTotalPrice" jdprice="$!combinationBuySetting.goods.goodsId"></span>
</div>
</div>
<div class="jBtnArea">
<a href="$!jshopCommon.addSerialCart("$!combinationBuySetting.goods.goodsId")" class="btnCart" target="_blank"></a>
</div>
</div>
</div>
<div class="iconAdd"></div>
</li>
#end
#end
</ul>
</div>
.userjCombineRecommend .mt{}
.userjCombineRecommend .mc{overflow:hidden;}
.userjCombineRecommend .mb{display:none;}
.userjCombineRecommend .mc ul{width:100%;}
.userjCombineRecommend .jItem{padding:5px 0; overflow:hidden; position:relative; zoom:1;}
.userjCombineRecommend .jMain{height:auto; position:relative; background:#fff1db; border:solid 1px #f7c986; float:left; width:162px; height:254px; overflow:hidden; padding:10px 40px 10px 5px; display:inline;}
.userjCombineRecommend .jMain .jPic{padding:3px 0 10px 0; text-align:center;}
.userjCombineRecommend .jMain .jPic img{vertical-align:top;}
.userjCombineRecommend .jMain .jPic a{width:160px; height:160px; border:solid 1px #f7c986; display:block; margin:0 auto;}
.userjCombineRecommend .jMain .jGoodsInfo{overflow:hidden; position:relative; zoom:1; padding-bottom:5px;}
.userjCombineRecommend .jMain .jDesc{height:28px; line-height:1.3; overflow:hidden;}
.userjCombineRecommend .jMain .jDesc a{color:#6b6b6b; text-decoration:none;}
.userjCombineRecommend .jMain .jDesc a:hover{text-decoration:underline;}
.userjCombineRecommend .jMain .jDesc .jSlogan{color:#fff668!important;}
.userjCombineRecommend .jMain .jPrice{height:36px; overflow:hidden; padding:5px 0;}
.userjCombineRecommend .jMain .jPrice span{float:left; display:inline;}
.userjCombineRecommend .jMain .jPrice .jsNumNo{text-decoration:none;}
.userjCombineRecommend .jMain .jdPrice{color:#e42c01; margin-top:5px; clear:both; font-weight:bold;}
.userjCombineRecommend .jMain .jdPrice .jRmb{font-size:15px;}
.userjCombineRecommend .jMain .jdPrice .jText{font-size:12px; display:block; float:none; margin-bottom:5px;}
.userjCombineRecommend .jMain .jdPrice .jdNum{font-size:15px;}
.userjCombineRecommend .jMain .jdPrice .jdNumNo{font-size:14px;}
.userjCombineRecommend .jMain .jSalePrice{color:#9e9d9d; text-decoration:line-through; overflow:hidden;}
.userjCombineRecommend .jMain .jSalePrice .jText{text-decoration:line-through;}
.userjCombineRecommend .jMain .jSalePrice .jRmb{text-decoration:line-through;}
.userjCombineRecommend .jMain .jSalePrice .jsNum{text-decoration:line-through;}
.userjCombineRecommend .jMain .jBtnArea{overflow:hidden; position:absolute; right:0; bottom:3px;}
.userjCombineRecommend .jMain .jBtnArea a{display:block; background:url(//img10.360buyimg.com/cms/g10/M00/04/1F/rBEQWVEqx4YIAAAAAAAMSp3cS4EAAA-eQNEOvoAAAxi293.png) no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//img10.360buyimg.com/cms/g10/M00/04/1F/rBEQWVEqx4YIAAAAAAAMSp3cS4EAAA-eQNEOvoAAAxi293.png'); _background-image:none; width:82px; height:22px; text-indent:-9999px;}
.userjCombineRecommend .iconAdd, .userjCombineRecommend .title2, .userjCombineRecommend .btnAdd, .userjCombineRecommend .btnCart{display:inline-block; *display:inline; zoom:1; overflow:hidden;}
.userjCombineRecommend .iconAdd{width:67px; height:67px; background:url(//img14.360buyimg.com/cms/g10/M00/09/10/rBEQWVE9SGUIAAAAAAANyYnZ1fUAAB3CgNc3OoAAA3h783.gif); position:absolute; left:177px; top:113px;}
.userjCombineRecommend .title1{width:597px; height:28px; background:url(//img13.360buyimg.com/cms/g10/M00/09/10/rBEQWVE9SGoIAAAAAAAKPybCQWEAAB3CgPjYPkAAApX382.gif) center left no-repeat; border-bottom:solid 1px #f7c986;}
.userjCombineRecommend .title2{width:83px; height:20px; background:url(//img10.360buyimg.com/cms/g10/M00/09/10/rBEQWVE9SHYIAAAAAAAJ2-ThetEAAB3CwD0o6gAAAnz956.gif);}
.userjCombineRecommend .btnAdd{width:49px; height:17px; background:url(//img12.360buyimg.com/cms/g10/M00/0A/10/rBEQWFFBLeAIAAAAAAAEsmpovocAACDmQP_-zUAAATL862.gif); color:#fff; text-align:center;}
.userjCombineRecommend .btnCart{width:102px; height:39px;background:url(//img11.360buyimg.com/cms/g10/M00/09/10/rBEQWVE9SH8IAAAAAAAR9shtdI0AAB3CwG4T3IAABIO032.gif);}
.userjCombineRecommend .jCombine{background:#fff1db; border:solid 1px #f7c986; margin-left:213px; padding:10px 0; height:254px; overflow:hidden;}
.userjCombineRecommend .jCombineArea{padding:0 5px 0 30px; width:600px; float:left; border-right:solid 1px #f0c88a;}
.userjCombineRecommend .jCombineArea ul{border-top:solid 1px #fffbf6;}
.userjCombineRecommend .jCombineArea li{float:left; width:144px; padding:0 3px; display:inline;}
.userjCombineRecommend .jCombineArea .jCombineItem{height:auto; border:solid 1px #f7c986; margin-top:8px; background:#fff;}
.userjCombineRecommend .jCombineArea .jPic{padding:5px; text-align:center; _height:100%;}
.userjCombineRecommend .jCombineArea .jPic img{vertical-align:top;}
.userjCombineRecommend .jCombineArea .jPic a{width:130px; height:130px; display:block; margin:0 auto;}
.userjCombineRecommend .jCombineArea .jGoodsInfo{overflow:hidden; padding:0 5px 0 5px;}
.userjCombineRecommend .jCombineArea .jDesc{height:14px; padding:3px 5px; background:#e5e5e5; line-height:1.3; overflow:hidden;}
.userjCombineRecommend .jCombineArea .jDesc a{color:#6b6b6b; text-decoration:none;}
.userjCombineRecommend .jCombineArea .jDesc a:hover{text-decoration:underline;}
.userjCombineRecommend .jCombineArea .jDesc .jSlogan{color:#fff668!important;}
.userjCombineRecommend .jCombineArea .jPrice{height:16px; overflow:hidden; padding:5px 0;}
.userjCombineRecommend .jCombineArea .jPrice span{float:left; display:inline;}
.userjCombineRecommend .jCombineArea .jPrice .jsNumNo{text-decoration:none;}
.userjCombineRecommend .jCombineArea .jdPrice{color:#e42c01; font-weight:bold;}
.userjCombineRecommend .jCombineArea .jdPrice .jRmb{font-size:14px;}
.userjCombineRecommend .jCombineArea .jdPrice .jText{font-size:12px; display:block; float:none; margin-bottom:5px;}
.userjCombineRecommend .jCombineArea .jdPrice .jdNum{font-size:14px;}
.userjCombineRecommend .jCombineArea .jdPrice .jdNumNo{font-size:14px;}
.userjCombineRecommend .jCombineArea .jSalePrice{color:#9e9d9d; text-decoration:line-through; overflow:hidden; float:right;}
.userjCombineRecommend .jCombineArea .jSalePrice .jText{text-decoration:line-through;}
.userjCombineRecommend .jCombineArea .jSalePrice .jRmb{text-decoration:line-through;}
.userjCombineRecommend .jCombineArea .jSalePrice .jsNum{text-decoration:line-through;}
.userjCombineRecommend .jCombineArea .jBtnArea{overflow:hidden; text-align:center; padding-top:10px;}
.userjCombineRecommend .jCombineArea .jBtnArea a, .userjCombineRecommend .jCombineArea .jBtnArea input{display:inline-block; *display:inline; zoom:1; vertical-align:middle;}
.userjCombineRecommend .jTotal{float:left; padding:20px 5px; width:128px; _width:124px; border-left:solid 1px #ffffff; zoom:1;}
.userjCombineRecommend .jTotal .jNum{color:#858585; padding-top:5px;}
.userjCombineRecommend .jTotal .jNum em{color:#ff3800;}
.userjCombineRecommend .jTotal .jPrice{overflow:hidden; padding:5px 0;}
.userjCombineRecommend .jTotal .jPrice span{float:left; display:inline;}
.userjCombineRecommend .jTotal .jPrice .jsNumNo{text-decoration:none;}
.userjCombineRecommend .jTotal .jSavePrice{height:20px; line-height:20px; padding:0 3px; color:#fe3400; background:#fad397; overflow:hidden;}
.userjCombineRecommend .jTotal .jSavePrice .jRmb{font-size:12px;}
.userjCombineRecommend .jTotal .jSavePrice .jText{font-size:12px; margin-bottom:5px;}
.userjCombineRecommend .jTotal .jSavePrice .jdNum{font-size:12px;}
.userjCombineRecommend .jTotal .jSavePrice .jdNumNo{font-size:12px;}
.userjCombineRecommend .jTotal .jdPrice{color:#e93401; clear:both; padding-top:10px; height:55px;}
.userjCombineRecommend .jTotal .jdPrice .jRmb{font-size:20px; font-weight:bold;}
.userjCombineRecommend .jTotal .jdPrice .jText{font-size:12px; display:block; float:none; margin-bottom:5px;}
.userjCombineRecommend .jTotal .jdPrice .jdNum{font-size:20px; font-weight:bold;}
.userjCombineRecommend .jTotal .jdPrice .jdNumNo{font-size:14px;}
.userjCombineRecommend .jTotal .jSalePrice{height:20px; line-height:20px; padding:0 3px; color:#818181; background:#fad397; text-decoration:line-through; overflow:hidden;}
.userjCombineRecommend .jTotal .jSalePrice .jText{text-decoration:line-through;}
.userjCombineRecommend .jTotal .jSalePrice .jRmb{text-decoration:line-through;}
.userjCombineRecommend .jTotal .jSalePrice .jsNum{text-decoration:line-through;}
.userjCombineRecommend .jTotal .jBtnArea{overflow:hidden; text-align:center;}
.userjCombineRecommend .jTotal .jBtnArea a{display:inline-block; *display:inline; zoom:1; vertical-align:middle;}