添加商品到购物车逻辑

news/2024/7/19 15:35:39 标签: js, javascript

1.先判断cookie中是否有购物车,没有就把对象存到数组中,再存到cookie中,
2.如果cookie中有购物车,就通过规格Id判断cookie中的对象数组是否存在此规格Id的对象,存在就购买数量加一,不存在就把当前规格Id的对象插入到cookie对象数组中
相关前端代码

// 由于cookie大小限制为4k,另外课程第一阶段是没有redis的,所以相关暂存性内容会存入到cookie中
					var shopcartCounts = app.getShopcartItemCounts();
					if (shopcartCounts >= 8) {
						alert("您购物车中的食物太多啦~请把它们带回家吧~!");
						return;
					}

					// 创建购物车对象
					var item = this.item;
					var itemImgList = this.itemImgList;
					var selectedSku = this.selectedSku;

					var tmpBuyCounts = this.buyCounts;
					tmpBuyCounts = parseInt(tmpBuyCounts);
					if (typeof (tmpBuyCounts) != "number") {
						alert("购买数量不能为非数字!");
						// tmpBuyCounts = 1;
						this.buyCounts = 1;
						return;
					}

					// 构建购物车商品对象
					var shopcartItem = new app.ShopcartItem(item.id,
						itemImgList[0].url,
						item.itemName,
						selectedSku.id,
						selectedSku.name,
						tmpBuyCounts,
						selectedSku.priceDiscount,
						selectedSku.priceNormal);
					// console.log(shopcartItem);
					// 添加商品至购物车list
					app.addItemToShopcart(shopcartItem);

					// 购物车应该在登录/注册的时候同步

					// 判断当前用户是否登录,如果登录,则把购物车数据发送至后端(后端需要合并已存在的商品)
					var userIsLogin = this.userIsLogin;
					if (userIsLogin) {
						var userInfo = this.userInfo;
						var serverUrl = app.serverUrl;
						axios.defaults.withCredentials = true;
						axios.post(
								serverUrl + '/shopcart/add?userId=' + userInfo.id,
								shopcartItem, {
									headers: {
										'headerUserId': userInfo.id,
										'headerUserToken': userInfo.userUniqueToken
									}
								})
							.then(res => {
								if (res.data.status == 200) {

								} else if (res.data.status == 500) {
									alert(res.data.msg);
								}
							});
					}

					alert("商品添加至购物车成功!");

添加到cookie中

 addItemToShopcart(pendingItem) {
        // 判断有没有购物车,如果没有购物车,则new 一个购物车list
        // 如果有购物车,则直接把shopcartItem丢进去
        var foodieShopcartCookie = this.getCookie("shopcart");
        var foodieShopcart = [];
        if (foodieShopcartCookie != null && foodieShopcartCookie != "" && foodieShopcartCookie != undefined) {
            var foodieShopcartStr = decodeURIComponent(foodieShopcartCookie);
            foodieShopcart = JSON.parse(foodieShopcartStr);

            // 如果不是对象,则重新复制为空数组
            if (typeof(foodieShopcart) != "object") {
                foodieShopcart = [];
            }

            var isHavingItem = false;
            // 如果添加的商品已经存在与购物车中,则购物车中已经存在的商品数量累加新增的
            for(var i = 0 ; i < foodieShopcart.length ; i ++) {
                var tmpItem = foodieShopcart[i];
                var specId = tmpItem.specId;
                if (specId == pendingItem.specId) {
                    isHavingItem = true;
                    var newCounts = tmpItem.buyCounts + pendingItem.buyCounts;
                    tmpItem.buyCounts = newCounts;
                    // 删除主图在数组中的位置
                    foodieShopcart.splice(i, 1, tmpItem);
                }
            }   
            if (!isHavingItem) {
                foodieShopcart.push(pendingItem);
            }
        } else {
            foodieShopcart.push(pendingItem);
        }

        this.setCookie("shopcart", JSON.stringify(foodieShopcart));
    }

3.获取访问路径的参数值

 getUrlParam(paramName) {
        var reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)");    //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);            //匹配目标参数
        if (r != null) return decodeURI(r[2]); return null;             //返回参数值
    }

http://www.niftyadmin.cn/n/740316.html

相关文章

java中枚举的创建和使用

创建 /*** Desc: 性别 枚举*/ public enum Sex {woman(0, "女"),man(1, "男"),secret(2, "保密");public final Integer type;public final String value;Sex(Integer type, String value) {this.type type;this.value value;} }使用 user.se…

各种分布总结

各种分布总结 – 潘登同学的数理统计笔记 文章目录各种分布总结 -- 潘登同学的数理统计笔记离散型随机变量分布0-1分布、伯努利分布二项分布(n重伯努利)超几何分布几何分布泊松分布连续型随机变量分布均匀分布指数分布正态分布卡方分布t分布F分布离散型随机变量分布 0-1分布、…

Mybatis代码生成工具

1.修改配置文件 generatorConfig.xml <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE generatorConfigurationPUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN""http://mybatis.org/dtd/mybatis-gener…

线性回归代码实现--Tensorflow部分

线性回归代码实现–Tensorflow部分–潘登同学的机器学习笔记 python版本–3.6 ; Tensorflow版本–1.15.0 ;编辑器–Pycharm 文章目录线性回归代码实现--Tensorflow部分--潘登同学的机器学习笔记简单线性回归导入必要的库和数据集加载计算图, 定义数据X和Y声明学习率, 批量大小…

Ridge和Lasso回归代码实现--Tensorflow部分

Ridge和Lasso回归代码实现–Tensorflow部分–潘登同学的机器学习笔记 python版本–3.6 ; Tensorflow版本–1.15.0 ;编辑器–Pycharm 文章目录Ridge和Lasso回归代码实现--Tensorflow部分--潘登同学的机器学习笔记Ridge回归代码结果Lasso回归代码结果ElasticNet代码结果Ridge回归…

Logistics回归、Softmax代码实现--Tensorflow部分

Logistics回归、Softmax代码实现–Tensorflow部分–潘登同学的机器学习笔记 python版本–3.6 ; Tensorflow版本–1.15.0 ;编辑器–Pycharm 文章目录Logistics回归、Softmax代码实现--Tensorflow部分--潘登同学的机器学习笔记导入必要的库和数据集声明学习率, 批量大小, 占位符…

SVM代码实现--Tensorflow部分

SVM代码实现–Tensorflow部分–潘登同学的机器学习笔记 python版本–3.6 ; Tensorflow版本–1.15.0 ;编辑器–Pycharm 文章目录SVM代码实现--Tensorflow部分--潘登同学的机器学习笔记软间隔SVM非线性SVM非线性SVM实现多分类软间隔SVM 任务&#xff1a; 把iris数据集的setosa…

读取properties资源文件装载在类中

1.类中的定义 Component ConfigurationProperties(prefix"wxpay") PropertySource("classpath:wxpay.properties") public class WXPayResource {private String qrcodeKey;private long qrcodeExpire;public String getQrcodeKey() {return qrcodeKey;}p…