Django3项目商城从0到1 【七】购物功能模块

原创

小旺v 2022-03-21 11:26:08 博主文章分类：Python ©著作权

文章标签 python django html 项目应用 jquery 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者小旺v的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录

购物车功能
shopcartView
模板文件shopcart.html

购物车功能

购物车页面分为3个功能区域：商品搜索功能、网站导航、商品的购买费用核算

shopcartView

在项目应用shopper的views.py定义视图函数shopcartView

@login_required(login_url='/shopper/login.html')
def shopcartView(request):
    title = '我的购物车'
    classContent = 'shopcarts'
    id = request.GET.get('id','')
    quantity = request.GET.get('quantity',1)
    userID = request.user.id
    if id:
        CartInfos.objects.update_or_create(commodityInfos_id=id,
                                           user_id=userID,quantity=quantity)
        return redirect('shopper:shopcart')
    getUserId = CartInfos.objects.filter(user_id=userID)
    commodityDcit = {x.commodityInfos_id: x.quantity for x in getUserId}
    commodityInfos = CommodityInfos.objects.filter(id__in=commodityDcit.keys())
    return render(request,'shopcart.html',locals())

模板文件shopcart.html

{% extends 'base.html' %}
{% load static %}
{% block content %}
    <div class="banner-bg w1200">
      <h3>夏季清仓</h3>
      <p>宝宝被子、宝宝衣服3折起</p>
    </div>
    <div class="cart w1200">
      <div class="cart-table-th">
        <div class="th th-chk">
          <div class="select-all">
            <div class="cart-checkbox">
              <input class="check-all check" id="allCheckked" type="checkbox" value="true">
            </div>
          <label>&nbsp;&nbsp;全选</label>
          </div>
        </div>
        <div class="th th-item">
          <div class="th-inner">
            商品
          </div>
        </div>
        <div class="th th-price">
          <div class="th-inner">
            单价
          </div>
        </div>
        <div class="th th-amount">
          <div class="th-inner">
            数量
          </div>
        </div>
        <div class="th th-sum">
          <div class="th-inner">
            小计
          </div>
        </div>
        <div class="th th-op">
          <div class="th-inner">
            操作
          </div>
        </div>  
      </div>
      <div class="OrderList">
        <div class="order-content" id="list-cont">


        {% for c in commodityInfos %}
          <ul class="item-content layui-clear">
            <li class="th th-chk">
              <div class="select-all">
                <div class="cart-checkbox">
                  <input class="CheckBoxShop check" id="" type="checkbox" num="all" name="select-all" value="true">
                </div>
              </div>
            </li>
            <li class="th th-item">
              <div class="item-cont">
                <a href="javascript:;"><img src="{{ c.img.url }}" alt=""></a>
                <div class="text">
                  <div class="title">{{ c.name }}</div>
                  <p><span>{{ c.sezes }}</span></p>
                </div>
              </div>
            </li>
            <li class="th th-price">
              <span class="th-su">{{ c.price }}</span>
            </li>
            <li class="th th-amount">
              <div class="box-btn layui-clear">
                <div class="less layui-btn">-</div>
                  {% for k, v in commodityDcit.items %}
                      {% if c.id == k %}
                        <input class="Quantity-input" value="{{ v }}" disabled="disabled">
                      {% endif %}
                  {% endfor %}
                <div class="add layui-btn">+</div>
              </div>
            </li>
            <li class="th th-sum">
              <span class="sum">0</span>
            </li>
            <li class="th th-op">
              <span class="dele-btn">删除</span>
              <p hidden="hidden">{{ c.id }}</p>
            </li>
          </ul>
          {% endfor %}


        </div>
      </div>
      <div class="FloatBarHolder layui-clear">
        <div class="th th-chk">
          <div class="select-all">
            <div class="cart-checkbox">
              <input class="check-all check" id="" name="select-all" type="checkbox"  value="true">
            </div>
            <label>&nbsp;&nbsp;已选<span class="Selected-pieces">0</span>件</label>
          </div>
        </div>
        <div class="th batch-deletion">
          <span class="batch-dele-btn">删除全部</span>
          <p hidden="hidden" id="userId">{{ user.id }}</p>
        </div>
        <div class="th Settlement">
          <button class="layui-btn" id="settlement">结算</button>
        </div>
        <div class="th total">
          <p>应付：<span class="pieces-total">0</span></p>
        </div>
      </div>
    </div>
{% endblock content %}

{% block script %}
  layui.config({
    base: '{% static 'js/' %}'
  }).use(['mm','jquery','element','car'],function(){
    var mm = layui.mm,$ = layui.$,element = layui.element,car = layui.car;
    car.init();

    $(function(){
    var counts = 0;
  $(".sum").each(function(i,e){
    var quantity = $('.th-su')[i].innerHTML
      var price = $('.Quantity-input')[i].value
      e.innerHTML = (quantity * price).toFixed(2)
      counts = counts*1 + e.innerHTML*1
  });
    $(".pieces-total").text("￥" + counts.toFixed(2))
    });

    $("#settlement").on('click',function(){
        var total = $(".pieces-total").text()
        window.location = "{% url 'shopper:pays' %}?total=" + total
    })
});

{% endblock script %}