django-购物车添加

商品详情页detail.html添加加入购物车按钮

<a href="javascript:;" sku_id="{{ sku.id }}" class="add_cart" id="add_cart">加入购物车</a>
....
<script>
$('#add_cart').click(function(){
            // 获取商品id和商品数量
            sku_id = $(this).attr('sku_id') // attr prop
            count = $('.num_show').val()
            csrf = $('input[name="csrfmiddlewaretoken"]').val()
            // 组织参数
            params = {'sku_id':sku_id, 'count':count, 'csrfmiddlewaretoken':csrf}
            // 发起ajax post请求，访问/cart/add, 传递参数:sku_id count
            $.post('/cart/add', params, function (data) {
                if (data.res == 5){
                    // 添加成功
                    $(".add_jump").css({'left':$add_y+80,'top':$add_x+10,'display':'block'})
                    $(".add_jump").stop().animate({
                        'left': $to_y+7,
                        'top': $to_x+7},
                        "fast", function() {
                            $(".add_jump").fadeOut('fast',function(){
                                // 重新设置用户购物车中商品的条目数
                                $('#show_count').html(data.total_count);
                            });
                    });
                }
                else{
                    // 添加失败
                    alert(data.errmsg)
                }
            })
        })
</script>

视图函数views.py中添加add功能

from django.shortcuts import render
from django.views.generic import View
from django.http import JsonResponse

from goods.models import GoodsSKU
from django_redis import get_redis_connection

# Create your views here.
# 添加商品到购物车:
# 1）请求方式，采用ajax post
# 如果涉及到数据的修改(新增，更新，删除), 采用post
# 如果只涉及到数据的获取，采用get
# 2) 传递参数: 商品id(sku_id) 商品数量(count)


# ajax发起的请求都在后台，在浏览器中看不到效果
# /cart/add
class CartAddView(View):
    '''购物车记录添加'''
    def post(self, request):
        '''购物车记录添加'''
        user = request.user
        if not user.is_authenticated():
            # 用户未登录
            return JsonResponse({'res':0, 'errmsg':'请先登录'})

        # 接收数据
        sku_id = request.POST.get('sku_id')
        count = request.POST.get('count')

        # 数据校验
        if not all([sku_id, count]):
            return JsonResponse({'res':1, 'errmsg':'数据不完整'})

        # 校验添加的商品数量
        try:
            count = int(count)
        except Exception as e:
            # 数目出错
            return JsonResponse({'res':2, 'errmsg':'商品数目出错'})

        # 校验商品是否存在
        try:
            sku = GoodsSKU.objects.get(id=sku_id)
        except GoodsSKU.DoesNotExist:
            # 商品不存在
            return JsonResponse({'res':3, 'errmsg':'商品不存在'})

        # 业务处理:添加购物车记录
        conn = get_redis_connection('default')
        cart_key = 'cart_%d'%user.id
        # 先尝试获取sku_id的值 -> hget cart_key 属性
        # 如果sku_id在hash中不存在，hget返回None
        cart_count = conn.hget(cart_key, sku_id)
        if cart_count:
            # 累加购物车中商品的数目
            count += int(cart_count)

        # 校验商品的库存
        if count > sku.stock:
            return JsonResponse({'res':4, 'errmsg':'商品库存不足'})

        # 设置hash中sku_id对应的值
        # hset->如果sku_id已经存在，更新数据， 如果sku_id不存在，添加数据
        conn.hset(cart_key, sku_id, count)

        # 计算用户购物车商品的条目数
        total_count = conn.hlen(cart_key)

        # 返回应答
        return JsonResponse({'res':5, 'total_count':total_count, 'message':'添加成功'})

购物车页面

跳转到购物车

base.html中

 <a href="{% url 'cart:show' %}" class="cart_name fl">我的购物车</a>

视图函数views.py添加CartInfoView视图功能

