Tutorial on using commodity template code of Tuoyuan JD store

The activity page of Jingdong store decoration is designed with a red commodity layout, and a set of templates is made with reference to Yi Xun's product list.

usage method:

1. We went to the backstage of JD and found: "My Shop" - "Shop Decoration Settings" - "Shop Advanced Decoration (JSHOP)".

2. In the activity management on the left side of the new page, select the activity list, and create or edit an existing activity for decoration.

3. Click the Add Layout button at the upper left corner of the page to add "Layout of the General Bar (990)"

4. In the settings of added modules, select Template - My Creation - Create Template.

5. Fill in the basic settings. The prefix user must be filled in the Css ID, such as user employee.

6. Paste the following code in the template content tab:

 <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">Reference price:<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">Buy now</a>         </li> #end </ul> </div>

7. Paste the following code in the css tab:

 .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;  }

So far, the template for the list of active goods of a JD store has been successfully created. Use this template in the bulletin board module of the activity page.