购物车程序完善版(JavaScript代码)

来源:岁月联盟 编辑:exp 时间:2012-04-24
[javascript]
/**********************************购物车类***************************************/ 
 
    var product=function(productArr){/*商品类基类productArr=>array;productArr['ID'],productArr['name'],productArr['pic'],=productArr['lvs'],productArr['width'],productArr['thickness '],productArr['length'],productArr['open'],productArr['capacity']*/ 
        var _ID=productArr['ID'],_name=productArr['name'],_pic=productArr['pic'],_price=productArr['price'],_weight=productArr['weight'],_originalPrice=productArr['originalPrice'],_this=this; 
        this.num=productArr['num']; 
        this.getName=function(){ 
            return _name; 
            } 
        this.getID=function(){ 
            return _ID; 
            }    
        this.getPrice=function(){ 
            return _price; 
            } 
        this.getWeight=function(){ 
            return _weight; 
            } 
        this.getPic=function(){ 
            return _pic; 
            } 
        this.getOriginalprice=function(){ 
            return _originalPrice; 
            } 
        this.setNum=function(newNum){ 
            _this.num=newNum; 
            } 
        this.getTotal=function(){ 
            var total=_this.num*_this.getPrice(); 
            return total; 
            }    
         
        } 
     
    var makeProductObj=function(gID,pID,num){//制造product对象函数,返回制造的product对象,gID=>数据组ID,pID=>商品ID 
            /*********制造代码*********/ 
            var pData=[]; 
            (function(gID,pID){ 
                $.ajax({ 
                    url:'/module/data/default.php?action=dataDetail&groupID='+gID+'&ID='+pID+'&r='+new Date(), 
                    type:'post', 
                    dataType:'xml', 
                    async:false, 
                    /**工厂方法***/ 
                    success:function(dataXML){ 
                        pData.price=$(dataXML).children('root').children('extend19').text(); 
                        pData.originalPrice=$(dataXML).children('root').children('extend9').text(); 
                        pData.weight=$(dataXML).children('root').children('extend21').text(); 
                        pData.name=$(dataXML).children('root').children('name').text(); 
                        pData.pic=$(dataXML).children('root').children('extend17').text(); 
                        } 
                    }); 
                })(gID,pID); 
            return new product({ 
                num:num, 
                name:pData.name, 
                ID:pID, 
                price:pData.price, 
                pic:pData.pic, 
                weight:pData.weight, 
                originalPrice:pData.originalPrice, 
                }); 
        } 
    var cartCookie=$.cookies.get('productItem');//cookie的全局变量=>'商品ID|数量,商品ID|数量' 
    //alert(mockCookie); 
     
    var productCollection=function(){//商品搜集类 
            var products=[]; 
            var hasOne=function(productObj){ 
                var isOne=0; 
                for(var i=0;i<products.length;i++){ 
                    if(products[i].getID()==productObj.getID()){ 
                        isOne=1; 
                        break; 
                        } 
                    } 
                return isOne; 
                } 
              var initProduct 
            /********初始哈products数组代码********/ 
                       //alert(mockCookie); 
              if(cartCookie){ 
                 initProduct=cartCookie.split(','); 
                 for(var i=0;i<initProduct.length;i++){ 
                   var _productTemp=initProduct[i].split('|'); 
                   var _proObj=new makeProductObj(4,parseInt(_productTemp[0]),parseInt(_productTemp[1])); 
                   if(hasOne(_proObj)!=1){ 
                    products.push(_proObj); 
                   } 
                 } 
                          } 
            /*******初始哈products数组代码*********/ 
             
            this.addProduct=function(productObj){//添加商品 
                   if(hasOne(productObj)!=1){ 
                        products.push(productObj); 
                    } 
                } 
            this.delProduct=function(productObj){//删除商品 
                var _tempProducts=[]; 
                for(var i=0;i<products.length;i++){ 
                    if(products[i].getID()!==productObj.getID()){ 
                        //console.log(products[i].getID()); 
                        _tempProducts.push(products[i]); 
                        } 
                    } 
                    products=_tempProducts; 
                }//del 
            this.setNumByPid=function(pID,newNum){//设置商品数量 
                    for(var k=0;k<products.length;k++){ 
                        if(products[k].getID()==pID){ 
                            products[k].setNum(newNum); 
                            break; 
                            } 
                        } 
                } 
            this.getProductById=function(pID){//pID为商品的ID,获得商品对象 
                    for(var j=0;j<products.length;j++){ 
                        if(products[j].getID()==pID){ 
                            return products[j]; 
                            break; 
                            } 
                        } 
                    return false; 
                } 
            this.getProducts=function(){//获得商品对象数组 
                return products; 
                } 
            this.getNeedMoney=function(){//获得所有商品的总价钱 
                var _needMoney=0; 
                for(var k=0;k<products.length;k++){ 
                    _needMoney+=products[k].getTotal(); 
                    } 
                return _needMoney; 
                }//getNeedMoney  
        } 
         
     
    var cart=function(){//购物车类,productCollection为委托对象 
            var _productCollection=''; 
            var _nowCollection=''; 
            var _this=this; 
            this.setCollection=function(collection){//设置collection 
                _productCollection=collection; 
                _nowCollection=_productCollection;//动态collection对象 
                _this.setTemp(); 
                } 
            this.temp=[];//初始化collection对象 
            this.setTemp=function(){ 
                    if(!_productCollection){ 
                        throw new Error('请先指定collection对象!'); 
                        } 
                    var listProduct=_productCollection.getProducts(); 
                    for(var i=0;i<listProduct.length;i++){ 
                            _this.temp[i]=[]; 
                            _this.temp[i]=listProduct[i]; 
                        } 
                }; 
            this.delProduct=function(pID){//删除单个商品pID->商品的ID号 
                    var needProduct=_nowCollection.getProductById(pID); 
                    if(needProduct!=false){ 
                        _nowCollection.delProduct(needProduct); 
                        } 
                } 
            this.setNumByPid=function(pID,newNum){//设置某个商品的数量,pID->商品ID 
                    _nowCollection.setNumByPid(pID,newNum); 
                } 
            this.getCurrentNumByPid=function(pID){//获得某个商品的数量,pID->商品ID 
                    var productObj=_nowCollection.getProductById(pID); 
                    return productObj.num; 
                } 
            this.getTotalMoney=function(){//获得总金额 
                    var _money=_nowCollection.getNeedMoney(); 
                    return _money; 
                } 
            this.getTotalMoneyByPid=function(pID){//获得单个商品的总金额 
                    var _needProduct=_nowCollection.getProductById(pID); 
                    if(_needProduct===false){ 
                        throw new Error('无此商品'); 
                        } 
                    var _totalMoney=_needProduct.getTotal(); 
                    return _totalMoney; 
                } 
            this.renderCart=function(){//渲染函数 
                    throw new Error('错误,该方法必须在子类中实现'); 
                } 
            this.bindEvent=function(){//绑定事件函数 
                    throw new Error('错误,该方法必须在子类中实现'); 
                } 
            //this.renderCart(); 
            this.touchOff=function(){//触发 www.2cto.com  
                    _this.renderCart(); 
                    _this.bindEvent(); 
                } 
            this.getNewCollection=function(){//获得新的collection对象 
                    return _nowCollection; 
                } 
        } 
