您现在的位置是:首页 > cms教程 > DedeCMS教程DedeCMS教程

dedecms购物车优化商品全选及数量增加减按钮的方法

尤介辉2023-09-17DedeCMS教程已有人查阅

导读dedecms商城功能,有很多用户体验并完善,需要进一步开发,增加了下图的几个功能:增加商品js全选功能;js自动增加减数量功能(也可手动输入数量)

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

本文标签:

很赞哦! ()

相关源码

  • (自适应)大气壁挂炉暖气设备家用电器模板带加盟申请和下载资料为壁挂炉、暖气片等供暖设备企业设计的PbootCMS模板,通过响应式技术实现跨终端展示产品参数和技术细节。后台统一管理确保采暖系统数据、服务网点信息实时同步更新查看源码
  • pbootcms源码宠物类网站源码下载(自适应多端)为宠物装备商店、宠物食品及用品企业打造的营销型模板,基于PbootCMS内核深度开发。采用响应式设计实现PC与移动端适配,PHP7.0+高性能架构支持MySQL/SQLite双数据库查看源码
  • 快递物流公司pbootcms网站模板html响应式自适应源码下载基于HTML5+CSS3前沿技术开发,实现PC、平板、手机多端自适应。采用弹性布局与媒体查询技术,确保不同设备均有流畅视觉体验,企业形象统一。查看源码
  • (PC+WAP)茶叶茶艺茶道茶文化pbootcms模网站源码下载本模板基于PbootCMS系统开发,为茶叶企业、茶艺培训机构设计,特别适合展示茶产品、茶道文化等内容。采用响应式技术,确保在不同设备上都能呈现优雅的茶文化氛围。查看源码
  • (自适应响应式)蓝色外贸英文产品介绍展示网站模板本模板采用手工编写的DIV+CSS架构,代码精简高效。适配手机端浏览,数据实时同步更新。内置SEO优化框架,支持独立设置各页面标题、关键词及描述。开源代码结构清晰,便于二次开发。查看源码
  • (自适应响应式)HTML5甲醛环境检测网站模板带在线留言和资料下载本模板为甲醛检测与环保科技企业开发,采用PbootCMS内核构建。首页集成空气质量数据可视化模块,服务流程采用时间轴展示设计,检测报告板块支持PDF在线预览功能查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