DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 購物車前端開發(jQuery和bootstrap3)
購物車前端開發(jQuery和bootstrap3)
編輯:關於JavaScript     

作為一名不在軟件公司工作的軟件工程師,不僅要會寫後台代碼(PHP/JAVA/SQL...),還是兼顧前端工程師的工作(html/javascript/css...)。下面就來分享一個在實際工作項目中使用到的購物車的前端開發。

這裡分享的僅僅是針對購物車的操作(產品數量的增加減少,刪除購物車中產品項),假設購物車中已經放有若干產品。閒話少說,先上兩張效果圖。

HTML代碼如下:這裡使用到了JQuery1.11和bootstrap3 。

<!DOCTYPE html>
<html>
<HEADER>
 <meta charset="UTF-8">
 <title>Shopping Cart</title>
 <script type="text/javascript" src="jquery-1.11.min.js"></script>
 <script type="text/javascript" src="demo.js"></script>
 <link href="bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
</HEADER>
<body class="container">
 <table id="cartTable" class="cart table table-condensed" >
 <thead>
 <tr>
 <th style="width:60px;"><label><input class="check-all check" type="checkbox" /> 全選</label></th>
 <th><label>產品型號</label></th>
 <th style="width:100px;"><label>單價</label></th>
 <th style="width:120px;"><label>數量</label></th>
 <th style="width:100px;"><label>小計</label></th>
 <th style="width:40px;"><label>操作</label></th> 
 </tr>
 </thead>
 <tbody>
 <tr >
 <td ><input class="check-one check" type="checkbox" /> </td>
 <td class="goods">
  <label>Item 1</label>
 </td>
 <td class="number small-bold-red"><span>76.55</span></td>
 <td class="input-group">
  <span class="input-group-addon minus">-</span>
  <input type="text" class="number form-control input-sm" value="10" />
  <span class="input-group-addon plus">+</span>
 </td>
 <td class="subtotal number small-bold-red">101</td>
 <td class="operation"><span class="delete btn btn-xs btn-primary">刪除</span></td>
 </tr>
 <tr>
 <td ><input class="check-one check" type="checkbox" /></td>
 <td class="goods">
  <label>Item 2</label>
 </td>
 <td class="number small-bold-red"><span>1100</span></td>
 <td class="input-group">
  <span class="input-group-addon minus">-</span>
  <input type="text" class="number form-control input-sm" value="1" />
  <span class="input-group-addon plus">+</span>
 </td>
 <td class="subtotal number small-bold-red">352</td>
 <td class="operation"><span class="delete btn btn-xs btn-primary">刪除</span></td>
 </tr>
 <tr>
 <td ><input class="check-one check" type="checkbox" /></td>
 <td class="goods">
  <label>Item 3</label>
 </td>
 <td class="number small-bold-red"><span>1200</span></td>
 <td class="input-group">
  <span class="input-group-addon minus">-</span>
  <input type="text" class="number form-control input-sm" value="1" />
  <span class="input-group-addon plus">+</span>
 </td>
 <td class="subtotal number small-bold-red">9876.55</td>
 <td class="operation"><span class="delete btn btn-xs btn-primary">刪除</span></td>
 </tr>
 <tr>
 <td ><input class="check-one check" type="checkbox" /></td>
 <td class="goods">
  <label>Item 4</label>
 </td>
 <td class="number small-bold-red"><span>1400</span></td>
 <td class="input-group">
  <span class="input-group-addon minus">-</span>
  <input type="text" class="number form-control input-sm" value="1" />
  <span class="input-group-addon plus">+</span>
 </td>
 <td class="subtotal number small-bold-red">9876.55</td>
 <td class="operation"><span class="delete btn btn-xs btn-primary">刪除</span></td>
 </tr>
 </tbody>
 </table>

 <div class="row">
 <div class="col-md-12 col-lg-12 col-sm-12">
 <div style="border-top:1px solid gray;padding:4px 10px;">
 <div style="margin-left:20px;" class="pull-right total">
  <label>金額合計:<span class="currency">¥</span><span id="priceTotal" class="large-bold-red">0.00</span></label>
 </div>
 <div class="pull-right">
  <label>您選擇了<span id="itemCount" class="large-bold-red" style="margin:0 4px;"></span>種產品型號,共計<span id="qtyCount" class="large-bold-red" style="margin:0 4px;"></span>件</label>
 </div>
 <div class="pull-right selected" id="selected">
  <span id="selectedTotal"></span>
 </div>
 </div>
 </div>
 </div>
</body>
</html>

HTML代碼主要分為兩大塊,TABLE部分用於顯示購物車內的產品明細,在其後使用了一個DIV用於顯示匯總信息。這裡使用了一個技巧需要特別說明一下:

1.為元素指定一些虛假的class名稱(樣式表中不存在的樣式名稱),方便使用JQuery的過濾器找到特定元素。如上述代碼中的樣式check-all / check-one / cart / subtotal

Javascript代碼需要實現以下幾個功能:

1.產品全選功能

2.計算產品小計(即產品單價 * 購買數量)

3.用戶選中購物車中的某個產品型號,需要重新計算頁面下方的匯總信息,包括選中的產品型號種類、產品數量小計和金額小計

4.用戶刪除購物車中某個產品型號,或是修改購買數量時,需要重新計算頁面下方的匯總信息。

下面就以上功能一一說明:

1.產品全選功能

$(cartTable).find(":checkbox").click(function() {
  //全選框單擊
  if ($(this).hasClass("check-all")) {
   var checked = $(this).prop("checked");
   $(cartTable).find(".check-one").prop("checked", checked);
  }

  //如果手工一個一個的點選了所有勾選框,需要自動將“全選”勾上或是取消
  var items = cartTable.find("tr:gt(0)");
  $(cartTable).find(".check-all").prop("checked", items.find(":checkbox:checked").length == items.length);

  getTotal();
 });

