女神猫女王

代理加盟 2020全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 織夢大學 > 使用教程 >

DedeCMS購物車優化之商品全選及數量增加減按鈕

來源:本站原創 發布時間:2020-04-01 21:18:50熱度:我要評論(0

免費下載,無需注冊無需充值

       DedeCMS商城功能,有很多用戶體驗并完善,需要進一步開發,增加了下圖的幾個功能:增加商品js全選功能;js自動增加減數量功能(也可手動輸入數量);對應的自定義字段(如服裝行業的尺碼);去除購物車更新數量;更改訂單號等。

dede購物車優化

1.JS商品全選功能

       用代碼編輯器打開/templets/plus/car.htm,在<head/>之前增加,

<script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery1.42.min.js"></script><!--引入jquery,文件放在在默認模板的js目錄下-->
<!--全選s--> 
<script type="text/javascript">
function selectGroup(checkbox,obj) { 
$('input[name='+obj+']').attr('checked', $(checkbox).attr('checked')); 
} 
</script> 
<!--全選e-->

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

<!--以下列出購物車內購商品列表(數組),開始遍歷數組-->
<tr>
<th width="23"><input type="checkbox" onclick="selectGroup(this,'ids[]');"/>選擇</th>
<th width="23">編號</th>

2.JS自動增加減,統計購物數量及商品總價

<!--js加減s-->
<script type="text/javascript"> 
$(function(){ 
  $(".add").click(function(){ 
    var t=$(this).parent().find('input[class*=text_box]'); 
    t.val(parseInt(t.val())+1) 
    setTotal(); 
  }) 
  $(".min").click(function(){ 
    var t=$(this).parent().find('input[class*=text_box]'); 
    t.val(parseInt(t.val())-1) 
    if(parseInt(t.val())<0){ 
      t.val(0); 
    } 
    setTotal(); 
  }) 
  function setTotal(){ 
    var s=0; 
    $("#tab .jg").each(function(){ 
      s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text());  
    }); 
    var Num=0; 
    $("#tab .jg").each(function(){ 
      Num+=parseInt($(this).find('input[class*=text_box]').val()); 
    }); 
    $("#total").html(s.toFixed(2)); //統計商品總價
    $("#Num").html(Num.toFixed(2)); //統計購物數量
  } 
  setTotal();
})
</script>
<!--js加減e-->

找到

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

替換為

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

找到

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

替換為

 <font id="Num" color=red>{dede:var.carts.cart_count/}</font>件商品,合計: 
<font id="total" color=red">{dede:var.carts.price_count/}</font>元

       篇幅原因,對應的自定義字段(如服裝行業的尺碼)移步DedeCMS購物車優化之服裝商品頁提交自定義字段到購物車;去除購物車更新數量,更改訂單號移步DedeCMS購物車優化之商品全選及數量增加減按鈕。

轉載請注明來源網址:http://www.qksux.club/dedecms_jq/1460.html

    發表評論

    評論列表(條)

      女神猫女王 163966241708791114094243119643437795134267356417970382582342989414106383465483452313330227441787 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();