購物車增加、減少數量JS

本文轉載自查看原文 2016-06-17 16:55 2910 html5與移動頁面的效果實例

第一種方式：ecshop的購物車

HTML代碼為：

 1 <div id="content">
 2      <div id="batchdelcart">
 3           <form id="formCart" name="formCart" method="post" action="flow.php">
 4           <table width="100%" border="0" cellpadding="0" cellspacing="0" class="top">
 5             <thead>
 6               <tr>
 7                 <th width="3%">&nbsp;</th>
 8                 <th class="name" width="47.3%"> 商品名稱 </th>
 9                 <th class="price" width="13%"> 本店價 </th>
10                 <th class="qty" width="9%"> 購買數量 </th>
11                 <th class="subtotal" width="17%"> 小計 </th>
12                 <th class="operate" align="left"> 操作 </th>
13               </tr>
14             </thead>
15           </table>
16           <div class="Buygoods">
17                <div style="width:95%; margin:0 auto;">
18                     <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" id="vancl-general-product">
19                     <tbody name="vancl-general-product">
20                       <tr>
21                           <td class="image bd-bottom" align="right" width="9%"><a target="_blank" href="goods.php?id=54" title="潮流斑馬貼花韓版長款時尚衛衣"><img alt="潮流斑馬貼花韓版長款時尚衛衣" src="images/54_thumb_G_1414114371790.jpg"></a></td>
22                           <td class="name bd-bottom" width="41%"><a target="_blank" href="goods.php?id=54" title="潮流斑馬貼花韓版長款時尚衛衣">潮流斑馬貼花韓版長款時尚衛衣</a><p></p></td>
23                           <td class="price bd-bottom" align="center" width="14%"> ￥119.00 </td>
24                           <td class="qty bd-bottom" align="center" width="9.6%">
25                               <div class="sl">
26                                    <a class="track decrease-disable" onclick="flowClickCartNum(278,-1);" href="javascript:void(0);">-</a>
27                                    <input name="itemNumBox" data-goodsid="278" id="goods_number_278" value="1" type="text" class="modify-product-qty">
28                                    <a class="increase track" onclick="flowClickCartNum(278,+1);" href="javascript:void(0);">+</a>
29                               </div>
30                           </td>
31                           <td class="subtotal bd-bottom" id="total_items_278" align="center" width="18%">￥238.00</td>
32                           <td class="operate bd-bottom"><a href="javascript:if (confirm('您確實要把該商品移出購物車嗎？')) location.href='flow.php?step=drop_goods&amp;id=278';" class="del track">刪除</a></td>
33                       </tr>
34                     </tbody>
35                     </table>
36                </div>
37                <div id="bar-summary" class="bar-summary cl">
38                     <input type="button" value="" class="bnt_blue_q" onclick="location.href='flow.php?step=clear'" title="清空購物車">
39                     <div class="bar-summaryR">
40                          <div class="summary">數量總計：<span><em id="totalNumber">2</em>件</span>產品金額總計(不含運費)：<span class="amount" id="amount">￥238.00</span> </div>
41                          <div class="btn-panel"><a class="checkout track" href="flow.php?step=checkout" id="sp_cart_mycar_goPay"> 去結算&gt;&gt;</a> <input type="hidden" name="step" value="update_cart"></div>
42                     </div>
43                </div>
44                <span class="blank20"></span>
45           </div>
46           </form>
47      </div>
48 </div>