# /cart/
from utils.mixin import LoginRequiredMinxin  # 登录校验
class CartInfoView(LoginRequiredMinxin, View):
    '''购物车页面显示'''
    def get(self, request):
        '''显示'''
        # 获取登录的用户
        user = request.user
        # 获取用户购物车中商品的信息
        conn = get_redis_connection('default')
        cart_key = 'cart_%d'%user.id
        # {'商品id':商品数量, ...}
        cart_dict = conn.hgetall(cart_key)

        skus = []
        # 保存用户购物车中商品的总数目和总价格
        total_count = 0
        total_price = 0
        # 遍历获取商品的信息
        for sku_id, count in cart_dict.items():
            # 根据商品的id获取商品的信息
            sku = GoodsSKU.objects.get(id=sku_id)
            # 计算商品的小计
            amount = sku.price*int(count)
            # 动态给sku对象增加一个属性amount, 保存商品的小计
            sku.amount = amount
            # 动态给sku对象增加一个属性count, 保存购物车中对应商品的数量
            sku.count = count
            # 添加
            skus.append(sku)

            # 累加计算商品的总数目和总价格
            total_count += int(count)
            total_price += amount

        # 组织上下文
        context = {'total_count':total_count,
                   'total_price':total_price,
                   'skus':skus}

        # 使用模板
        return render(request, 'cart.html', context)

模板cart.html

{% extends 'layout/base_no_cart.html' %}
{% load staticfiles %}
{% block title %}天天生鲜-购物车{% endblock title %}
{% block page_title %}购物车{% endblock page_title %}
{% block body %}
    <div class="total_count">全部商品<em>{{ total_count }}</em>件</div>
    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col02">商品单位</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>
    <form method="post" action="">
    {% for sku in skus %}
    <ul class="cart_list_td clearfix">
        <li class="col01"><input type="checkbox" name="sku_ids" value="{{ sku.id }}" checked></li>
        <li class="col02"><img src="{{ sku.image.url }}"></li>
        <li class="col03">{{ sku.name }}<br><em>{{ sku.price }}元/{{ sku.unite }}</em></li>
        <li class="col04">{{ sku.unite }}</li>
        <li class="col05">{{ sku.price }}元</li>
        <li class="col06">
            <div class="num_add">
                <a href="javascript:;" class="add fl">+</a>
                <input type="text" sku_id="{{ sku.id }}" class="num_show fl" value="{{ sku.count }}">
                <a href="javascript:;" class="minus fl">-</a>
            </div>
        </li>
        <li class="col07">{{ sku.amount }}元</li>
        <li class="col08"><a href="javascript:;">删除</a></li>
    </ul>
    {% endfor %}

    <ul class="settlements">
        {% csrf_token %}
        <li class="col01"><input type="checkbox" name="" checked=""></li>
        <li class="col02">全选</li>
        <li class="col03">合计(不含运费)：<span>¥</span><em>{{ total_price }}</em><br>共计<b>{{ total_count }}</b>件商品</li>
        <li class="col04"><input type="submit" value="去结算"></li>
    </ul>
    </form>
{% endblock body %}