/********************************购物车类****************************************/ 
        var shoppingTrolley=function(){ 
                //alert('test'); 
                /***************检查*****************/ 
                if(!cartTest){ 
                    throw new Error('请实例化cart对象'); 
                    } 
                /***************检查***************/ 
                cartTest.renderCart=function(){//子渲染 
                            var _content=''; 
                            for(var i=0;i<this.getNewCollection().getProducts().length;i++){ 
                                    var _productEach=this.getNewCollection().getProducts()[i]; 
                                    //alert(_productEach.getName()); 
                                     _content+='<tr class="cartList"><td height="25" align="center" valign="middle" bgcolor="#FFFFFF" class="name"><input type="hidden" value="'+_productEach.getID()+'"/>'+_productEach.getName()+'</td><td height="25" align="center" valign="middle" bgcolor="#FFFFFF"><em>$'+_productEach.getOriginalprice()+'</em></td><td height="25" align="center" valign="middle" bgcolor="#FFFFFF" class="red">$'+_productEach.getPrice()+'</td><td height="25" align="center" valign="middle" bgcolor="#FFFFFF">'+_productEach.getWeight()+'Kg</td><td width="21" height="25"  align="center" valign="middle" class="numJian" bgcolor="#FFFFFF">-</td><td width="28" height="25" align="center" valign="middle" bgcolor="#FFFFFF" class="nowNum"><span class="red">'+_productEach.num+'</span></td><td width="21" height="25"  align="center" valign="middle" class="numJia" bgcolor="#FFFFFF">+</td><td height="25" align="center" valign="middle" bgcolor="#FFFFFF" class="eachTotal">$'+_productEach.getTotal()+'</td><td height="25" align="center" valign="middle" bgcolor="#FFFFFF" class="red">Delete</td></tr>'; 
                                } 
                            //document.write(_content); 
                            //alert(_content); 
                            $('#checkCart').find('tr').eq(0).after(_content);//渲染面板 
                            $('.step_total').find('.step_total_right').children('span').html('$'+cartTest.getTotalMoney()); 
                            /**popBoxCount**/ 
                    }//renderCart 
                    cartTest.bindEvent=function(){ 
                                    var _this=this; 
                                    //alert($('#'+win1.ID).find('.cartList').eq(0).html()); 
                                    $('#checkCart').find('.cartList').each(function(index){ 
                                            var _each=$(this); 
                                            _each.find('td:last').css('cursor','pointer').click(function(){ 
                                                //alert('删除'); 
                                                var _tempThis=$(this); 
                                                _this.delProduct($(this).parents('tr').find('td:first').find('input[type=hidden]').val()); 
                                                $(this).parents('tr').remove(); 
                                                /*******重新计算商品的总金额*******/ 
                                                $('.step_total').find('.step_total_right').children('span').html('$'+_this.getTotalMoney()); 
                                                /*******重新计算商品的总金额*******/ 
                                                });//click删除商品 
                                             
                                            _each.children('td[class=numJia]').css('cursor','pointer').click(function(){ 
                                                    var _jiaThis=$(this); 
                                                    //alert($(this).parents('tr').parents('table').find('input[type=hidden]').val()); 
                                                    _this.setNumByPid($(this).parents('tr').find('td:first').find('input[type=hidden]').val(),_this.getCurrentNumByPid($(this).parents('tr').find('td:first').find('input[type=hidden]').val())+1); 
                                                    //alert(_jiaThis.parents('td').siblings('td[class=nowNum]').children('input').val()); 
                                                    _jiaThis.siblings('td[class=nowNum]').html( 
                                                        _this.getCurrentNumByPid(_jiaThis.parents('tr').find('td:first').find('input[type=hidden]').val()) 
                                                    ); 
                                                    /***********重新计算某个商品的总金额***********/ 
                                                    _jiaThis.siblings('td[class=eachTotal]').children('span').html('$'+_this.getTotalMoneyByPid(_jiaThis.parents('tr').find('td:first').find('input[type=hidden]').val())); 
                                                    /***********重新计算某个商品的总金额***********/ 
                                                     
                                                    /*******重新计算商品的总金额*******/ 
                                                    $('.step_total').find('.step_total_right').children('span').html('$'+_this.getTotalMoney()); 
                                                    /*******重新计算商品的总金额*******/ 
                                                });//click增加商品数量 
                                            _each.children('td[class=numJian]').css('cursor','pointer').click(function(){ 
                                                    var _jianThis=$(this); 
                                                    if(_this.getCurrentNumByPid($(this).parents('tr').find('td:first').find('input[type=hidden]').val())>1){ 
                                                        _this.setNumByPid($(this).parents('tr').find('td:first').find('input[type=hidden]').val(),_this.getCurrentNumByPid($(this).parents('tr').find('td:first').find('input[type=hidden]').val())-1); 
                                                        _jianThis.siblings('td[class=nowNum]').html( 
                                                        _this.getCurrentNumByPid($(this).parents('tr').find('td:first').find('input[type=hidden]').val()) 
                                                    ); 
                                                    /***********重新计算某个商品的总金额***********/ 
                                                    _jianThis.siblings('td[class=eachTotal]').children('span').html('$'+_this.getTotalMoneyByPid(_jianThis.parents('tr').find('td:first').find('input[type=hidden]').val())); 
                                                    /***********重新计算某个商品的总金额***********/ 
                                                     
                                                    /*******重新计算商品的总金额*******/ 
                                                    $('.step_total').find('.step_total_right').children('span').html('$'+_this.getTotalMoney()); 
                                                    /*******重新计算商品的总金额*******/ 
                                                        }//如果当前商品数量大于1 
                                                });//click减少商品数量 
                                        });//each 
                            }//bindEvent 
                    cartTest.touchOff();//触发 
                     
                    $(window).unload(function(){//当离开页面时 
                            //alert('狗头拜'); 
                            var lastCollection=cartTest.getNewCollection();  
                            var _products=lastCollection.getProducts(); 
                            //console.log(_products.length); 
                            var _cartCookie=''; 
                            var _countNum=0; 
                            for(var i=0;i<_products.length;i++){ 
                                    _cartCookie+=_products[i].getID()+'|'+_products[i].num+','; 
                                    _countNum+=_products[i].num*_products[i].getWeight(); 
                                } 
                            _cartCookie=_cartCookie.substring(0,_cartCookie.length-1); 
                            //alert(_cartCookie); 
                            //alert(_cuntNum); 
                            //alert(_countNum); 
                            $.cookies.set('productItem',_cartCookie);//设置cookie 
                            $.cookies.set('countNum',_countNum);//设置量的cookie 
                        }); 
                         
                        $('#btn').click(function(){ 
                            /******************若未选择任何商品返回*****************/ 
                            var _listProducts=cartTest.getNewCollection().getProducts(); 
                            if(_listProducts.length<0||_listProducts.length==0){ 
                                    alert('Please select products!'); 
                                    return; 
                                } 
                            window.location.href='/step2/'; 
                        }); 
                 
            } 
    /**********************购物车类***********************************/ 
     
    /******************实例化对象******************/  
    var productCollections= new productCollection(); 
    var cartTest=new cart(); 
    cartTest.setCollection(productCollections); 
    new shoppingTrolley(); 



摘自 PainsOnline的专栏