simpleCart的功能就不用解释,购物车,很6.官网上的说明太模糊了,还是GIHUb上的好一点:https://github.com/wojodesign/simplecart-js/
文章解决问题:在simpleCatrt的基础上添加一个列名,并实现增删改查。
文章的思路是:1.添加列名 2.给列名赋值 3.显示列名 4.提交列名
1.了解其列表显示的规则
这个地方的数据来中:simplecart.js这个文件里面
cartColumns: [ { attr: "name", label: "Name" }, { attr: "image", label: "image" }, //添加一个image属性 { attr: "price", label: "Price", view: "currency" }, { view: "decrement", label: !1 }, { attr: "quantity", label: "Qty" }, { view: "increment", label: !1 }, { attr: "total", label: "SubTotal", view: "currency" }, { view: "remove", text: "Remove", label: !1 } ]
①.{ attr: "name" , label: "Name" } ,每一列代表一个字段,在这里配了在前台就是使用 class="item_name",才能在添加的使用将数据放入对象中
②.{ view: "increment" , label: false , text: "+" } 也有一些建在“视图”,将创建一个专栏。例如,一个“+”的观点:
③.这里面的数据代表前台能使用的字段名。比如
2.了解simpleCart的取值规则
<div class="col-md1 simpleCart_shelfItem"> //理解为,实例item化对象 <a href="single.html" > <img class="img-responsive item_image" src="images/pi5.png" alt="" />//添加item.image ,点击item_add 字段会添加到单前对象中 </a> <h3><a href="single.html" class="item_name">T-Shirt</a></h3> //添加 item.name <div class="price"> <h5 class="item_price">$300</h5> //添加 item.price <a href="#" class="item_add">Add To Cart</a> <div class="clearfix"> </div> </div> </div>
①.使用simplecart的时候最外层必须先实现 class="simpleCart_shelfItem"。用面向对象很好理解,先实力化一个模型,然后赋值给每个字段值。
②.item_{name} 相当于赋值的字段,而name的定义请看1的显示规则。
3.前台显示
<div class="simpleCart_items"> <!--数据加载前显示的内容 开始--> <div style="text-align: center;"> 购物车数据加载中...请稍待. </div> <!--数据加载前显示的内容 结束--> </div>
z注意:但是最好在购物车的界面重新重新定义一下显示列:simpleCart.cartColumns 因为在Js里面默认显示如1一样,英文显示
在购物车html页面重新实例化一下:
<script type="text/javascript"> simpleCart({ //Setting the Cart Columns for the sidebar cart display. cartColumns: [ { attr: "image", label: "图片展示", view: "image" }, //Name of the item { attr: "name", label: "商品名称" }, //Quantity displayed as an input { attr: "quantity", label: "数量", view: "input" }, //Built in view for a remove link { view: "remove", label: "操作", text: "移除", label: "操作" }, //Price of item { attr: "price", label: "单价" }, //Subtotal of that row (quantity of that item * the price) { attr: "total", label: "小计", view: "currency" } ] }); </script>
3.数据传送问题
数据的显示和增加都解决了,然后数据怎么传输出去了?官方的那个方法可能基础太差,我只需要简单的post提交,所以自己重写了
var checkOut = function () { var id = "";//Id编号 var price = "";//价格 var quantity = "";//数量 var url = "/checkout.aspx?optype=shop"; simpleCart.each(function (item) { id += item.get("pid") + ","; price += item.get("price") + ","; quantity += item.get("quantity") + ","; }) $.post(url, { id: id, price: price, quantity: quantity }, function (data) { if (data == 0) { alert("您下单成功"); simpleCart.empty(); } else { alert("下单失败,请稍后再试"); } }) };
这样只后台的数据就是:1,2,3,4,5,的形式,到后台解析下就好了:
string[] id = baseOpen.requesStr("id").Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
5总结
技术摆在这里,能写这么多,要更加努力。
simpleCart让我理解的代码模块化,不要制造同样的轮子,你要理解的是他的构造。为什么我写了这么多东西,但是写网站又要重新写?因为没有标准化。
1.bootstrap 这套框架好在,标准化了样式,样式做到了很好。我们只需要记住基本类名,就能在所有项目中调用。
2.simpleCart的思路我更加佩服,将类名动态化。在前台使用新的字段,我们在.js里面只需要加入字段。以空间换时间,这种代码,换到哪里都能直接使用。