{% block bottomfiles %}
    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script>
    // 计算被选中的商品的总件数和总价格
    function update_page_info() {
        // 获取所有被选中的商品的checkbox
        // 获取所有被选中的商品所在的ul元素
        total_count = 0
        total_price = 0
        $('.cart_list_td').find(':checked').parents('ul').each(function () {
            // 获取商品的数目和小计
            count = $(this).find('.num_show').val()
            amount = $(this).children('.col07').text()
            // 累加计算商品的总件数和总价格
            count = parseInt(count)
            amount = parseFloat(amount)
            total_count += count
            total_price += amount
        })
        // 设置被选中的商品的总件数和总价格
        $('.settlements').find('em').text(total_price.toFixed(2))
        $('.settlements').find('b').text(total_count)
    }

    // 计算商品的小计
    function update_goods_amount(sku_ul) {
        // 获取商品的价格和数量
        count = sku_ul.find('.num_show').val()
        price = sku_ul.children('.col05').text()
        // 计算商品的小计
        amount = parseInt(count)*parseFloat(price)
        // 设置商品的小计
        sku_ul.children('.col07').text(amount.toFixed(2)+'元')
    }

    // 商品的全选和全不选
    $('.settlements').find(':checkbox').change(function () {
        // 获取全选的checkbox的选中状态
        is_checked = $(this).prop('checked')
        // 遍历商品的对应的checkbox，设置这些checkbox的选中状态和全选的checkbox保持一致
        $('.cart_list_td').find(':checkbox').each(function () {
            $(this).prop('checked', is_checked)
        })
        // 更新页面的信息
        update_page_info()
    })

    // 商品对应的checkbox状态发生改变时，设置全选checkbox的状态
    $('.cart_list_td').find(':checkbox').change(function () {
        // 获取页面上所有商品的数目
        all_len = $('.cart_list_td').length
        // 获取页面上被选中的商品的数目
        checked_len = $('.cart_list_td').find(':checked').length
        is_checked = true
        if (checked_len < all_len){
            is_checked = false
        }
        $('.settlements').find(':checkbox').prop('checked', is_checked)
        // 更新页面的信息
        update_page_info()
    })

    // 更新购物车中商品的数量
    error_update = false
    total = 0
    function update_remote_cart_info(sku_id, count) {
        csrf = $('input[name="csrfmiddlewaretoken"]').val()
        // 组织参数
        params = {'sku_id':sku_id, 'count':count, 'csrfmiddlewaretoken':csrf}
        // 设置ajax请求为同步
        $.ajaxSettings.async = false
        // 发起ajax post请求，访问/cart/update, 传递参数:sku_id count
        // 默认发起的ajax请求都是异步的，不会等回调函数执行
        $.post('/cart/update', params, function (data) {
            if (data.res == 5){
                // 更新成功
                error_update = false
                total = data.total_count
            }
            else{
                // 更新失败
                error_update = true
                alert(data.errmsg)
            }
        })
        // 设置ajax请求为异步
        $.ajaxSettings.async = true
    }

    // 购物车商品数量的增加
    $('.add').click(function () {
        // 获取商品的id和商品的数量
        sku_id = $(this).next().attr('sku_id')
        count = $(this).next().val()

        // 组织参数
        count = parseInt(count)+1

        // 更新购物车记录
        update_remote_cart_info(sku_id, count)

        // 判断更新是否成功
        if (error_update == false){
            // 重新设置商品的数目
            $(this).next().val(count)
            // 计算商品的小计
            update_goods_amount($(this).parents('ul'))
            // 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
            is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
            if (is_checked){
                // 更新页面信息
                update_page_info()
            }
            // 更新页面上购物车商品的总件数
            $('.total_count').children('em').text(total)
        }
    })

    // 购物车商品数量的减少
    $('.minus').click(function () {
        // 获取商品的id和商品的数量
        sku_id = $(this).prev().attr('sku_id')
        count = $(this).prev().val()

        // 校验参数
        count = parseInt(count)-1
        if (count <= 0){
            return
        }

        // 更新购物车中的记录
        update_remote_cart_info(sku_id, count)

        // 判断更新是否成功
        if (error_update == false){
            // 重新设置商品的数目
            $(this).prev().val(count)
            // 计算商品的小计
            update_goods_amount($(this).parents('ul'))
            // 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
            is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
            if (is_checked){
                // 更新页面信息
                update_page_info()
            }
            // 更新页面上购物车商品的总件数
            $('.total_count').children('em').text(total)
        }
    })

    // 记录用户输入之前商品的数量
    pre_count = 0
    $('.num_show').focus(function () {
        pre_count = $(this).val()
    })

    // 手动输入购物车中的商品数量
    $('.num_show').blur(function () {
        // 获取商品的id和商品的数量
        sku_id = $(this).attr('sku_id')
        count = $(this).val()

        // 校验参数
        if (isNaN(count) || count.trim().length==0 || parseInt(count)<=0){
            // 设置商品的数目为用户输入之前的数目
            $(this).val(pre_count)
            return
        }

        // 更新购物车中的记录
        count = parseInt(count)
        update_remote_cart_info(sku_id, count)

        // 判断更新是否成功
        if (error_update == false){
            // 重新设置商品的数目
            $(this).val(count)
            // 计算商品的小计
            update_goods_amount($(this).parents('ul'))
            // 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
            is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
            if (is_checked){
                // 更新页面信息
                update_page_info()
            }
            // 更新页面上购物车商品的总件数
            $('.total_count').children('em').text(total)
        }
        else{
            // 设置商品的数目为用户输入之前的数目
            $(this).val(pre_count)
        }
    })

    // 删除购物车中的记录
    $('.cart_list_td').children('.col08').children('a').click(function () {
        // 获取对应商品的id
        sku_id = $(this).parents('ul').find('.num_show').attr('sku_id')
        csrf = $('input[name="csrfmiddlewaretoken"]').val()
        // 组织参数
        params = {'sku_id':sku_id, 'csrfmiddlewaretoken':csrf}
        // 获取商品所在的ul元素
        sku_ul = $(this).parents('ul')
        // 发起ajax post请求， 访问/cart/delete, 传递参数:sku_id
        $.post('/cart/delete', params, function (data) {
            if (data.res == 3){
                // 删除成功，异常页面上商品所在的ul元素
                sku_ul.remove()
                // 获取sku_ul中商品的选中状态
                is_checked = sku_ul.find(':checkbox').prop('checked')
                if (is_checked){
                    // 更新页面信息
                    update_page_info()
                }
                // 重新设置页面上购物车中商品的总件数
                $('.total_count').children('em').text(data.total_count)
            }
            else{
                alert(data.errmsg)
            }
        })
    })

    </script>
{% endblock bottomfiles %}

