浅析购物车的实现

冷不防 2021-11-10 22:00 285阅读 0赞

我从来没有进行过正式的web开发，但是我一直喜欢web，所以这篇文章也是我转行web的一个开始吧。或多或少我也参考了几个网站的实现（当然了，只是看看大概的功能而已），所以也请大家多多指教。该购物车的功能如下：

1. 通过ajax实现添加和删除车上的物品。

2. 删除的物品会显示出来，可以重新添加到购物车。

3. 嗯...没有了，具体大家接着看吧。

购物车的结构我打算用一个table来展示，在UserControl里使用ListView展现购物车的物品（因为比拼接字符串要容易维护的多）。具体代码如下（ShopCartTest.ascx）：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 < asp:ListView  ID ="ListView1"  runat ="server" >   
  2  < LayoutTemplate >   
  3  < table  runat ="server"  cellpadding ='0'  cellspacing ='0'  width ='100%' >   
  4  < tr >   
  5  < td  width ='7%'  style ='height:  30px' >   
  6  商品编号  
  7  </ td >   
  8  < td >   
  9  商品名称  
 10  </ td >   
 11  < td  width ='10%' >   
 12  京东价  
 13  </ td >   
 14  < td  width ='8%' >   
 15  返现  
 16  </ td >   
 17  < td  width ='8%' >   
 18  赠送积分  
 19  </ td >   
 20  < td  width ='9%' >   
 21  商品数量  
 22  </ td >   
 23  < td  width ='7%' >   
 24  删除商品  
 25  </ td >   
 26  </ tr >   
 27  < tr  runat ="server"  id ="itemPlaceholder"  />   
 28  < tr >   
 29  < td  colspan ='7'  style ='height:  30px' >   
 30  重量总计： <% =  this.GetProductsWeight()  %> kg &nbsp;&nbsp;&nbsp; 原始金额：￥307.00元 - 返现：￥0.00元 < br  />   
 31  < span  style ='font-size:  14px' >< b > 商品总金额(不含运费)： < span  id ='cartBottom\_price' > ￥307.00 </ span > 元 </ b ></ span >   
 32  </ td >   
 33  </ tr >   
 34  </ table >   
 35  </ LayoutTemplate >   
 36  < ItemTemplate >   
 37  < tr >   
 38  < td  style ='padding:  5px 0 5px 0;' >   
 39  <% \#(Container.DataItem  as  Product).ID  %>   
 40  </ td >   
 41  < td >   
 42  < a  target ='\_blank'  href ='http://www.xxx.com/product/<%\#(Container.DataItem  as Product).ID % > .html'>  
 43  <% \#(Container.DataItem  as  Product).Name  %> </ a >   
 44  </ td >   
 45  < td >   
 46  < span >   
 47  <% \#(Container.DataItem  as  Product).Price  %> </ span >   
 48  </ td >   
 49  < td >   
 50  <% \#(Container.DataItem  as  Product).BackMoney  %>   
 51  </ td >   
 52  < td >   
 53  <% \#(Container.DataItem  as  Product).Score  %>   
 54  </ td >   
 55  < td >   
 56  < a  href ='\#none'  title ='减一'  onclick ="changeCount('-','<%\#(Container.DataItem as Product).ID %>','sku');"   
 57  style ='text-decoration:  none' > \- </ a >< input  type ='text'  id ='txt<%\#(Container.DataItem  as Product).ID % > '  
 58  name='txtChange <% \#(Container.DataItem  as  Product).ID  %> ' maxlength='4' style='width: 30px'  
 59  value=' <% \#(Container.DataItem  as  Product).Count  %> ' /> < a  href ='\#none'  title ='加一'  
 60  onclick ="changeCount('+','<%\#(Container.DataItem as Product).ID %>');"  style ='text-decoration:  none' > \+ </ a >   
 61  </ td >   
 62  < td >   
 63  < a  href ='\#none'  id ='btn\_del\_173259'  onclick ="removeProductOnShoppingCart('<%\#(Container.DataItem as Product).ID %>',this)" >   
 64  删除 </ a >   
 65  </ td >   
 66  </ tr >   
 67  </ ItemTemplate >   
 68   </ asp:ListView >

我想大家应不用我解释代码的意思了，很简单。

后台代码如下：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

