我主要运用这个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 增加总价的更多相关文章

  1. java将很长的一条sql语句,自动换行输出(修改版)2019-06-01(bug未修复)

    package org.jimmy.autosearch2019.test; import java.util.HashMap; public class AutoLinefeedSql { publ ...

  2. sqm(sqlmapGUI) pcat修改版

    sqlmap是一款开源的注入工具,支持几乎所有的数据库,支持get/post/cookie注入,支持错误回显注入/盲注,还有其他多种注入方法. 支持代理,指纹识别技术判断数据库 .而sqm(sqlma ...

  3. Medoo个人修改版

    Medoo是一款轻量级的php数据库操作类,下面不会介绍Medoo的使用方法,想学习Medoo请前往官网自学:http://medoo.in/ 在接触Medoo之前,一直是用自己写的php数据库操作类 ...

  4. [C语言]声明解析器cdecl修改版

    一.写在前面 K&R曾经在书中承认,"C语言声明的语法有时会带来严重的问题.".由于历史原因(BCPL语言只有唯一一个类型——二进制字),C语言声明的语法在各种合理的组合下 ...

  5. Perl实用中文处理步骤(修改版)

    发信人: FenRagwort (泽), 信区: Perl标  题: Perl实用中文处理步骤(修改版)发信站: 水木社区 (Mon Feb 14 12:52:14 2011), 转信 (修改版 感谢 ...

  6. 【LINT】cpplint修改版:自定义编码风格检查工具lint

    github:https://github.com/skullboyer/code-check Code Check 本仓介绍的内容涉及代码静态检查和编码风格检查 但主要放在编码风格检查,lint是基 ...

  7. iOS 通过 JSPatch 实时修复线上 bug!

    JSPatch 是一个开源项目(Github链接),只需要在项目里引入极小的引擎文件,就可以使用 JavaScript 调用任何 Objective-C 的原生接口,替换任意 Objective-C ...

  8. Android 仿美团网,大众点评购买框悬浮效果之修改版

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...

  9. 黄聪:WordPress图片插件:Auto Highslide修改版(转)

    一直以来很多人都很喜欢我博客使用的图片插件,因为我用的跟原版是有些不同的,效果比原版的要好,他有白色遮罩层,可以直观的知道上下翻图片和幻灯片放映模式.很多人使用原版之后发现我用的更加帅一些,于是很多人 ...

随机推荐

  1. treetable 用法小例

    插件地址:http://pan.baidu.com/s/1kVf0Kcfcript src="/plugins/jQuery/jQuery-2.1.4.min.js">< ...

  2. Java 并发编程中的 CountDownLatch 锁用于多个线程同时开始运行或主线程等待子线程结束

    Java 5 开始引入的 Concurrent 并发软件包里面的 CountDownLatch 其实可以把它看作一个计数器,只不过这个计数器的操作是原子操作,同时只能有一个线程去操作这个计数器,也就是 ...

  3. 设计模式之建造者(Builder)模式

    设计模式之建造者(Builder)模式 存在一些情况,比如,一些对象会有一些重要的属性,在这些属性没有恰当的值之前,对象不能作为一个完整的产品使用(如一个电子邮件最起码得有收件人地址):还有一些些情况 ...

  4. 【Java TCP/IP Socket】UDP Socket(含代码)

    UDP的Java支持 UDP协议提供的服务不同于TCP协议的端到端服务,它是面向非连接的,属不可靠协议,UDP套接字在使用前不需要进行连接.实际上,UDP协议只实现了两个功能: 1)在IP协议的基础上 ...

  5. Source Tree 簡介

    Table of Contents 1. 什麼是 Source Tree ? 1.1. 下載 1.2. SourceTree 介面簡介 1.3. git 指令/狀態圖 2. SourceTrees 超 ...

  6. 【JSON注解】注解@JsonIgnoreProperties和@JsonIgnore的另一个使用情况

    之前关于这两个注解,是用在JSON循环引用的情况上,那么现在关于这两个注解,还可以使用在另外一种情况上 即: 一般标记在属性或者方法上,返回的json数据即不包含该属性 关于这种情况在什么时候会遇到呢 ...

  7. [置顶] MySQL -- 创建函数(Function

    目标 如何在MySQL数据库中创建函数(Function) 语法 CREATE FUNCTION func_name ( [func_parameter] ) //括号是必须的,参数是可选的 RETU ...

  8. grafana结合influxdb、open-falcon出图配置

    1.https://www.jianshu.com/p/fadcf4d92b0e 2.https://www.jianshu.com/p/21ce6ee143f3 3.http://www.super ...

  9. android studio 使用(一)

    官方网址入门:https://developer.android.com/studio/install.html 看下Build Your first App,

  10. Servlet的部署开发细节以及注意事项

    学习servlet最困难的我感觉还是配置,一開始是非常麻烦的.为了较好的学习,一開始还是以手动开发我认为比較好,可是真的有点把握给搞晕了,尤其是部署servlet方面非常麻烦,这里做一下简单的总结,前 ...