视图函数views.py中添加购物车更新和删除功能

# 更新购物车记录
# 采用ajax post请求
# 前端需要传递的参数:商品id(sku_id) 更新的商品数量(count)
# /cart/update
class CartUpdateView(View):
    '''购物车记录更新'''
    def post(self, request):
        '''购物车记录更新'''
        user = request.user
        if not user.is_authenticated():
            # 用户未登录
            return JsonResponse({'res': 0, 'errmsg': '请先登录'})

        # 接收数据
        sku_id = request.POST.get('sku_id')
        count = request.POST.get('count')

        # 数据校验
        if not all([sku_id, count]):
            return JsonResponse({'res': 1, 'errmsg': '数据不完整'})

        # 校验添加的商品数量
        try:
            count = int(count)
        except Exception as e:
            # 数目出错
            return JsonResponse({'res': 2, 'errmsg': '商品数目出错'})

        # 校验商品是否存在
        try:
            sku = GoodsSKU.objects.get(id=sku_id)
        except GoodsSKU.DoesNotExist:
            # 商品不存在
            return JsonResponse({'res': 3, 'errmsg': '商品不存在'})

        # 业务处理:更新购物车记录
        conn = get_redis_connection('default')
        cart_key = 'cart_%d'%user.id

        # 校验商品的库存
        if count > sku.stock:
            return JsonResponse({'res':4, 'errmsg':'商品库存不足'})

        # 更新
        conn.hset(cart_key, sku_id, count)

        # 计算用户购物车中商品的总件数 {'1':5, '2':3}
        total_count = 0
        vals = conn.hvals(cart_key)
        for val in vals:
            total_count += int(val)

        # 返回应答
        return JsonResponse({'res':5, 'total_count':total_count, 'message':'更新成功'})


# 删除购物车记录
# 采用ajax post请求
# 前端需要传递的参数:商品的id(sku_id)
# /cart/delete
class CartDeleteView(View):
    '''购物车记录删除'''
    def post(self, request):
        '''购物车记录删除'''
        user = request.user
        if not user.is_authenticated():
            # 用户未登录
            return JsonResponse({'res': 0, 'errmsg': '请先登录'})

        # 接收参数
        sku_id = request.POST.get('sku_id')

        # 数据的校验
        if not sku_id:
            return JsonResponse({'res':1, 'errmsg':'无效的商品id'})

        # 校验商品是否存在
        try:
            sku = GoodsSKU.objects.get(id=sku_id)
        except GoodsSKU.DoesNotExist:
            # 商品不存在
            return JsonResponse({'res':2, 'errmsg':'商品不存在'})

        # 业务处理:删除购物车记录
        conn = get_redis_connection('default')
        cart_key = 'cart_%d'%user.id

        # 删除 hdel
        conn.hdel(cart_key, sku_id)

        # 计算用户购物车中商品的总件数 {'1':5, '2':3}
        total_count = 0
        vals = conn.hvals(cart_key)
        for val in vals:
            total_count += int(val)

        # 返回应答
        return JsonResponse({'res':3, 'total_count':total_count, 'message':'删除成功'})

 

来源：https://www.cnblogs.com/yifengs/p/11665093.html