添加商品到购物车

进入应用myadmin/models.py,添加购物车模型

1
2
3
4
5
6
# 购物车 模型
class Cart(models.Model):
  # id  用户 uid   商品 goodsid 数量 num
  uid = models.ForeignKey(to="Users", to_field="id",on_delete=models.CASCADE)
  goodsid = models.ForeignKey(to="Goods", to_field="id",on_delete=models.CASCADE)
  num = models.IntegerField()

进入pycharm的终端输入迁移语句

进入应用myhome/urls.py,并增加路径

1
2
3
from . views import CartViews
# 购物车 增 删 改 查
url(r'^cart/add/',CartViews.myhome_cart_add,name="myhome_cart_add"),

进入应用myhome/views,创建CartViews.py,并增加myhome_cart_add函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
from django.shortcuts import render
from django.http import HttpResponse,Http404,JsonResponse
from myadmin.models import Cates,Goods,Cart,Users

# 购物车的添加
def myhome_cart_add(request):
  try:
      # 执行购物车的商品添加
      data = request.GET.dict()
      data['goodsid'] = Goods.objects.get(id=data['goodsid'])
      data['uid'] = Users.objects.get(id=request.session.get('VipUser')['uid'])
      # 先检测当前的商品是否已经在当前用户的购物车中
      ob = Cart.objects.filter(uid=data['uid']).filter(goodsid=data['goodsid'])
      if ob.count():
          # 存在 获取当前购物车对象
          cart = Cart.objects.get(id=ob[0].id)
          cart.num += int(data['num'])
          cart.save()
      else:
          # 不存在
          # 存入 cart模型中
          ob = Cart(**data)
          ob.save()
      return JsonResponse({'code':0,'msg':'加入购物车成功'})
  except:
      pass
  return JsonResponse({'code':1,'msg':'加入购物车失败'})

进入templates/myhome/index/info.html,并增加加入购物车单击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 绑定加入购物车单击事件
$('#J_btnAddCart').click(function(){
  // 检测是否登录
  var isLogin = '{{ request.session.VipUser.uid }}'
  if(!isLogin){
    alert('请先登录');
    location.href="{% url 'myhome_login' %}";
  }

  // 获取 商品id  获取数量
  var data = {}
  data.goodsid = {{ goods.id }}
  data.num = $('#J_quantity').val()
  // 发送ajax.加入到购物车
  $.get('{% url 'myhome_cart_add' %}',data,function(data){
      alert(data['msg'])
  },'json')
})

购物车列表

进入应用myhome/views/CartViews.py,并增加myhome_cart_index函数

1
2
3
4
5
6
7
8
9
# 购物车的列表
def myhome_cart_index(request):
  # 获取当前用户的购物车数据
  VipUser = request.session.get('VipUser')
  data = Cart.objects.filter(uid=VipUser['uid'])
  # 分配数据
  context = {'cartdata':data}
  # 加载模板
  return render(request,'myhome/cart/index.html',context)

进入应用myhome/urls.py,并增加路径

1
url(r'^cart/index/', CartViews.myhome_cart_index, name="myhome_cart_index"),

进入templates/myhome,创建cart目录,并在此目录下创建index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
{% extends 'myhome/index.html' %}

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/cart-app.css">
{% endblock %}

