欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > JavaScript >

添加到购物车相关操作

发布时间:2016-09-04  编辑:杨雨个人博客网站   点击:   

我们有很多种方法实现将商品添加到购物车,通常的做法是点击“添加到购物车”按钮,会跳转到购物车,在购物车里可以点击“结算”按钮进行结算。而今天我给大家介绍一个更友好的解决方案。

默认情况下,购物车是隐藏不可见的,当用户点击添加到购物车按钮后,商品信息会添加到购物车,购物车会以按钮的形式出现在页面右下角,点击按钮则会展开购物车,显示购物车中的商品信息,同时也可以对购物车中的商品进行删除或者结算等操作。用户也可以暂时关闭购物车继续购物。

HTML结构

HTML结构主要包括两部分,第一部分是商品列表中的“添加到购物车”按钮,如下代码,我们使用data-*属性将商品的id,图片、名称、价格等信息一并带上。

<a href="#0" class="btn btn-success add-button" data-price="3669.00" data-proid="1" data-proname="华为P9" data-proimg="img/huawei_p9.jpg">添加到购物车</a>

第二部分是购物车,购物车部分包括触发购物车以及购物车统计部分 .cd-cart-trigger和购物车主体内容部分.cd-cart。

<div class="cd-cart-container empty">
	<a href="#0" class="cd-cart-trigger">
		购物车
		<ul class="count"> <!-- cart items count -->
			<li>0</li>
			<li>0</li>
		</ul> 
	</a>

	<div class="cd-cart">
		<div class="wrapper">
			<header>
				<h2>购物车</h2>
				<span class="undo">已删除 <a href="#0">恢复</a></span>
			</header>
			
			<div class="body">
				<ul>
					<!-- 此部分是购物车商品部分,由javascript动态插入 -->
				</ul>
			</div>

			<footer>
				<a href="#0" class="checkout"><em>结算 - ¥<span>0</span></em></a>
			</footer>
		</div>
	</div>
</div>

在div.body元素里的ul列表默认是空的,它是用来显示购物车的商品列表信息的,它的大致结构如下,它是由Javascript动态插入的。

<div class="body">
	<ul>
		<li class="product">
			<div class="product-image">
				<a href="#0"><img src="img/pro.jpg" alt="placeholder"></a>
			</div>
 
			<div class="product-details">
				<h3><a href="#0">商品名称</a></h3>
 
				<span class="price">¥3999.99</span>
 
				<div class="actions">
					<a href="#0" class="delete-item">删除</a>
 
					<div class="quantity">
						<label for="cd-product-'+ productId +'">件数</label>
						<span class="select">
							<span class="select">x<i id="cd-product-'+proid+'">1</i></span>
						</span>
					</div>
				</div>
			</div>
		</li>
 
	</ul>
</div>

CSS部分在本文不展示了,大家可以下载源码中的Css/style.Css查看。

Javascript

本实例代码是基于jQuery,因此需要提前加载jQUery库文件。

当用户点击按钮.add-button后,触发函数addProduct(),将商品信息插入到 .body > ul中。

function addProduct(proname,proid,price,proimg) {
	var quantity = $("#cd-product-"+proid).text();
	var select='',productAdded='';
	
	if(quantity==''){
		var select = '<span class="select">x<i id="cd-product-'+proid+'">1</i></span>';
		var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="'+proimg+'" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">'+proname+'</a></h3><span class="price">¥'+price+'</span><div class="actions"><a href="#0" class="delete-item">删除</a><div class="quantity"><label for="cd-product-'+ proid +'">件数</label>'+select+'</div></div></div></li>');
		cartList.prepend(productAdded);
	}else{
		quantity = parseInt(quantity);
		$("#cd-product-"+proid).Html(quantity+1);
	}
}

在购物车中的操作,如删除商品、恢复商品以及更改商品件数会导致结算总金额变动,因此在函数updateCartCount()和updateCartTotal()中会实时触发相关变动。好了,具体的javascript代码请下载源码查看js/main.js。

本文地址:http://itbyc.com/web/javascript/11251.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1