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

最新推荐文章于 2023-06-30 11:11:40 发布

原创最新推荐文章于 2023-06-30 11:11:40 发布 · 1.7w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#class #javascript #image #input #border #table

本文将介绍如何使用SimpleCartJS实现一个简单的购物车功能，包括引入代码、加入购物车、查看购物车等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

资源：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>