文档相当齐全: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}>" οnclick="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>