购物车实现逻辑

本文详细介绍了购物车功能的实现逻辑,包括点击加入购物车时后台如何处理(如果已有商品则更新数量,否则新建订单),购物车页面的初始化、商品数量变更、商品选中状态对总价的影响以及删除商品的操作。前端使用AngularJS进行交互,通过ng-model和ng-click实现状态绑定和事件响应。

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

购物车页面如下:


购物车表cart_line主要存储了如下的几个字段(还包括一些其它的字段)

 
id 
 count :产品的数量
 product_product_id  :产品id
 product_hot_item_id :
 res_partner_id:用户id

1.  点击加入购物车时,向后台发请求,后台根据前台传递的参数从数据库对应的表中读取相应的信息,然后 插入到cart_line表中(如果购物车中已经存在该商品,则改变cart_line中对应表的数量,否则新创建一个订单插入到购物车中)

前台请求的js代码大致如下:
 

        var jsonp = {
                jsonrpc: "2.0",
                method: "call",
                params: params,
                id: undefined
            };


        $.ajax({
            type : 'POST',
            url : "/shop/cart_line/add",
            contentType : 'application/json',
            dataType : 'json',
            data :  JSON.stringify(jsonp),
            success : function(data){
                $.unblockUI();
                if (data.status == 200) {


                    var $q = $(".my_cart_quantity");
                    $q.parent().parent().removeClass("hidden");
                    var origin_quantity = parseInt($q.html());
                    var updated_quantity = product_quantity;
                    if (!isNaN(origin_quantity))
                        updated_quantity = (origin_quantity - 0) + (product_quantity - 0);
                    $q.html(updated_quantity).hide().fadeIn(600);


                }
            },
            error : function(data){
                alert('加入购物车失败!')
                $.unblockUI();
            },

        })

2.  购物车的页面

 (1) 购物车的页面初始化时会将cart_line中的每一行都读取出来然后显示在页面中,主要的js函数如下:

          $scope.getCart = function () {
			var jsonp = {
				jsonrpc: "2.0",
				method: "call",
				params: {},
				id: undefined
			};
			$http.post("/shop/cart_line/view", jsonp).success(function (data) {

				$scope.order = data;
				$scope.result = data.result;
				$scope.amount_total = 0;
				$scope.total_num=0;
				$scope.select_num=0;
				$scope.primaryType = [];
				if($scope.result.uid !== 3){
					data.result.items.forEach(function (value) {
						var o = {};
						var t = value.items;
						o.number = t.count;
						o.image_small = t.image_url;
						o.with_context = t.name_template;
						o.hot_item_id = t.product_hot_item_id;
						o.product_id = t.product_product_id;
						o.lst_price = t.price;
						o.attritubes = t.attritubes;
						if(t.product_hot_item_id)
							o.href = '/shop/product/' + t.product_hot_item_id;
						else
							o.href = '/ourShop/product/' + t.product_tmpl_id;
						o.item_status = true;

						//$scope.isfavo(o);//收藏功能,暂不使用

						$scope.primaryType.push(o);
						$scope.total_num += o.number;
						$scope.amount_total += o.lst_price * o.number;
						$scope.select_num += 1;

					});
					$scope.amount_total = $scope.amount_total.toFixed(2);
					$('.oe_cart').css('display','block');
				}
				else
					$('#oe_cart_public').css('display','block');
			});
		};

(2)改变购物车页面中的商品数量

       <div class="tc-amount">
		<span class="input-group-addon">
			<a ng-cli
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值