public  partial  class  ShopCartTest : System.Web.UI.UserControl  
\{  
List < Product >  productsList  =  null ;  
  
 protected  override  void  OnPreRender(EventArgs e)  
\{  
 base .OnPreRender(e);  
  
 switch  (Acion)  
\{  
 case  " removeProductOnShoppingCart " :  
productsList  =  Product.GetProductsInCart(ProductID);  
 break ;  
 case  " changeProductCount " :  
productsList  =  Product.GetProductsInCart( null );  
 foreach  (var item  in  productsList)  
\{  
 if  (item.ID  ==  ProductID)  
\{  
item.Count  =  " 3 " ;  
\}  
\}  
 break ;  
 case  " AddProduct " :  
productsList  =  Product.GetProductsInCart( null );  
productsList.Add( new  Product() \{ ID  =  " 173233 " , Name  =  " ElandMX9470 " , Price  =  " 399.00 " , BackMoney  =  " 0.00 " , Score  =  " 0 " , Count  =  " 1 "  \});  
 break ;  
 default :  
productsList  =  Product.GetProductsInCart(ProductID);  
 break ;  
\}  
ListView1.DataSource  =  productsList;  
ListView1.DataBind();  
\}  
  
 public  string  GetProductsWeight()  
\{  
 return  Product.GetProductsInCart(ProductID).Sum(p  =>  decimal .Parse(p.Price)  \*  decimal .Parse(p.Count)).ToString();  
\}  
  
 public  string  GetProductsOriginalPrice()  
\{  
 return  Product.GetProductsInCart(ProductID).Sum(p  =>  decimal .Parse(p.Price)  \*  decimal .Parse(p.Count)).ToString();  
\}  
  
 public  string  ProductID \{  get ;  set ; \}  
  
 public  string  Acion \{  get ;  set ; \}  
\}

把对购物车的逻辑都写到这里面，通过action来判断是什么操作，一样简单的代码。再来看看Product类：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

public  class  Product  
\{  
 public  string  ID \{  get ;  set ; \}  
 public  string  Name \{  get ;  set ; \}  
 public  string  Price \{  get ;  set ; \}  
 public  string  BackMoney \{  get ;  set ; \}  
 public  string  Score \{  get ;  set ; \}  
 public  string  Count \{  get ;  set ; \}  
  
  
 public  static  List < Product >  GetProductsInCart( string  productID)  
\{  
List < Product >  list  =  new  List < Product > ()  
\{  
 new  Product\{ID = " 173259 " ,Name = " 毛毛仔妮妮熊MX9470 " ,Price = " 99.00 " ,BackMoney = " 0.00 " ,Score = " 0 " ,Count = " 1 " \},  
 new  Product\{ID = " 155097 " ,Name = " xxxxxx新款轻巧便携式电脑桌（送鼠标垫） " ,Price = " 79.00 " ,BackMoney = " ￥0.00 " ,Score = " 0 " ,Count = " 1 " \},  
 new  Product\{ID = " 155098 " ,Name = " xxxxxx护眼台灯（理想）STL-T412W-03WT " ,Price = " 69.00 " ,BackMoney = " ￥0.00 " ,Score = " 0 " ,Count = " 1 " \}  
\};  
  
 return  list.Where(p  =>  \{  return  p.ID  !=  productID; \}).ToList();  
\}  
\}

接下来在ShopCartDetail.aspx页面使用该UserControl：

< div  id ="products" >   
 < demo:ShopCartTest  ID ="ShopCartTest1"  runat ="server"  />   
 </ div >

通过ajax使用购物车还需要两个类：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

public  class  GetProducts : IHttpHandler  
\{  
  
 public  void  ProcessRequest(HttpContext context)  
\{  
context.Response.ContentType  =  " text/plain " ;  
  
ViewManager < ShopCartTest >  viewManager  =  new  ViewManager < ShopCartTest > ();  
  
ShopCartTest control  =  viewManager.LoadViewControl( " ~/ShopCartTest.ascx " );  
  
control.ProductID  =  context.Request.QueryString\[ " productId " \];  
control.Acion  =  context.Request.QueryString\[ " action " \];  
  
context.Response.Write(viewManager.RenderView(control));  
\}  
  
 public  bool  IsReusable  
\{  
 get   
\{  
 return  false ;  
\}  
\}  
\}

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

public  class  ViewManager < T >  where  T : UserControl  
\{  
 private  Page m\_pageHolder;  
  
 public  T LoadViewControl( string  path)  
\{  
m\_pageHolder  =  new  Page();  
 return  this .m\_pageHolder.LoadControl(path)  as  T;  
\}  
  
 public  string  RenderView(T control)  
\{  
StringWriter output  =  new  StringWriter();  
  
 this .m\_pageHolder.Controls.Add(control);  
  
HttpContext.Current.Server.Execute( this .m\_pageHolder, output,  false );  
  
 return  output.ToString();  
\}  
\}

这两个类是参考老赵提出来的方案完成，具体原理，你可以看[这里][Link 1]。

