javascript實現簡單購物車功能（有圖）

s實現淘寶購物車類似功能：

主要有添加商品

增加和減少商品數量

根據增加、減少或選擇的商品獲取金額

實現商品價格的計算

<!DOCTYPE html>

<html>

<head>

</head>

h1{

text-align: center;

}

table{

margin: 0 auto;

}

body{

font-size: larger;color: crimson;

background-image: url(img/2.jpg);

background-repeat: no-repeat;

background-size: 100%;

}

table th,table td{

}

</style>

<body >

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

</table>

<thead>

<tr>

</tr>

</thead>

<!--<tr>

<!--<input id="text" type="text" size="1" value="1" readonly="readonly" />

</td>

</td>

</tr>-->

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</body>

//this js中指當前對象

function add_shoppingcar(btn){

var tr=btn.parentNode.parentNode;

var tds=tr.getElementsByTagName("td");

var name=tds[0].innerHTML;

var price=tds[1].innerHTML;

var tbody=document.getElementById("goods");

var row=tbody.insertRow();//insertRow表格開頭插入新行

row.innerHTML="<td>"+name+"</td>"+

"<td>"+price+"</td>"+

"<td align='center'>"+

"<input type='button' value='-' id='jian' onclick='change(this,-1)' />"+

"<input id='text' type='text' size='1' value='1' readonly='readonly' />"+

"<input type='button' value='+' id='add' onclick='change(this,1)' />"+

"</td>"+

"<td>"+price+"</td>"+

"<td align='center'>"+

"<input type='button' value='X' onclick='del(this)'/>"+

"</td>"+

"</tr>"

total();

}

//增加減少數量，用n正負1來表示點擊了加減按鈕

