Chinaunix首页 | 论坛 | 博客
  • 博客访问: 366331
  • 博文数量: 284
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1707
  • 用 户 组: 普通用户
  • 注册时间: 2014-05-14 16:38
文章分类

全部博文(284)

文章存档

2015年(6)

2014年(278)

我的朋友

分类: JavaScript

2014-07-31 17:40:16

我主要运用这个jsorder,修正了它的不足
//1.0版本bug:刷新页面 无法增加或者删除原来添加的商品
//1.1版本:修正了1.0版本  新增bug 能够修改原来的商品 但出现产品数量为0 仍然保留在购物车中。
//1.2版本:修正了1.1版本的产品为0 并且增加了购物车总价
原文:
代码一共6k,基于jquery的购物车实现,实现订单的本地cookie存储,支持购物车自定义样式,金额的计算。通过json与后台交互。实现可配置化的购物车系统,可应用于电子商务平台。 
1. [代码]使用代码     
//使用代码如下
//作者原文
//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 = $('
' + opts.leftdemo + '
  • '+ opts.nomessage + '
').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("
  • "+ name+ "
    "+ slide.info(price,datejsorder[id]['count'])+ "
  • ");
                        $("#" + 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 {
                        $("#" + 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)
                            $('' + opts.subbuttom + '')
                                    .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("
  • "+ data[id]['name']+ "
    "+ slide.info(data[id]['price'],data[id]['count'])+ "
  • ");
                $("#" + 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);

    阅读(527) | 评论(0) | 转发(0) |
    给主人留下些什么吧!~~