Django学习笔记（四十八）:购物车模块全选反选、添加减少、删除时数量金额及页面的相应显示配合redis实现更新前后端的实现

本文链接：https://blog.csdn.net/xiaohuoche175/article/details/89338844

本文详细记录了使用Django实现购物车功能的过程，包括全选、反选商品，添加、减少商品数量，以及删除商品时如何实时更新购物车的总价和数量。利用Redis缓存来协调前端和后端的数据同步，确保用户体验流畅。

摘要由CSDN通过智能技术生成

{% extends '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="{% url 'order:place' %}">
    {% 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元素
        tot