在现代社会,网购已经成为了很多人的生活方式。而淘宝作为国内最大的电子商务平台之一,成为了很多人的必选之一。那么,在淘宝网购当中,购物车的存在是必不可少的,那么在这里就一起来分享一下如何实现淘宝购物车的代码编写吧!
一、购物车的功能
淘宝购物车是一个非常重要的界面,大多数的网购都离不开购物车。下面我们来看一下淘宝购物车的功能:
1.添加商品到购物车中;
2.查看购物车的商品及总金额;
3.删除购物车中的商品;
4.更改购物车中的商品数量;
5.提交购物车中的商品生成订单。
以上就是淘宝购物车的常见功能,那么接下来我们就来一步步实现淘宝购物车的代码编写吧!
二、购物车的代码实现
1.购物车的数据结构设计
对于一个购物车,最基本的就是存储商品信息和数量以及金额等。这里我们可以利用数组或者json对象来存储购物车中的商品信息。对于每个商品来说,我们需要记录其id,图片,名称,价格,数量等信息。
定义购物车数组:
```
var cartList = [];
```
定义购物车中的单个商品信息:
```
var product = {
id: '',
image: '',
name: '',
price: '',
num: '',
subtotal: ''
};
```
2.添加商品到购物车
商品添加到购物车当中,首先需要将商品信息加入到购物车数组当中。添加商品时需要判断商品是否已经存在于购物车当中了,如果已经存在的话,只需要将该商品数量加1即可。
商品加入购物车的函数如下:
```
function addToCart(product) {
var isExist = false;
for (var i = 0; i < cartList.length; i++) {
if (cartList[i].id == product.id) {
cartList[i].num++;
isExist = true;
}
}
if (!isExist) {
product.num = 1;
product.subtotal = product.price * product.num;
cartList.push(product);
}
}
```
3.删除购物车中的商品
在购物车中删除商品,我们首先需要找到该商品的位置,然后通过 splice 函数将其从数组中删除。
购物车中删除商品的函数如下:
```
function delFromCart(index) {
cartList.splice(index, 1);
}
```
4.更改购物车中的商品数量
更改购物车中的商品数量,我们只需要找到该商品的下标,然后更改该商品的数量和小计金额即可。
购物车中更改商品数量的函数如下:
```
function changeNum(index, num) {
cartList[index].num = num;
cartList[index].subtotal = cartList[index].price * num;
}
```
5.查看购物车的商品及总金额
购物车有了商品信息之后,一定要知道购物车中有哪些商品以及购物车中的总金额。通过遍历购物车数组,我们可以获取购物车中每个商品信息和购物车总金额。
```
function getTotal() {
var total = 0;
for (var i = 0; i < cartList.length; i++) {
total += cartList[i].subtotal;
}
return total;
}
function showCart() {
var cartHtml = '';
for (var i = 0; i < cartList.length; i++) {
cartHtml += '
cartHtml += '';
cartHtml += '
' + cartList[i].name + '
';cartHtml += '' + cartList[i].price + '元 x ' + cartList[i].num + '';
cartHtml += '
cartHtml += '-';
cartHtml += '';
cartHtml += '+';
cartHtml += '