一个很给力的js购物车程序

来源:互联网 发布:康有为和孙中山 知乎 编辑:程序博客网 时间:2024/06/07 02:30

 

资源:http://simplecartjs.org/

文档相当齐全:http://simplecartjs.org/documentation/

、引入代码:

<script src="<{xoImgUrl jquery.1.6.1.min.js}>"></script><!--cart--><script src="<{xoImgUrl cart/test/qunit.js}>"></script><script src="<{xoImgUrl cart/test/inject.js}>"></script><script src="<{xoImgUrl cart/simpleCart.js}>"></script><script>  simpleCart({    checkout: {      type: "SendForm",      url: "http://52taoyy.com/modules/pshow/cart/checkout"            },    currency: "JPY"  });</script>

 

注意,jquery必需在1.6以上

、加入购物车代码:

<a class="linkCart" title="<{$pro.pro_name}>" onclick="simpleCart.add({name:'<{$pro.pro_name}>', price: <{$pro.sales_price}>, image:'<{$pro.pro_photo1}>'}); alert('已经添加到购物车');"href="javascript:;">加入购物车</a>


、查看购物车

<div class="navtextbar"><a href="<{$xoops_url}>">首页</a> >> 我的购物车</div><h4 class="">我的购物车</h4><style>.simpleCart_items table{border:1px solid #ccc;}.simpleCart_items th{color:#333;text-align:left;padding:10px 30px;border-bottom:1px solid #ccc;background: #ededed;background: -moz-linear-gradient(top,  #f7f7f7 0%, #ededed 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#ededed));background: -webkit-linear-gradient(top,  #f7f7f7 0%,#ededed 100%);background: -o-linear-gradient(top,  #f7f7f7 0%,#ededed 100%);background: -ms-linear-gradient(top,  #f7f7f7 0%,#ededed 100%);background: linear-gradient(top,  #f7f7f7 0%,#ededed 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ededed',GradientType=0 );}.simpleCart_items td{padding:10px 30px;vertical-align:middle;border-bottom:1px solid #ccc;}.item-image,.item-image img{width:72px;}.item-name{width:50%;}.item-quantity,.item-quantity input{width:30px;text-align:center;}.item-price,.item-subtotal{width:50px;}.simpleCart_total_div{text-align:right; padding:5px; border-bottom:1px solid #ccc; font-size: 16px;}.simpleCart_total{margin-right: 20px;}.sp_left{float:left; margin-left: 10px;}</style><div class="simpleCart_items"><!--数据加载前显示的内容 开始--><div style="text-align:center;">购物车数据加载中...请稍待.<br /><img src="<{xoImgUrl icons/loading.gif}>" style="border:0px;"></div><!--数据加载前显示的内容 结束--></div><div class="simpleCart_total_div"><span class="sp_left"><a href='javascript:;'>前去结账</a></span>合计:<span class="simpleCart_total"></span></div><script>simpleCart({//Setting the Cart Columns for the sidebar cart display.cartColumns: [{ attr: "image", label: false, 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", text: "删除", label: false},//Price of item{ attr: "price", label: "单价"},//Subtotal of that row (quantity of that item * the price){ attr: "total" , label: "小计", view: "currency"  }],cartStyle: "table",});</script>