JS代碼為：

 1 function flowClickCartNum(a,b){
 2     var b=parseInt(b);
 3     var c=$('#goods_number_'+a);
 4     var d=parseInt(c.val());
 5     if(d < 1 || $.isNumeric(d)){//jQuery.isNumeric ()檢查傳進的參數是否是數字或者可否轉換為數字
 6         alert('請輸入正確的商品數量');
 7         e=1;
 8     }
 9     if(b == -1){
10         if(d == 1){
11             alert('購買數量不能小於1件');
12         }else{
13             e=d + b;
14         }
15     }else{
16         e=d + b;
17     }
18     flow_change_goods_number(a,e);
19 }
20 function flow_change_goods_number(rec_id, goods_number){     
21     Ajax.call('flow.php?step=ajax_update_cart', 'rec_id=' + rec_id +'&goods_number=' + goods_number, flow_change_goods_number_response, 'POST','JSON');
22 }
23 function flow_change_goods_number_response(result){
24     if(result.error == 0){
25         var rec_id = result.rec_id;
26         $('#goods_number_'+rec_id).val(result.goods_number);//更新數量
27         $('#total_items_'+rec_id).html(result.goods_subtotal);//更新小計
28         $('#amount').html(result.total_price);//更新合計
29         $('#totalNumber').html(result.total_goods_count);//更新購物車數量
30     }else if(result.message !=''){
31         alert(result.message);
32     }
33 }
34 $(function(){
35     $('.sl input').blur(function(){
36         var a=$(this).attr('data-goodsid');
37         var quantity=pareseInt($(this).val());
38         flow_change_goods_number(a,quantity);
39     })
40 })

異步加載圖

本地文件為：desk/plug/Cart/cart_one.html

線上效果為：ecshop網站都可以

第二種方式：upin購物車

HTML代碼為：

<div class="cart_main">
          <div class="cart_good" data-cartid="11" data-marketprice="223.00" data-goodsid="5" sel="1" data-maxbuy="0" data-stock="96">
               <div class="ico"><i class="fa fa-check-circle" style="color:#fd650f;"></i></div>
               <div class="img" onclick="location.href='http://upin.chenhua.cc/app/index.php?i=4&amp;c=entry&amp;p=detail&amp;do=shop&amp;m=ewei_shop&amp;id=5'"><img src="http://upin.chenhua.cc/attachment/images/4/2016/07/Vyzxer0LRUw8rgE0bASwwsY0GZx033.jpg"></div>
                <div class="info">
                      <div class="name" onclick="location.href='http://upin.chenhua.cc/app/index.php?i=4&amp;c=entry&amp;p=detail&amp;do=shop&amp;m=ewei_shop&amp;id=5'">羅生菜我餓肌肉</div>
                      <div class="other">
                           <div class="price">￥223.00</div>  
                           <div class="price1"><span class="line">333KG</span></div>  
                           <div class="num"><div class="leftnav">-</div><input type="text" class="shownum" value="1"><div class="rightnav">+</div></div>
                      </div>
                </div>
          </div>
          <div class="cart_good" data-cartid="11" data-marketprice="223.00" data-goodsid="5" sel="1" data-maxbuy="0" data-stock="96">
               <div class="ico"><i class="fa fa-check-circle" style="color:#fd650f;"></i></div>
               <div class="img" onclick="location.href='http://upin.chenhua.cc/app/index.php?i=4&amp;c=entry&amp;p=detail&amp;do=shop&amp;m=ewei_shop&amp;id=5'"><img src="http://upin.chenhua.cc/attachment/images/4/2016/07/Vyzxer0LRUw8rgE0bASwwsY0GZx033.jpg"></div>
                <div class="info">
                      <div class="name" onclick="location.href='http://upin.chenhua.cc/app/index.php?i=4&amp;c=entry&amp;p=detail&amp;do=shop&amp;m=ewei_shop&amp;id=5'">羅生菜我餓肌肉</div>
                      <div class="other">
                           <div class="price">￥223.00</div>  
                           <div class="price1"><span class="line">333KG</span></div>  
                           <div class="num"><div class="leftnav">-</div><input type="text" class="shownum" value="1"><div class="rightnav">+</div></div>
                      </div>
                </div>
          </div>
          <div class="cart_good" data-cartid="11" data-marketprice="223.00" data-goodsid="5" sel="1" data-maxbuy="0" data-stock="96">
               <div class="ico"><i class="fa fa-check-circle" style="color:#fd650f;"></i></div>
               <div class="img" onclick="location.href='http://upin.chenhua.cc/app/index.php?i=4&amp;c=entry&amp;p=detail&amp;do=shop&amp;m=ewei_shop&amp;id=5'"><img src="http://upin.chenhua.cc/attachment/images/4/2016/07/Vyzxer0LRUw8rgE0bASwwsY0GZx033.jpg"></div>
                <div class="info">
                      <div class="name" onclick="location.href='http://upin.chenhua.cc/app/index.php?i=4&amp;c=entry&amp;p=detail&amp;do=shop&amp;m=ewei_shop&amp;id=5'">羅生菜我餓肌肉</div>
                      <div class="other">
                           <div class="price">￥223.00</div>  
                           <div class="price1"><span class="line">333KG</span></div>  
                           <div class="num"><div class="leftnav">-</div><input type="text" class="shownum" value="5"><div class="rightnav">+</div></div>
                      </div>
                </div>
          </div>
     </div>
     <!--結算 S-->
     <div class="cart_pay">
          <div class="all" sel="1"><i class="fa fa-check-circle" style="color:#fd671a;"></i> <span class="t">全選</span></div>
        <div class="paysub ">結算(<span class="total">3</span>)</div>
        <div class="text">合計：<span>￥<span class="totalprice">584.00</span></span><br><span style="color:#999; font-size:14px;">不含運費</span></div>
    </div>
     <!--結算 E-->

