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

2017-04-07dedecms教程
661

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

dede购物车优化

1.JS商品全选功能

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

<script language="javascript" type="text/javascript" src="{wmd: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{wmd:value.id/}" type="text" id="buynum{wmd:value.id/}" value="{wmd:value.buynum/}" size="5" maxlength="5" class="ipt-txt" />
 <small>{wmd:value.units/}</small>
</td>

替换为

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

找到

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

替换为

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

相关推荐

Dedecms织梦CMS如何添加自定义函数
我们在使用dedecms时候,需要拓展函数,那么这个函数需要写在哪个文件中呢?一般来说,需要写在:include/extend.func.php中,当然也可以写在其他公共文件中方便调用,以下是几个自定义函数示例...
2025-10-05 dedecms教程
80

dedecms怎么做判断?怎么在一个标签中输入另外一个标签?
我们在使用织梦DedeCMS系统程序开发网站中,经常遇到需要对文章标题进行字数限制,通常做法是在a标签中加入一个title属性,让鼠标放上去的时候显示完整标题。但是标题被剪裁掉一些字符而不完整,下面跟版网的小编就为你推荐另外几种标题调用方式,如进行标题...
2025-07-05 dedecms教程
69

dedecms怎样设置给图片添加水印
dedecms怎样设置给图片添加水印,具体步骤为: 一、进入系统基本参数中的附件设置,启用是否使用图片水印选项; 二、在图像水印设置中选择文字或图片水印类型,文字水印可调整字体、颜色、透明度及位置,图片水印则需上传png格式的半透明logo,并合理设置大...
2025-07-01 dedecms教程
147

dedecms织梦列表页字段怎么做判断
用到dedecms时候,有时候需要对文章列表、arclist输出时候的字段做判断显示,比如缩略图没有则不显示,有的时候就显示图片,并且固定尺寸,这个要怎么操作呢? 关于列表字段内自定义字段的调用方法,有数据则显示无数据则不显示(备注:limit=3,1意思是从第4...
2025-07-01 dedecms教程
68

织梦内容页使用if判断某个字段是否为空
我们在使用织梦dedecms时候,如何使用if判断某个字段是否为空呢?我们以文章页自定义字段website为例:使用if语句判断website网址是否为空,如果有显示website并加上网址,如果没有就不显示。 {wmd:field.website runphp='yes'}if(@me'') {@me = 'a href="'...
2025-06-21 dedecms教程
171

dedecms全局变量如何使用?
在使用dedecms的时候,全局变量用于存放全站通用信息。用户可通过后台模板全局变量管理添加或编辑变量,例如设置cfg_phone保存客服电话。调用时使用{wmd:global.cfg_变量名/}语法,在.htm模板或启用标签解析的文章内容中显示变量值。 在使用 DedeCMS 建站时...
2025-06-17 dedecms教程
138