{% block con %}
 <div class="mainbody cart" style="padding-top: 70px;">
    <div class="container">
      <!-- 购物车详情头 -->
      <table class="cart-header">
        <tbody>
          <tr>
            <td class="cart-col-select col-md-3 col-xs-3 col-sm-3" style="text-align: center;">
              <div class="cart-select-all">
                <span class="cart-select-title" >图片</span>
              </div>
            </td>
            <td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
            <td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
            <td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
            <td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
            <td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">操作</td>
          </tr>
        </tbody>
      </table><!-- 购物车详情头 E-->

      <!-- 购物清单信息列表 -->
      <div class="cart-merchant-list">
        <div class="cart-merchant">
          <table class="cart-merchant-body">
            <tbody>
            {% for v in cartdata %}
              <tr class="cart-product">
                <td class="cart-col-select col-md-3 col-xs-4 col-sm-4">
                  <div class="mz-checkbox" cartid="{{ v.id }}"></div>
                  <a href="meilanx.html" class="cart-product-link" target="_blank">
                    <img src="{{ v.goodsid.pic_url }}" class="cart-product-img" alt="魅蓝 X">
                  </a>
                </td>
                <td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
                  <a href="meilanx.html" class="cart-product-link" target="_blank">
                    <p>{{ v.goodsid.goodsname }}</p>
                    <span class="cart-product-desc">{{ v.goodsid.title }}</span>
                  </a>

                </td>
                <td class="cart-col-price col-md-2 hidden-xs hidden-sm">
                  <p>
                    <span class="cart-product-price">{{ v.goodsid.price }}</span>
                  </p>
                </td>
                <td class="cart-col-number col-md-2 hidden-xs hidden-sm">
                  <div class="cart-product-number-adder">
                    <p class="cart-product-number-max show"></p>
                    <div class="mz-adder">
                      <button class="mz-adder-subtract"></button>
                      <div class="mz-adder-num"><input price="{{ v.goodsid.price }}" cartid="{{ v.id }}" class="mz-adder-input" value="{{ v.num }}" type="text" readonly="readonly"></div>
                      <button class="mz-adder-add"></button>
                    </div>
                  </div>
                </td>
                <td class="cart-col-total col-md-1 hidden-xs hidden-sm">
                  <span class="cart-product-price total">{%  widthratio v.goodsid.price 1 v.num  %}.00</span>
                </td>
                <td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">
                  <div class="cart-product-remove" cartid="{{ v.id }}">
                    <span class="glyphicon glyphicon-remove"></span>
                  </div>
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
        </div>
      </div><!-- 购物清单信息列表 E-->
    </div>
    <!-- 结算详情 -->
    <div class="cart-footer" id="cartFooter">
      <div class="container">
         <div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
           <div class="cart-select-all cart-col-select" data-mdesc="全选按钮" data-mtype="store_cart_all">
            <div class="mz-checkbox JSelectAll"></div>
            <span class="cart-select-title">全选</span>
           </div>
           <!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
           <span class="cart-footer-count">
            共
            <span class="cart-footer-num" id="totalCount">0</span>
            件商品
           </span>
        </div>
        <div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
          <span class="cart-footer-sum">
            <span class="cart-footer-text">已优惠</span>
            <span class="cart-footer-num red" id="totalDiscount">0.00</span>
            <span class="cart-footer-text">元， 合计(不含运费)：</span>
            <span class="cart-footer-total" id="totalPrice">0.00</span>
          </span>
          <div class="mz-btn success" id="cartSubmit">去结算</div>
        </div>
      </div>
    </div><!-- 结算详情 E-->
  </div>
<!-- 主内容区域 E-->
{% endblock %}

进入templates/myhome/index.html,修改我的订单和购物车图标的链接

购物车列表的商品删除

进入应用myhome/views/CartViews.py,并增加myhome_cart_del函数

1
2
3
4
5
6
7
8
9
10
11
12
def myhome_cart_del(request):
  try:
      # cartid
      cartid = request.GET.get('cartid')
      # 获取当前购物车商品对象
      ob = Cart.objects.get(id=cartid)
      # 执行删除
      ob.delete()
      return JsonResponse({'code':0,'msg':'删除成功'})
  except:
      pass
  return JsonResponse({'code':1,'msg':'删除失败'})

进入应用myhome/urls.py,并增加路径

1
url(r'^cart/del/', CartViews.myhome_cart_del, name="myhome_cart_del"),

进入模板templates/myhome/cart/index.html,并增加js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% block js %}
<script type="text/javascript">
    //回顶部
    backTop();
    //全选
    allSelect();
    topLogin();

    // 购物车商品的删除
    $('.cart-product-remove').click(function(){
      var cartid = $(this).attr('cartid')
      var dsd = $(this).parents('tr')
      // 发送ajax请求,删除数据
      $.get('{% url 'myhome_cart_del' %}',{'cartid':cartid},function(data){
        alert(data.msg);
        TotalNum();
        dsd.remove();
      },'json')
    })
</script>
{% endblock %}

购物车商品数量的修改