JS代碼為：

function isInt(str) {
  return  /^[-\+]?\d+$/.test($.trim(str));
}
function calcprice(){
  var total=0;
  var totalprice=0;
  $('.cart_good').each(function(){
    var $this=$(this);
    var sel=$this.attr('sel')=='1';
    if(sel){
      var num=$this.find('.shownum').val();
      if(isNaN(num)){
        num=1;
      }
      $this.find('.shownum').val(num);
      total+=parseInt(num);
      totalprice+=parseFloat($this.find('.shownum').val())*parseFloat($this.data('marketprice'));
    }
  });
  $('.total').html(total);
  $('.totalprice').html(totalprice.toFixed(2));  //toFixed() 方法可把 Number 四舍五入為指定小數位數的數字。
  return total;
}
require(['tpl', 'core'], function(tpl, core) {
   //數量減法
   $('.leftnav').click(function(){
      var input=$(this).next();
      if(!isInt(input.val())){   //isint方法來判斷文本框中讀入的是不是數字
        input.val('1');
      }
      var num=parseInt(input.val());
      num--;
      if(num <=0){
        num=1;
      }
      input.val(num);
      //ajaxpost到服務端
      //http://upin.chenhua.cc/app/index.php?i=4&c=entry&do=shop&m=ewei_shop&p=cart&op=updatenum&id=12&goodsid=4&total=3
      //core.json('shop/cart',{'op':'updatenum',id:$(this).closest('.cart_good').data('cartid'),goodsid:$(this).closest('.cart_good').data('goodsid'), total:num},null,false,true);
      calcprice();
   })
   //數量增加
   $('.rightnav').click(function(){
     var maxbuy=parseInt($(this).closest('.cart_good').data('maxbuy'));
     var stock=parseInt($(this).closest('.cart_good').data('stock'));
     var input=$(this).prev();
     if(!isInt(input.val())){
       input.val(1);
     }
     var num=parseInt(input.val());
     num++;
     if(num > maxbuy && maxbuy > 0){
      num=maxbuy;
      alert('您最多購買'+maxbuy+'件');
     }else if(stock !='-1' && stock !='' && num > stock){
      num=stock;
      alert('您最多購買'+stock+'件');
     }
     input.val(num);
    // core.json('shop/cart',{'op':'updatenum',id:$(this).closest('.cart_good').data('cartid'),goodsid:$(this).closest('.cart_good').data('goodsid'), total:num},null,false,true);
     calcprice();
   })
})

異步加在圖

本地文件為：svn/app/ewei_shop/cart.html

線上效果為：優品直送項目購物車代碼為准

第三種方式：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js 購物車的實現 js 購物車中，多件商品數量加減效果修改，實現總價隨數量加減改變 js操作當當購物車頁面 js添加購物車效果 js寫的簡單購物車簡單的js購物車結算靜態頁面購物車數量加減功能實現 jQuery實現購物車物品數量的加減購物車案例 JavaWeb購物車