function change(btn,n){

//獲取數量的三個input對象

var inputs=btn.parentNode.getElementsByTagName("input");

//獲取原來的數量

var amount=parseInt(inputs[1].value);

//當amount=1時不能再點擊"-"符號

//用n<0來表示點擊了減button

if(amount<=1 && n<0){

return;

}

//根據加減來改變數量

inputs[1].value=amount + n;

//將改變后的數量值賦值給am
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186

實現效果：

近一直忙于公司的一個新的h5項目，項目中有一個購物車模塊，使用jquery實現購物車基本結算功能。現已整理出來，感興趣的小伙伴們可以參考一下。

基本實現了單選、全選、購物車數量聯動、價格動態匯總、刪除訂單及無數據提示。

購物車列表模板

實際項目中需要根據購物車商品數據動態渲染，這里就使用靜態html展示了。

<!-- 購物車列表 -->
<div class="cart-wrap__ls" id="J__CartLS">
	<div class="cart-ls__item">
		<!-- //復選框 -->
		<div class="cart-item__radio"><i class="ico-radio"></i></div>
		<!-- //商品信息 -->
		<div class="cart-item__ginfo">
			<img class="g-img" src="http://admin.weikeniu.com/img/28291/20170721151143_4752_b.jpg" />
			<div class="g-info">
				<div class="flex1">
					<div class="g-title clamp1">海陵島大角灣風景區2天1晚</div>
					<div class="g-subtit clamp1">給你不一樣的風景體驗</div>
				</div>
				<div class="g-price c-red fs-32">￥<em>199.00</em></div>
			</div>
		</div>
		<!-- //數量加減 -->
		<div class="cart-item__num">
			<span class="minus disabled" onClick="$.cartNum.set(-1, this);">-</span>
			<input type="tel" value="1" onBlur="$.cartNum.check(this);" />
			<span class="plus normal" onClick="$.cartNum.set(+1, this);">+</span>
		</div>
		<!-- //刪除 -->
		<img class="cart-item__del" src="img/icon_cart-del.png" />
	</div>
	<!-- ... -->
</div>

購物車底部固定模板

<!-- 購物車底部 -->
<div class="cart-wrap__bottomAction" style="padding-top:2rem;">
	<div class="bottomfixed">
		<div class="inner">
			<div class="chkAll flex1" id="J__chkAll">
				<i class="ico-radio"></i>
				<span>全選</span>
			</div>
			<div class="total rmr-24">合計：<span class="c-red fs-32">￥<em id="J__totalPrice">12232.00</em></span></div>
			<button class="gstyle-btn__primary btn-pay" id="J__goPay">結算 (<em id="J__selNum">12</em>)</button>
		</div>
	</div>
</div>

購物車數量

直接封裝成$.cartNum函數，通過 $.cartNum.set() 、 $.cartNum.check(this) 調用即可。

<div class="cart-item__num">
	<span class="minus disabled" onClick="$.cartNum.set(-1, this);">-</span>
	<input type="tel" value="1" onBlur="$.cartNum.check(this);" />
	<span class="plus normal" onClick="$.cartNum.set(+1, this);">+</span>
</div>

$(function(){
	// 購物車數量
	$.cartNum={
		set: function(code, obj){
			var ipt=$(obj).siblings("input");
			var cartNums=parseInt($.trim(ipt.val()));
			switch (code) {
				case 1: {
					cartNums++;
				}
				break;
				case -1: {
					cartNums--;
				}
				break;
			}
			ipt.val(cartNums);
			$.cartNum.check(ipt);
			getTotalPrice();
		},
		check: function(obj){
			var o=$(obj);
			//數量小于0
			var cartNums=parseInt($.trim(o.val()));
			if (cartNums <=1) {
				o.val(1);
				o.siblings('.minus').addClass('disabled');
			}else {
				o.siblings('.minus').removeClass('disabled');
			}

			//判斷數量是否是數字
			var regExp=/^[1-9]*[1-9][0-9]*$/;
			if (isNaN(cartNums) || !regExp.test($.trim(o.val()))) {
				o.val(1);
				o.siblings('.minus').addClass('disabled');
			}

			//數量大于庫存（假定庫存99）
			//var storeNums=parseInt($.trim($('#data_storeNums').text()));
			var storeNums=99;
			if (cartNums >=storeNums) {
				o.val(storeNums);
			}
			getTotalPrice();
		}
	};
});

綁定單選、全選

// 判斷是否全選
chkAll();
function chkAll() {
	var $radio=$('#J__CartLS .cart-item__radio');
	var num=$radio.size();
	var k=0;
	$radio.each(function(i, v) {
		if($(this).hasClass('on')) {
			k++;
		}
	});
	if(k==num) {
		$('#J__chkAll').addClass('on');
	} else {
		$('#J__chkAll').removeClass('on');
	}
}
// 綁定單選
$('body').on('click', '#J__CartLS .cart-item__radio', function() {
	$(this).toggleClass('on');
	chkAll();
	getTotalPrice();
});
// 綁定全選
$('body').on('click', '#J__chkAll', function() {
	if($(this).hasClass('on')) {
		$('#J__CartLS .cart-item__radio').removeClass('on');
	} else {
		$('#J__CartLS .cart-item__radio').addClass('on');
	}
	$(this).toggleClass('on');
	getTotalPrice();
});

價格匯總

點擊單選、全選及數量加減，都觸發 getTotalPrice 函數。

// 價格匯總
getTotalPrice();
function getTotalPrice() {
	var $cartls=$('#J__CartLS').find('.cart-ls__item');
	var total=0, selected=0;
	$cartls.each(function(i, v) {
		if($(v).find('.cart-item__num input').val() > 1) {
			$(v).find('.cart-item__num .minus').removeClass('disabled'); //數量大于1減號可點擊
		}
		if($(v).children('.cart-item__radio').hasClass('on')) {
			var num=$(v).find('.cart-item__num input').val(); //商品數量
			total +=parseFloat($(v).find('.g-price em').text() * num);
			selected++;
		}
	});
	$('#J__goPay').prop('disabled', selected < 1 ? true : false);
	$('#J__totalPrice').text(total.toFixed(2));
	$('#J__selNum').text(selected);
}

刪除訂單

刪除訂單后，移除該訂單，觸發 getTotalPrice 函數，當購物車為空，則提示無數據。

// 刪除訂單
$('#J__CartLS').on('click', '.cart-item__del', function() {
	var that=$(this);
	wcPop({
		skin: 'ios',
		style: 'border-radius:12px;font-family:arial;overflow:hidden;',
		content: '您確定要刪除該條訂單嗎？',
		btns: [
			{
				text: '取消', style: 'color:#797979',
				onTap() { wcPop.close(); }
			},
			{
				text: '確定', style: 'color:#e0201f',
				onTap() {
					that.parents('.cart-ls__item').remove();
					wcPop.close();
					getTotalPrice();
					if($('#J__CartLS .cart-ls__item').size() > 0) {
						$('.J__bmBadge').text($('#J__CartLS .cart-ls__item').size());
					}else {
						$('.J__bmBadge').remove();
						$('.cart-nodata').fadeIn();
					}
				}
			}
		]
	})
});

ok，以上就是基于jquery實現的購物車功能。希望對大家有所幫助，感興趣的可以參考一下。

如果大家有更優的方法，歡迎一起交流討論哈~~

著電子商務網站和在線購物網站的日益普及，開發人員往往需要設計購物車功能。在本文中，我們將為大家展示一些免費并且流行的jQuery購物車插件，你可以下載它們來簡化工作流程。

該插件非常智能，它能通過非入侵的方式使用戶跳轉到想要購買的產品列表中，無需刷新頁面或觸發彈出窗口。

jPayPalCart是一個簡單的集成jQuery插件，它允許您創建一個無需使用笨重服務器端刷新頁面的功能齊全的購物車。

Simple Cart是一個免費開源的JavaScript購物車，可以輕松地與網站集成。

AddUI Store是一個易于使用的jQuery插件，它可以在任何網站上快速增加一個功能齊全的商店。這個插件由純JavaScript（jQuery）寫成。

jQuery Cart能實現拖放功能，能更新購物車來反應添加到其中的新項目，同時會更新數量。

Ajax和jQuery shopping carts是實現網站購物車最好的方式之一。

AJAX PayPal Cart是一個易于使用的jQuery插件，Web開發人員可以使用它在網站上添加一個全功能的購物車。

Ajax Shopping Cart可以以Ajax的方式修改購物車里的商品數量。

本站文章除注明轉載外，均為本站原創或翻譯