您现在的位置是:首页 > 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织梦文章、软件、图集的图片ALT自动变成完整标题的方法
图片alt描述是在网站SEO优化的一个细节,对于一个SEO高手来说,每个细节都相当重要。本文介绍如何将织梦dedecms文章、软件、图集的图片ALT自动变成完整标题(Title)
织梦dedecmsV5.7采集的方法教程步骤
如果作者 V5.3DedeCms V5.3 采集基础教程。首先说明一下的是,第一次写这种教程,有不当的地方请大家包涵。
织梦dedecms限制文章页上一篇和下一篇标题字数的方法
我们制作织梦模板的时候,一般都会对显示标题的字数做控制,以免字数过多影响美观等问题。上一篇和下一篇链接我们都会用到,方便用户浏览。为了避免文章标题字数过多
织梦cms在文档列表中插入客户的广告
织梦CMS确实是一个强大的网站管理系统,良好的实用性和二次开发的扩展性,让我们很容易实现多种建站方案。今天我和大家分享一个实用的创建方案。
相关源码
-
(自适应)帝国cms7.5模板新闻资讯门户带会员中心基于帝国CMS7.5内核开发的HTML5响应式模板,为新闻机构、媒体门户及资讯聚合平台设计。通过模块化布局实现图文混排查看源码 -
(自适应)证书授权书防伪查询系统pbootcms模板本模板基于PbootCMS系统开发,为各类证书查询机构设计,可快速构建高效安全的证书核验平台。采用响应式布局技术,自动适配手机端操作,支持批量导入证书数据,提供便捷的查询接口,满足机构证书管理及用户在线核验需求。查看源码 -
(自适应)建站广告公司工作室作品展示品牌策划设计pbootcms源码下载基于PbootCMS开发的创意服务展示系统,内置作品集展示、服务流程图等专业模块,预设客户案例、设计流程等创意行业专属栏目结构。查看源码 -
(PC+WAP)绿色资源回收新能源环保设备pbootcms源码下载基于PbootCMS系统深度开发的环保行业模板,特别适配资源回收设备、新能源技术、环境治理装备等企业的线上展示需求。集成产品库、解决方案、环保案例等专业模块,助力企业高效传递绿色价值。查看源码 -
(自适应)电子元件电路板元器件pbootcms网站源码下载为电子元器件、电路板制造类企业设计,特别适合展示产品参数、技术规格等内容。采用响应式技术,确保各类电子元件在不同设备上都能清晰展示。查看源码 -
(PC+WAP)安保服务保安保镖模板免费下载本模板基于PbootCMS内核开发,为安保服务企业量身打造。设计风格严谨专业,突出安保行业的安全、可靠特性,展示企业服务项目与实力。采用响应式设计,PC与移动端数据同步,管理便捷。模板布局合理查看源码
| 分享笔记 (共有 篇笔记) |