进入模板templates/myhome/cart/index.html,并增加js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{% block js %}
<script type="text/javascript">
  // 数量更新
    $('.mz-adder-subtract').click(function(){
      // 数量减少
      var inp = $(this).parents('.mz-adder').find('.mz-adder-input');
      var cartid = inp.attr('cartid');
      var num = Number(inp.val());
      if(num <= 1){
        num = 1
        return;
      }
      num --
      // 调用函数,修改数据
      RequestCartNum(cartid,num)
      inp.val(num)
      var price = inp.attr('price')
      var total =  toDecimal2(num * price)
      $(this).parents('tr').find('.total').text(total)
      TotalNum()
    })
    $('.mz-adder-add').click(function(){
      // 数量增加
      var inp = $(this).parents('.mz-adder').find('.mz-adder-input')
      var cartid = inp.attr('cartid')
      var num = Number(inp.val())
      num ++
      // 调用函数,修改数据
      RequestCartNum(cartid,num)
      inp.val(num)
      var price = inp.attr('price')
      var total = toDecimal2(num * price)
      $(this).parents('tr').find('.total').text(total)
      TotalNum()

    })

    // 封装函数,发送ajax请求,修改购物车商品的购买数量
    function RequestCartNum(cartid,num){
      $.get('{% url 'myhome_cart_edit' %}',{'cartid':cartid,'num':num},function(data){
        alert(data.msg)
        TotalNum();
      },'json')
    }
</script>
{% endblock %}

进入应用myhome/views/CartViews.py,并增加myhome_cart_edit函数

1
2
3
4
5
6
7
8
9
10
11
12
def myhome_cart_edit(request):
  try:
      cartid = request.GET.get('cartid')
      num = request.GET.get('num')
      # 根据id获取购物车对象
      ob = Cart.objects.get(id=cartid)
      ob.num = num
      ob.save()
      return JsonResponse({'code':0,'msg':'修改成功'})
  except:
      pass
  return JsonResponse({'code':1,'msg':'修改失败'})

进入myadmin/templatetags/pagetag.py,添加自定义乘法运算标签

1
2
3
4
5
# 自定义乘法运算标签
@register.simple_tag
def cheng(var1,var2):
  res = float(var1) * float(var2)
  return '%.2f'%res

总价和总数

进入模板templates/myhome/cart/index.html,并增加js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// 计算总价和购买总数的方法
function TotalNum(){
  var cartids = []
  var TotalPrice = 0
  var CountNum = 0
  // 获取页面中所有的选框
  $('table').eq(1).find('.checked').each(function(){
    // 获取当前选中的元素的 小计价格 和数量
    TotalPrice += Number($(this).parents('tr').find('.total').text())
    CountNum += Number($(this).parents('tr').find('#adder-input').val())
    cartids.push( $(this).attr('cartid'))
  })
  $('#totalCount').text(CountNum)
  $('#totalPrice').text(returnFloat(TotalPrice))
  return cartids
}

 //选择框操作
function allSelect(){
    var aee = false;
  // 全选
  $('.JSelectAll').click(function(){
    if(aee==false){
      $(this).addClass('checked');
      $('.cart-col-select .mz-checkbox').addClass('checked');
      aee = true;
    }else if(aee==true){
      $(this).removeClass('checked');
      $('.cart-col-select .mz-checkbox').removeClass('checked');
      aee = false;
    }
    TotalNum()
  })

  //单选
  $('.cart-col-select .mz-checkbox').click(function(){
    var statu = $(this).hasClass('checked');
    if(statu){
      $(this).removeClass('checked');
      $('.SelectAll').removeClass('checked');
      $('.JSelectAll').removeClass('checked');
      aee = false;
    }else{
      $(this).addClass('checked');
      var abb = true;
      $('.cart-col-select .mz-checkbox').each(function () {
          if (!$(this).hasClass('checked')){
              abb = false;
          }
      })
      if(abb){
          $('.SelectAll').addClass('checked');
          $('.JSelectAll').addClass('checked');
          aee=true;
      }
    }
    TotalNum()
  })
}

function returnFloat(value){
     var value=Math.round(parseFloat(value)*100)/100;
     var xsd=value.toString().split(".");
     if(xsd.length==1){
     value=value.toString()+".00";
     return value;
     }
     if(xsd.length>1){
     if(xsd[1].length<2){
     value=value.toString()+"0";
     }
     return value;
     }
}