DedeCMS购物车优化之商品全选及数量增加减按钮

天外飘仙

dedecms商城功能，有很多用户体验并完善，需要进一步开发，增加了下图的几个功能：增加商品js全选功能；js自动增加减数量功能（也可手动输入数量）；对应的自定义字段（如服装行业的尺码）；去除购物车更新数量；更改订单号等。

1.JS商品全选功能

       用代码编辑器打开/templets/plus/car.htm，在<head/>之前增加，

1. <script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery1.42.min.js"></script><!--引入jquery,文件放在在默认模板的js目录下-->

复制代码

1. <!--全选s-->
   
2. <script type="text/javascript">
   
3. function selectGroup(checkbox,obj) {
   
4. $('input[name='+obj+']').attr('checked', $(checkbox).attr('checked'));
   
5. }
   
6. </script>
   
7. <!--全选e-->

复制代码

       找到下面代码，大概在54行，按指定位置增加

1. <!--以下列出购物车内购商品列表(数组),开始遍历数组-->
   
2. <tr>
   
3. <th width="23"><input type="checkbox" onclick="selectGroup(this,'ids[]');"/>选择</th>
   
4. <th width="23">编号</th>

复制代码

2.JS自动增加减，统计购物数量及商品总价

1. <!--js加减s-->
   
2. <script type="text/javascript">
   
3. $(function(){
   
4.   $(".add").click(function(){
   
5.     var t=$(this).parent().find('input[class*=text_box]');
   
6.     t.val(parseInt(t.val())+1)
   
7.     setTotal();
   
8.   })
   
9.   $(".min").click(function(){
   
10.     var t=$(this).parent().find('input[class*=text_box]');
    
11.     t.val(parseInt(t.val())-1)
    
12.     if(parseInt(t.val())<0){
    
13.       t.val(0);
    
14.     }
    
15.     setTotal();
    
16.   })
    
17.   function setTotal(){
    
18.     var s=0;
    
19.     $("#tab .jg").each(function(){
    
20.       s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text());  
    
21.     });
    
22.     var Num=0;
    
23.     $("#tab .jg").each(function(){
    
24.       Num+=parseInt($(this).find('input[class*=text_box]').val());
    
25.     });
    
26.     $("#total").html(s.toFixed(2)); //统计商品总价
    
27.     $("#Num").html(Num.toFixed(2)); //统计购物数量
    
28.   }
    
29.   setTotal();
    
30. })
    
31. </script>
    
32. <!--js加减e-->

复制代码

找到

1. <td height="23">
   
2. <input name="buynum{dede:value.id/}" type="text" id="buynum{dede:value.id/}" value="{dede:value.buynum/}" size="5" maxlength="5" class="ipt-txt" />
   
3. <small>{dede:value.units/}</small>
   
4. </td>

复制代码

替换为

1. <td height="23" class="jg">
   
2. <!--加减s-->
   
3. <input class="min" name="" type="button" value="-" style="padding:0 5px;"/>
   
4. <input name="buynum{dede:value.id/}" type="text" id="buynum{dede:value.id/}" value="{dede:value.buynum/}" size="5" maxlength="5" class="text_box" />
   
5. <input class="add" name="" type="button" value="+" style="padding:0 3px;"/>
   
6. <!--加减e-->
   
7. <small>{dede:value.units/}</small>
   
8. </td>

复制代码

找到

1. 共 <font color=red>{dede:var.carts.cart_count/}</font> 件商品,合计:
   
2. <font color=red>{dede:var.carts.price_count/}</font>元

复制代码

替换为

1. 共 <font id="Num" color=red>{dede:var.carts.cart_count/}</font>件商品，合计:
   
2. <font id="total" color=red">{dede:var.carts.price_count/}</font>元

复制代码