您现在的位置是:首页 > cms教程 > DedeCMS教程DedeCMS教程
dedecms购物车优化商品全选及数量增加减按钮的方法
尤介辉2023-09-17DedeCMS教程已有人查阅
导读dedecms商城功能,有很多用户体验并完善,需要进一步开发,增加了下图的几个功能:增加商品js全选功能;js自动增加减数量功能(也可手动输入数量)
dedecms商城功能,有很多用户体验并完善,需要进一步开发,增加了下图的几个功能:增加商品js全选功能;js自动增加减数量功能(也可手动输入数量);对应的自定义字段(如服装行业的尺码);去除购物车更新数量;更改订单号等。
1.JS商品全选功能 用代码编辑器打开/templets/plus/car.htm,在<head/>之前增加,
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>元
本文标签:
很赞哦! ()
图文教程
dede织梦采集出现Character postion **, ‘field’ Error的解决方法
dedecms5.7 采集文章导出时出现类似于Character postion **, ‘field’ Error的错误,这样的
dede织梦cms报错Fatal error: Maximum execution time of 30 second
DEDE 织梦cms出现Fatal error: Maximum execution time of 30 seconds exceeded in解决办法
织梦dedecms自定义表单时间类型字段显示为数字的解决方法
织梦(dedecms)自定义表单,设置时间字段,填写后,后台看到的是一串数字,不是正常时间,具体解决方法(已测有效):
dede织梦设置游客评论修改评论权限的方法
现在大家都很懒,不愿意在网站上注册账户,然后再去评论,好多想评论的访客,看到需要注册后,就不评论,这样很影响网站的互动性,而织梦默认评论是只有注册用户才可
相关源码
-
(自适应)蓝色厨卫厨房水龙头阀门水槽设备源码下载基于PbootCMS内核开发,深度适配厨卫设备行业特性。通过精准的产品展示模块与水效标识专区设计,有效呈现五金件工艺细节。响应式布局确保从手机到平板都能展示金属质感与水流动态效果。查看源码 -
(自适应)物流运输快递仓储货运网站模板免费下载基于PbootCMS内核开发的物流运输行业专用模板,深度适配仓储货运企业的业务展示需求。前端采用响应式布局,自动适配手机端访问,后台数据实时同步更新,帮助企业高效展示运输网络、仓储设施、服务流程等核心业务模块。查看源码 -
响应式WordPress简约博客主题Alt_BlogAlt_Blog主题该模板为博客内容展示设计,采用简约现代的风格理念,打造清晰的内容呈现平台。响应式布局确保在不同设备上都能获得良好的浏览体验,帮助博主更好地展示和分享内容。查看源码 -
(自适应响应式)宠物经验资讯咨询博客pbootcms网站源码下载除宠物资讯领域外,通过内容替换可快速适配宠物用品商城、宠物医疗咨询平台、宠物训练教程网站、动物保护组织官网、水族爱好者社区等垂直领域。查看源码 -
帝国cms7.2淘宝客导购自媒体博客网站模板源码本模板基于帝国CMS7.2内核深度开发,为淘宝客、商品导购类自媒体及博客网站设计。通过可视化后台管理,可快速搭建具备商品推荐、比价功能的内容平台,帮助用户实现流量高效转化。查看源码 -
自适应APP应用程序介绍推广落地页pbootcms网站源码下载移动应用开发商设计的营销型落地页模板,基于PbootCMS内核深度开发采用前沿响应式架构,无缝适配手机端操作习惯与PC端展示需求。查看源码
| 分享笔记 (共有 篇笔记) |
大家在看
织梦cms收费哪几款cms可以免费商用?本栏推荐
相关标签
大家喜欢
- dedecms默认图片集模板去掉自动播放的方法
- 自动更新HTML FOR DedeCMS 5.3(支持首页,列表页,文章页)的方法
- 织梦cms出现Deprecated: Function ereg_replace() is deprecated in
- 织梦后台栏目名称及栏目文件保存目录长度修改
- 织梦dedecms修改后台自定义表单列表为横排显示的办法
- dedecms5.7全文检索sphinx安装使用详细教程示例
- 织梦错误Fatal error: Using $this when not in object context
- dedecms织梦的DIGG功能使用方法介绍
- 织梦channelartlist按指定的typeid排序的方法
- 织梦系统后台会员功能漏洞修复方法