剩下来都是javascript了,这里我并没有使用任何类库或者框架。代码如下：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 function  ajaxCommon(requst) \{  
  2  var  xmlHttp  =  false ;  
  3  if  (window.ActiveXObject) \{  
  4  xmlHttp  =  new  ActiveXObject( " Microsoft.XMLHTTP " );  
  5  \}  
  6  else  \{  
  7  if  (window.XMLHttpRequest) \{  
  8  xmlHttp  =  new  XMLHttpRequest();  
  9  \}  
  10  \}  
  11  xmlHttp.onreadystatechange  =  function () \{ getAjaxValue(xmlHttp) \}  
  12  xmlHttp.open( " GET " ,  " /GetProducts.ashx "  \+  ' ?roid= '  \+  Math.random()  \+  ' & '  \+  requst);  
  13  xmlHttp.send( null );  
  14 \}  
  15   
  16   function  getAjaxValue(xmlHttp) \{  
  17   
  18  if  (xmlHttp.readyState  ==  4 ) \{  
  19  if  (xmlHttp.status  ==  200 ) \{  
  20  document.getElementById( " products " ).innerHTML  =  xmlHttp.responseText;  
  21  \}  
  22  \}  
  23 \}  
  24   
  25   function  addProduct(productID, productCount) \{  
  26  ajaxCommon( " action=AddProduct&productId= "  \+  productID  \+  " &productCount= "  \+  productCount);  
  27 \}  
  28   
  29   function  removeProductOnShoppingCart(productId, obj) \{  
  30  debugger ;  
  31  setDelProduct(obj, productId);  
  32   
  33  ajaxCommon( " action=removeProductOnShoppingCart&productId= "  \+  productId);  
  34   
  35  setDelProductShow();  
  36 \}  
  37   
  38   function  changeCount(type, productID) \{  
  39  var  changeCount  =  0 ;  
  40  var  txtCount  =  0 ;  
  41  if  (type  ==  " \- " ) \{  
  42  changeCount  =  \- 1 ;  
  43  \}  
  44  if  (type  ==  " \+ " ) \{  
  45  changeCount  =  1 ;  
  46  \}  
  47  txtCount  =  document.getElementById( " txt "  \+  productID).value;  
  48   
  49  ajaxCommon( " action=changeProductCount&productId= "  \+  productID  \+  " &productCount= "  \+  txtCount);  
  50 \}  
  51   
  52   function  DeledProductInfo() \{  
  53  this .ID  =  '' ;  
  54  this .Name  =  '' ;  
  55  this .Price  =  '' ;  
  56  this .Count  =  '' ;  
  57 \}  
  58   
  59   var  delProduct  =  null ;  
  60   function  setDelProduct(obj, productID) \{  
  61  try  \{  
  62  delProduct  =  new  DeledProductInfo();  
  63  var  trObj  =  obj.parentNode.parentNode;  
  64   
  65  delProduct.ID  =  trObj.cells\[ 0 \].innerHTML;  
  66  delProduct.Name  =  trObj.cells\[ 1 \].innerHTML;  
  67  delProduct.Price  =  trObj.cells\[ 2 \].innerHTML;  
  68  delProduct.Count  =  document.getElementById( ' txt '  \+  productID).value;  
  69  \}  catch  (e) \{ \}  
  70   
  71 \}  
  72   
  73   function  setDelProductShow() \{  
  74  try  \{  
  75  if  (document.getElementById( ' divDeledProduct ' )  ==  null )  return ;  
  76  if  (delProduct  !=  null  &&  delProduct.ID  !=  '' ) \{  
  77  var  dHtml  =  " <table><tr> " ;  
  78  dHtml  \+=  " <td style='width:70px'> "  \+  delProduct.ID  \+  " </td> " ;  
  79  dHtml  \+=  " <td style='text-align:left'> "  \+  delProduct.Name  \+  " </td> " ;  
  80  dHtml  \+=  " <td> "  \+  delProduct.Price  \+  " </td> " ;  
  81  dHtml  \+=  " <td> "  \+  delProduct.Count  \+  " </td> " ;  
  82  dHtml  \+=  " <td><a href='\#none' οnclick=\\ " addProduct( ' " + delProduct.ID + " ' , ' " + delProduct.Count + " ' );reAddedProduct( ' delProduct" + delProduct.ID + " ' );\\ " >重新购买</a></td> " ;  
  83  dHtml  \+=  " </tr></table> " ;  
  84   
  85  document.getElementById( ' divDeledProduct ' ).style.display  =  '' ;  
  86   
  87  document.getElementById( ' divDeledProduct ' ).innerHTML  \+=  " <div id='delProduct "  \+  delProduct.ID  \+  " '> "  \+  dHtml  \+  " </div> " ;  
  88   
  89  \}  
  90   
  91  delProduct  =  null ;  
  92  \}  catch  (e) \{ \}  
  93 \}  
  94   
  95   function  reAddedProduct(reAddDivId) \{  
  96  try  \{  
  97  debugger ;  
  98  document.getElementById( ' divDeledProduct ' ).removeChild(document.getElementById(reAddDivId));  
  99  if  (document.getElementById( ' divDeledProduct ' ).childNodes.length  ==  0 ) \{  
 100  document.getElementById( ' divDeledProduct ' ).style.display  =  ' none ' ;  
 101  \}  
 102  \}  catch  (e) \{ \}  
 103 \}