為購物車表格中的每一樣選擇框綁定單擊事件。在這個事件中,需要判斷出用戶點擊的是“全選”的選擇框,還是每一個產品自己的選擇框,那麼這裡就又一次用到了上面提到的虛假樣式。這裡需要特別說明的是JQuery讀取元素的屬性通常是使用attr()方法,但是對於checkbox來說,使用attr()無法正確讀取到其checked屬性值。正確用法是使用prop()方法來讀取。

如果用戶點擊了“全選”,那麼所有的選擇框都應該被選中,這一點很容易考慮到。但是有一個細節需要注意,就是在用戶手工一個一個的將所有產品選中時,程序應該將“全選”框也設為選中狀態,或是在全部選中的狀態下,用戶手工取消了某一個產品的選中狀態,那麼程序也應該將“全選”框設為未選中狀態。

最後一行代碼是在用戶選擇完畢後,需要重新計算購物車的匯總信息。

2.產品小計功能代碼:

 /*
  * 計算購物車中每一個產品行的金額小計
  *
  * 參數 row 購物車表格中的行元素tr
  *
  */
 function getSubTotal(row) {
 var price = parseFloat($(row).find("span:first").text()); //獲取單價
  var qty = parseInt($(row).find(":text").val()); //獲取數量
  var result = price * qty; //計算金額小計
  $(row).find(".subtotal").text(result.toFixed(2)); //將計算好的金額小計寫入到“小計”欄位中
 };

這個函數需要傳入一個參數,即用於顯示購物車內容的tr元素。
在顯示購物車內容的表格中,每一個產品單價使用一個span元素包裹,且是這一行中的第一個span元素,使用JQuery過濾器$(row).find("span:first")即可以定位到產品單價,使用其text函數讀取內容,並使用parseFloat將讀取到的字符串轉為浮點數。
購買數量,因為用戶可能會去改變,所以使用input來展現。同事,使用如下過濾器即可定位到數量
$(row).find(":text")

並使用parseInt將其轉為整數。在計算好單個產品金額小計之後,就需要將其寫入到“小計”欄位中,使用toFixed方法,將數字格式化為帶有兩位小數樣式。

3.購物車金額匯總

 /*
  * 計算購物車中產品的累計金額
  *
  *
  */
 function getTotal() {
 var qtyTotal = 0;
  var itemCount = 0;
  var priceTotal = 0;
  $(cartTable).find("tr:gt(0)").each(function() {
  if ($(this).find(":checkbox").prop("checked") == true) { //如果選中
    itemCount++; //累加產品品種數量
    qtyTotal += parseInt($(this).find(":text").val()); //累計產品購買數量
    priceTotal += parseFloat($(this).find(".subtotal").text()); //累計產品金額
   }
  });    $("#itemCount").text(itemCount);
  $("#qtyCount").text(qtyTotal);
 $("#priceTotal").text(priceTotal.toFixed(2));
 };

計算購物車匯總信息時,應該是遍歷購物車中所有的行,將每一行的小計和數量分別進行累加即可。這裡使用一個技巧來獲取購物車表格中的所有行$(cartTable).find("tr:gt(0)")

這裡使用的tr:gt(0)是表示選擇表格中所有的tr元素並且索引是大於0的(即除去第一個tr元素),這是為什麼呢?我們回頭看一下HTML代碼就不難發現,第一個tr元素是表格標題頭,不包含任何業務數據,所以在遍歷時,應該除去這一個tr元素。

4.用戶刪除產品,或是修改購買數量時重新計算產品小計和匯總信息

//為數量調整的+ -號提供單擊事件,並重新計算產品小計
 /*
  * 為購物車中每一行綁定單擊事件,以及每行中的輸入框綁定鍵盤事件
  * 根據觸發事件的元素執行不同動作
  * 增加數量
  * 減少數量
  * 刪除產品
  *
  */
 $(cartTable).find("tr:gt(0)").each(function() {
 var input = $(this).find(":text"); 
 //為數量輸入框添加事件,計算金額小計,並更新總計
 $(input).keyup(function() {
 var val = parseInt($(this).val());
 if (isNaN(val) || (val < 1)) { $(this).val("1"); }
  getSubTotal($(this).parent().parent()); //tr element
  getTotal();
 });

 //為數量調整按鈕、刪除添加單擊事件,計算金額小計,並更新總計
 $(this).click(function() {
 var val = parseInt($(input).val());
 if (isNaN(val) || (val < 1)) { val = 1; }

 if ($(window.event.srcElement).hasClass("minus")) {
   if (val > 1) val--;
   input.val(val);
   getSubTotal(this);
  }
  else if ($(window.event.srcElement).hasClass("plus")) {
   if (val < 9999) val++;
  input.val(val);
 getSubTotal(this);
  }
  else if ($(window.event.srcElement).hasClass("delete")) {
   if (confirm("確定要從購物車中刪除此產品?")) {
    $(this).remove();
 }
  }
   getTotal();
 });

我在這裡並不是一一對“增加”、“減少”和“刪除”按鈕進行事件綁定,而是將單擊事件統一綁定在TR行上,再對觸發單擊事件的元素進行判斷,進而決定執行何種操作。

點擊“+”或是“-”按鈕時,程序會將數量加一或是減一,並重新計算產品小計和匯總信息。

同時,還為數量輸入框綁定了鍵盤事件,在輸入框內每按下一次鍵盤,都會觸發該事件,重新計算產品小計和匯總信息。

至此,購物車的前端開發,算是告一段落。

小伙伴們可以使用以下鏈接獲取源碼:https://github.com/chris-mao/ShoppingCart.git

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved