微信公众号

拓源网京东店铺商品模板代码使用教程

web前端 22908 11年前 (2013-10-15)

京东店铺装修的活动页面设计一个红色系的商品布局，参考易迅的产品列表制作了一套模板。

使用方法：

1.我们到京东的后台依次找到：“ 我的店铺”-“店铺装修设置”-“店铺高级装修(JSHOP)”。

2.在新页面左侧的活动管理中，选择活动列表，新建或者编辑已有活动进行装修。

3.点击页面左上角的添加布局按钮，添加“通栏布局（990）”

4.在添加好模块的设置中，选择“模板”-“我的创建”-“创建模板”。

5.填写基本设置内容，Css ID中必须填写user为前缀，如填写user-toyean。

6.在模版内容选项卡中粘贴以下代码：

<div class="j-module" module-function="autoLayout" module-param="{node:'li', spacingType:'margin', size:1}" >
	<ul>
		#foreach($!goods in $!goodsRecList) 
        <li>
        	<a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" class="proimg" target="_blank"><img src="$!jshopCommon.getImage($!goods.imageurl,6)" alt="$!goods.wname" /></a>
            <a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" class="proname" title="$!goods.wname" target="_blank">$!goods.wname</a>
            <span class="promarket">参考价:<del>$!jshopPrice.getSalePrice($!{goods.goodsId})</del></span>
            <span class="proprice">￥<em>$!jshopPrice.getJdPrice($!goods.goodsId)</em></span>
            <a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" class="probtn" target="_blank">立即购买</a>
        </li>
		#end
	</ul>
</div>

7.在css选项卡中粘贴以下代码：

.user-toyean { width:990px; margin:0 auto; background:#ba2a2a; overflow:hidden; }
.user-toyean ul { margin-top:50px; padding:10px 0 0 9px; background:#a51b19; overflow:hidden; }
.user-toyean ul li { width:200px!important; height:335px; margin:0 4px 7px 0!important; float:left; padding:0 20px!important; background:#fff; }
.user-toyean ul li a.proimg { height:200px; margin-bottom:5px; padding-top:20px; text-align:center; display:block; }
.user-toyean ul li .proimg img { width:200px; height:200px; vertical-align:top; }
.user-toyean ul li .proname { width:200px; height:20px; margin-top:10px; font-size:14px; color:#000; line-height:20px; text-decoration:none; overflow:hidden; display:block; }
.user-toyean ul li .promarket { font-size:13px; color:#999; line-height:18px; }
.user-toyean ul li .proprice { height:30px; font-size:18px; color:#f75c57; font-family:Arial, Helvetica, sans-serif; font-weight:bold; line-height:30px; }
.user-toyean ul li .proprice em { font-size:24px; font-style:normal; }
.user-toyean ul li .probtn { width:200px; height:36px; font-size:20px; color:#fff; font-family:'Microsoft Yahei',simsun; font-weight:bold; line-height:36px; text-align:center; text-decoration:none; background:#f75c57; display:inline-block; }

至此一个京东店铺的活动商品列表模板就创建成功了，在活动页面的通栏模块中使用本模板即可。

分享给朋友：