代码依旧很容易看懂，需要解释的就是删除的操作，分为三步：

*  将需要删除的物品先保存起来：setDelProduct(obj, productId);
 *  在后台购物车清单上面将物品删除，并返回删除后的物品清单：ajaxCommon("action=removeProductOnShoppingCart&productId=" + productId);
 *  将删除的物品输出，放到已删除列表（完全在客户端操作）：setDelProductShow();

还有从删除列表中将删除的物品重新添加到购物车当中，分为两步：

*  在后台将物品添加到物品清单（和直接添加物品调用同一个方法）：addProduct
 *  从已删除列表中将该物品删除（完全在客户端操作）：reAddedProduct

这样，一个基本的购物车就完成了。但是具体对于数据的操作，需要您进一步处理。本文对于数据的操作只是示例而已。

转载于:https://www.cnblogs.com/WillMeng/archive/2010/03/15/ShopCart.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211109/7500c4ec27de43909a99673397bb1803.png
[Link 1]: http://www.cnblogs.com/JeffreyZhao/archive/2007/12/30/usercontrol_as_an_template.html

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关购物车的实现（四）

class Cart { // 静态方法声明在class中 static checkOne; static all; c

╰+攻爆jí腚メ/ 2022年12月16日 03:52/ 0 赞/ 140 阅读

相关购物车的实现（三）

实现的方法和逻辑代码注释都有 class Goods { constructor() { Goods.list(); }

太过爱你忘了你带给我的痛/ 2022年12月16日 00:48/ 0 赞/ 158 阅读

相关购物车的实现（二）

文件目录 ![在这里插入图片描述][20201015142036802.png_pic_center] 一：封装ajax请求 let axios = {

淩亂°似流年/ 2022年12月15日 03:48/ 0 赞/ 190 阅读

相关购物车的实现（一）

一：商品列表的html和css <html> <head> <title></title> <meta charset="utf-

深藏阁楼爱情的钟/ 2022年12月15日 03:48/ 0 赞/ 158 阅读

相关购物车实现逻辑

先谈一下购物车的演变：早期的购物车默认全选功能然后进行提交订单，但是狠多用户将购物车当成了收藏夹，只是收藏而不购买，如果每次都是全选的话，用户需要将收藏的商

绝地灬酷狼/ 2022年07月14日 04:59/ 0 赞/ 281 阅读

相关实现购物车的实现原理

1.在用户没有登陆的情况下，在商品详情界面，点击“加入购物车”把商品id传递给Controller，Controller接收id，Controller调用Service根据商品

深藏阁楼爱情的钟/ 2022年05月08日 10:48/ 0 赞/ 235 阅读

相关购物车实现

[https://note.youdao.com/share/?id=fdc2f7f71349a5c38434d2802faa6552&type=note\/][https_n

绝地灬酷狼/ 2022年05月08日 06:38/ 0 赞/ 387 阅读

相关购物车如何实现的

购物车的实现可以使用多种方式，主流的有以下3种：存储在用户游览器中：如使用cookie记录，也可以使用HTML5的本地存储等存储在服务器中：存储在用户会话（sessio

￡神魔★判官ぃ/ 2022年03月29日 12:08/ 0 赞/ 226 阅读

相关购物车的实现原理

今天来开始写一下关于购物车的东西, 这里首先抛出四个问题: 1）用户没登陆用户名和密码,添加商品, 关闭浏览器再打开后不登录用户名和密码　问：购物车商品还在吗？答：在

约定不等于承诺〃/ 2022年03月10日 11:12/ 0 赞/ 264 阅读

相关浅析购物车的实现

我从来没有进行过正式的web开发，但是我一直喜欢web，所以这篇文章也是我转行web的一个开始吧。或多或少我也参考了几个网站的实现（当然了，只是看看大概的功能而已），所以也请大

冷不防/ 2021年11月10日 22:00/ 0 赞/ 286 阅读