jsorder 第三方修改版 修正bug 增加总价
我主要运用这个jsorder,修正了它的不足
//1.0版本bug:刷新页面 无法增加或者删除原来添加的商品
//1.1版本:修正了1.0版本 新增bug 能够修改原来的商品 但出现产品数量为0 仍然保留在购物车中。
//1.2版本:修正了1.1版本的产品为0 并且增加了购物车总价
原文:
代码一共6k,基于jquery的购物车实现,实现订单的本地cookie存储,支持购物车自定义样式,金额的计算。通过json与后台交互。实现可配置化的购物车系统,可应用于电子商务平台。
1. [代码]使用代码
//使用代码如下
//作者原文http://www.open-open.com/lib/view/home/1325343720593
//jsorder配置
$.fn.jsorder.defaults = {
staticname : 'jsorder',
jsorderclass : 'jsorder',
savecookie : true,
cookiename : 'jsorder',
numpre : 'no_',
jsorderpre : 'jsorder_',
jsorderspanpre : 'jsorderspan_',
pricefiled : 'price',
namefiled : 'jsordername',
leftdemo : '购物车',
subbuttom : '',
//addbuttom : 'a.jsorderadd',
addbuttom : 'td.jsorderadd',
nomessage : '你今天的包裹是还空的',
dosubmit : function(data) {
$("#goodsinfo").val(JSON.stringify(data));
$("#form").submit();
}
};
$("body").jsorder();
2. [代码]
jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||
3. 代码
(function($) {
$.fn.jsorder = function(setting) {
//初始化配置
var opts = $.extend( {}, $.fn.jsorder.defaults, setting);
//读取cookeie信息
var initdata ={};
if(opts.savecookie && $.cookie(opts.cookiename)!=null&&$.cookie(opts.cookiename)!=''){
initdata = eval('(' + $.cookie(opts.cookiename) + ')');
}
//初始化购物车
$("body").data(opts.staticname, initdata);
//初始化页面
var jsorder = $('<div><div>' + opts.leftdemo + '</div><div><ul><li >'+ opts.nomessage + '</li></ul><span id="totalmoney"></span><div></div></div></div>').attr('class', opts.jsorderclass).appendTo($("body"));
var jsorderright = jsorder.find('div:eq(1)').attr('class', 'right');
var jsorderleft = jsorder.find('div:eq(0)').attr('class', 'left').click(function() {jsorderright.toggle();});
var slide = {
//计算金额和数量
info : function(price, count) {
return "¥" + price * 10000 * count / 10000 + "(数量:" + count+ ")";
},
//增加一个订单项
addjsorder : function(e) {
var datejsorder = $("body").data(opts.staticname);
var id = $(this).attr('id');
var name = $(this).attr(opts.namefiled);
var price = $(this).attr(opts.pricefiled);
if (datejsorder[id] == null || datejsorder[id]['count'] == 0) {
if (datejsorder[id] == null) {
datejsorder[id] = {};
}
datejsorder[id]['count'] = 1;
datejsorder[id]['name'] = name;
datejsorder[id]['price'] = price;
$("div." + opts.jsorderclass + " ul")
.append("<li id='"+ opts.jsorderpre+ id+ "'><span>"+ name+ "<br><b>"+ slide.info(price,datejsorder[id]['count'])+ "</b><span class='del'></span><span class='sub'></span><span class='add'></span></span></li>");
$("#" + opts.jsorderpre + id + " span.add").click(function() {
slide.addjsordernum(name, id, price);
});
$("#" + opts.jsorderpre + id + " span.sub").click(function() {
slide.deljsordernum(name, id, price);
});
$("#" + opts.jsorderpre + id + " span.del").click(function() {
slide.deljsorder(id);
});
} else {
datejsorder[id]['count'] += 1;
$("#" + opts.jsorderpre + id + " b").html(
slide.info(price, datejsorder[id]['count']));
}
slide.reflash();
},
//增加一个订单项数量
addjsordernum : function(name, id, price) {
var datejsorder = $("body").data(opts.staticname);
datejsorder[id]['count'] += 1;
$("#" + opts.jsorderpre + id + " b").html(
slide.info(price, datejsorder[id]['count']));
slide.reflash();
},
//减少一个订单项数量
deljsordernum : function(name, id, price) {
var datejsorder = $("body").data(opts.staticname);
datejsorder[id]['count'] -= 1;
if (datejsorder[id]['count'] > 0) {
$("#" + opts.jsorderpre + id + " b").html(
slide.info(price, datejsorder[id]['count']));
} else {http://www.huiyi8.com/jianbihua/
$("#" + opts.jsorderpre + id).remove();
}简笔画大全
slide.reflash();
},
//删除一个订单项
deljsorder : function(id) {
var datejsorder = $("body").data(opts.staticname);
datejsorder[id]['count'] = 0;
$("#" + opts.jsorderpre + id).remove();
slide.reflash();
},
//提交
subm : function() {
opts.dosubmit($("body").data(opts.staticname));
$("body").data(opts.staticname,{});
$("div."+opts.jsorderclass+" ul li:eq(0)").show();
$("div."+opts.jsorderclass+" ul li:gt(0)").remove();
$('div.'+opts.jsorderclass+' a.button').remove();
if(opts.savecookie){
var date = new Date();
date.setTime(date.getTime() - (1 * 24 * 60 * 60 ));
// $.cookie(opts.cookiename, '', { path: '/', expires: date });
}
},
//刷新购物车
reflash : function() {
jsorderright.show();
var data = $("body").data(opts.staticname);
var size = 0;
var totalmoney=0;
for ( var i in data) {
if (data[i]['count'] != 0){
totalmoney=totalmoney+data[i]['count']*parseInt(data[i]['price']);
size++;
}else{
delete data[i];
}
}
$("#totalmoney").html("总价"+totalmoney);
if (size > 0) {
$("div."+opts.jsorderclass+" ul li:eq(0)").hide();
if ($('div.' + opts.jsorderclass + ' a.button').size() == 0)
$('<a class="button">' + opts.subbuttom + '</a>')
.appendTo(jsorderright).click(slide.subm);
} else {
$("div."+opts.jsorderclass+" ul li:eq(0)").show();
$('div.' + opts.jsorderclass + ' a.button').remove();
}
if (opts.savecookie) {
var date = new Date();
date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
$.cookie(opts.cookiename, JSON.stringify(data), {
path : '/',
expires : 0
});
}
}
};
//初始化购物车
var data = $("body").data(opts.staticname);
var totalmoney=0;
for ( var id in data) {
totalmoney=totalmoney+data[id]['count']*parseInt(data[id]['price']);
$("div." + opts.jsorderclass + " ul")
.append("<li id='"+ opts.jsorderpre+ id+ "'><span>"+ data[id]['name']+ "<br><b>"+ slide.info(data[id]['price'],data[id]['count'])+ "</b><span class='del'></span><span class='sub'></span><span class='add'></span></span></li>");
$("#" + opts.jsorderpre + id + " span.add").data('dd',id).click(function() {var d = $(this).data('dd');slide.addjsordernum(data[d]['name'], d, data[d]['price']);});
$("#" + opts.jsorderpre + id + " span.sub").data('dd',id).click(function() {var d = $(this).data('dd');slide.deljsordernum(data[d]['name'], d,data[d]['price']);});
$("#" + opts.jsorderpre + id + " span.del").data('dd',id).click(function() {var d = $(this).data('dd');slide.deljsorder(d);});
slide.reflash();
}
$("#totalmoney").html(totalmoney);
$(opts.addbuttom).click(slide.addjsorder);
return jsorder;
}
// 配置
$.fn.jsorder.defaults = {
//全局数据-保存订单信息
staticname : 'jsorder',
//订单class
jsorderclass : 'jsorder',
//是否保存cookie
savecookie : true,
//cookie的名字
cookiename : 'jsorder',
//ID前缀
numpre : 'no_',
//订单项前最
jsorderpre : 'jsorder_',
//价格属性
pricefiled : 'price',
//订单项名
namefiled : 'jsordername',
//购物车左侧显示
leftdemo : '我的菜单',
//提交按钮文字
subbuttom : '',
//默认加入订单的控件选择
addbuttom : 'a.jsorderadd',
//没有订单时显示
nomessage : '你今天的食谱是还空的',
//提交时触发
dosubmit : function(data) {
$("body").append(JSON.stringify(data));
$("body").data(opts.staticname, {});
}
};
})(jQuery);
jsorder 第三方修改版 修正bug 增加总价的更多相关文章
- java将很长的一条sql语句,自动换行输出(修改版)2019-06-01(bug未修复)
package org.jimmy.autosearch2019.test; import java.util.HashMap; public class AutoLinefeedSql { publ ...
- sqm(sqlmapGUI) pcat修改版
sqlmap是一款开源的注入工具,支持几乎所有的数据库,支持get/post/cookie注入,支持错误回显注入/盲注,还有其他多种注入方法. 支持代理,指纹识别技术判断数据库 .而sqm(sqlma ...
- Medoo个人修改版
Medoo是一款轻量级的php数据库操作类,下面不会介绍Medoo的使用方法,想学习Medoo请前往官网自学:http://medoo.in/ 在接触Medoo之前,一直是用自己写的php数据库操作类 ...
- [C语言]声明解析器cdecl修改版
一.写在前面 K&R曾经在书中承认,"C语言声明的语法有时会带来严重的问题.".由于历史原因(BCPL语言只有唯一一个类型——二进制字),C语言声明的语法在各种合理的组合下 ...
- Perl实用中文处理步骤(修改版)
发信人: FenRagwort (泽), 信区: Perl标 题: Perl实用中文处理步骤(修改版)发信站: 水木社区 (Mon Feb 14 12:52:14 2011), 转信 (修改版 感谢 ...
- 【LINT】cpplint修改版:自定义编码风格检查工具lint
github:https://github.com/skullboyer/code-check Code Check 本仓介绍的内容涉及代码静态检查和编码风格检查 但主要放在编码风格检查,lint是基 ...
- iOS 通过 JSPatch 实时修复线上 bug!
JSPatch 是一个开源项目(Github链接),只需要在项目里引入极小的引擎文件,就可以使用 JavaScript 调用任何 Objective-C 的原生接口,替换任意 Objective-C ...
- Android 仿美团网,大众点评购买框悬浮效果之修改版
转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...
- 黄聪:WordPress图片插件:Auto Highslide修改版(转)
一直以来很多人都很喜欢我博客使用的图片插件,因为我用的跟原版是有些不同的,效果比原版的要好,他有白色遮罩层,可以直观的知道上下翻图片和幻灯片放映模式.很多人使用原版之后发现我用的更加帅一些,于是很多人 ...
随机推荐
- 军训分批(codevs 2751)
题目描述 Description 某学校即将开展军训.共有N个班级. 前M个优秀班级为了保持学习优势,必须和3位任课老师带的班级同一批. 问共有几批? 输入描述 Input Description N ...
- R语言入门视频笔记--8--数据框
一.数据框 使用data.frame函数生成数据框 x <- c(20122014101:20122014128) y <- rnorm(28,85,18) #生成28个平均数为85,方差 ...
- R语言入门视频笔记--2--一些简单的命令
一.对象 1.列举当前内存中的对象 ls() 2.删除不需要的对象 rm(某对象名称) 3.查看向量长度 length(某向量名称) 4.查看向量类型 mode(某向量名称) 二.函数 1.seq函数 ...
- MongoDB 复制(副本集)学习
MongoDB 复制(副本集)学习 replication set复制集,复制集,多台服务器维护相同的数据副本,提高服务器的可用性.MongoDB复制是将数据同步在多个服务器的过程.复制提供了数据的冗 ...
- linux命令netstat或ifconfig未找到
linux命令netstat或ifconfig未找到 linux使用netstat或者ifconfig命令时,显示命令未找到.通过yum search netstat这个命令,匹配结果如下:===== ...
- JFinal2.0极速开发视频教程发布【转】
原文:http://blog.dreamlu.net/blog/79 目前JFinal越来越火爆,而且使用的公司越来越多.鉴于市面上JFinal的学习资源不多,我们开始基于JFinal2.0录制学习视 ...
- vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)
Vue 提供了一个官方的cli,为单页面应用 (SPA) 快速搭建繁杂的脚手架. 一.vue cli脚手架 脚手架通过webpack搭建开发环境 使用ES6语法 打包压缩js为一个文件 项目文件在环境 ...
- pandaboard串口通信调试
1.在PC上的pyserial程序,到pandaboard后报错,读取和写入会报错 2.使用的是pandaboard的ttyO2串口 3.ls -l /dev/ttyO2,发现是tty,而不是dial ...
- Maven错误 diamond operator is not supported in -source 1.5 (use -source 7 or higher to enable diamond operator)问题解决
如果在Maven构建时出现: diamond operator is not supported in -source 1.5 (use -source 7 or higher to enable d ...
- 【flyway】开源的数据库版本管理工具【migration】
开源的数据库版本管理工具[migration] 记录