购物车的清空、删除、数量变化

本文介绍了如何使用JavaScript实现购物车的清空、删除和数量修改功能。清空购物车是通过设置购物车数据的有效性为false来隐藏商品,数量变化则是通过修改商品数量。删除功能的实现结合了js脚本和BLL层方法,数量变更功能涉及到js的ajax请求及后台处理。所有代码示例仅用于学习,不得用于商业用途。
摘要由CSDN通过智能技术生成

表有汇PC端购物车清空、删除、修改功能实现

清空实际上就是将该用户的所有购物车数据的有效否改成false,从而不让商品显示出来;数量变化就是修改。

购物车页面:


对应的html代码:

<div class="boxwrap">
  <div class="cart_box">
    
    <!--购物车-->
    <h1 class="main_tit">
      <span><a οnclick="DeleteClear(this,'/','0');" href="javascript:;">清空购物车</a></span>
      我的购物车<strong>Shopping Cart</strong>
    </h1>
    <div class="cart_step">
      <ul>
        <li class="selected"><span>1</span>放进购物车</li>
        <li><span>2</span>填写订单信息</li>
        <li class="last"><span>3</span>支付/确定订单</li>
      </ul>
    </div>
    <div class="line20"></div>
    
    <table width="938" border="0" align="center" cellpadding="8" cellspacing="0" class="cart_table">
      <tbody><tr>
        <th width="64"></th>
        <th align="left">商品名称</th>
        <th width="110" align="center">颜色</th>
        <th width="80" align="center">积分</th>
        <th width="80" align="center">单价</th>
        <th width="80" align="center">数量</th>
        <!--<th width="80" align="center">优惠</th>-->
        <th width="100" align="center">金额小计</th>
        <th width="100" align="center">积分小计</th>
        <th width="50" align="center">操作</th>
      </tr>
      
      
      <tr>
        <td><a target="_blank" href="/goods/show-62.html"><img src="/upload/201505/04/201505041442488793.jpg" class="img"></a></td>
        <td><a target="_blank" href="/goods/show-62.html">韩国乐智迅时尚正品手表学生男表女表运动防水糖果色果冻表石英表</a></td>
          
        <!--颜色-->
        <td align="center">黑色<input name="goods_color" type="hidden" value="黑色"></td>

          <!--积分-->       
       <td align="center">
          
          +
          
          10
        </td>
        <!--价格-->
        <td align="center">¥2600.00<input name="goods_price" type="hidden" value="2600.00"></td><!-- value=用户价格 -->
        <!--数量-->
        <td align="center">
          <a href="javascript:;" class="reduce" title="减一" οnclick="CartComputNum(this, '/', '62', -1);">减一</a>
          <input type="text" name="goods_quantity" class="input" style="width:30px;text-align:center;ime-mode:Disabled;" value="1" οnblur="CartAmountTotal(this, '/', '62');" οnkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))">
          <a href="javascript:;" class="subjoin" title="加一" οnclick="CartComputNum(this,'/', '62', 1);">加一</a>
        </td>
        <!--优惠-->
        <!--<td align="center">¥<label name="discount_amount"></label></td>-->
        <!--金额小记-->                                                                       <!--   string转换成int   -->
        <td align="center"><font color="#FF0000" size="2">¥<label name="real_amount">2600</label></font></td>
        <td align="center">
     
  • 4
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现购物车删除数量功能需要以下步骤: 1. 在购物车页面中,为每个商品添加删除按钮,并为该按钮绑定一个事件处理程序。 2. 在事件处理程序中,获取该商品的数量和单价,计算出该商品的总价,并从购物车总价中减去该商品的总价。 3. 如果该商品数量为1,则直接从购物车删除该商品;否则,将该商品数量减1,并更新购物车中该商品的数量和总价。 4. 在后端,更新购物车的数据,并将更新后的购物车数据保存到 session 中。 下面是一个简单的删除数量功能的示例代码: 前端页面: ```html <table> <tr> <td>商品名称</td> <td>单价</td> <td>数量</td> <td>总价</td> <td>操作</td> </tr> <tr> <td>商品1</td> <td>10.00</td> <td> <button onclick="deleteQty(1)">-</button> <span id="qty-1">1</span> <button onclick="addQty(1)">+</button> </td> <td id="total-1">10.00</td> <td><button onclick="deleteItem(1)">删除</button></td> </tr> <tr> <td>商品2</td> <td>20.00</td> <td> <button onclick="deleteQty(2)">-</button> <span id="qty-2">1</span> <button onclick="addQty(2)">+</button> </td> <td id="total-2">20.00</td> <td><button onclick="deleteItem(2)">删除</button></td> </tr> </table> ``` JavaScript代码: ```javascript function deleteQty(itemId) { var qty = parseInt(document.getElementById('qty-' + itemId).innerText); if (qty > 1) { qty--; document.getElementById('qty-' + itemId).innerText = qty; var price = parseFloat(document.getElementById('price-' + itemId).innerText); var total = qty * price; document.getElementById('total-' + itemId).innerText = total.toFixed(2); var cartTotal = parseFloat(document.getElementById('cart-total').innerText); cartTotal -= price; document.getElementById('cart-total').innerText = cartTotal.toFixed(2); } } function addQty(itemId) { var qty = parseInt(document.getElementById('qty-' + itemId).innerText); qty++; document.getElementById('qty-' + itemId).innerText = qty; var price = parseFloat(document.getElementById('price-' + itemId).innerText); var total = qty * price; document.getElementById('total-' + itemId).innerText = total.toFixed(2); var cartTotal = parseFloat(document.getElementById('cart-total').innerText); cartTotal += price; document.getElementById('cart-total').innerText = cartTotal.toFixed(2); } function deleteItem(itemId) { var price = parseFloat(document.getElementById('price-' + itemId).innerText); var qty = parseInt(document.getElementById('qty-' + itemId).innerText); var total = parseFloat(document.getElementById('total-' + itemId).innerText); var cartTotal = parseFloat(document.getElementById('cart-total').innerText); cartTotal -= total; document.getElementById('cart-total').innerText = cartTotal.toFixed(2); var tr = document.getElementById('item-' + itemId); tr.parentNode.removeChild(tr); // 发送 AJAX 请求,将该商品从购物车删除 } // 页面加载时,从 session 中加载购物车数据 window.onload = function() { // 发送 AJAX 请求,获取购物车数据 // ... // 将数据填充到页面中 // ... } ``` 后端Java代码: ```java // 获取购物车数据 Cart cart = (Cart)session.getAttribute("cart"); // 更新购物车数据 cart.removeItem(itemId); // 从购物车删除该商品 session.setAttribute("cart", cart); // 保存更新后的购物车数据到 session 中 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值