加入購物車功能

本文使用參考：Shopping cart JS

線上示範 CartExample.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>購物車範例</title>
  <link rel="stylesheet" type="text/css" href="css/cart.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
  <!-- Nav -->
  <nav class="navbar navbar-inverse bg-inverse fixed-top bg-faded">
      <div class="row">
          <div class="col">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cart">購物車 (<span class="total-count"></span>)</button><button class="clear-cart btn btn-danger">清除購物車</button></div>
      </div>
  </nav>


  <!-- Main -->
  <div class="container">
      <div class="row">
        <div class="col">
          <div class="card" style="width: 20rem;">
    <img class="card-img-top" src="http://www.azspagirls.com/files/2010/09/orange.jpg" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">橘子</h4>
      <p class="card-text">價格: $10/粒</p>
      <a href="#" data-name="橘子" data-price="10" class="add-to-cart btn btn-primary">加入購物車</a>
    </div>
  </div>
        </div>
        <div class="col">
          <div class="card" style="width: 20rem;">
    <img class="card-img-top" src="http://images.all-free-download.com/images/graphicthumb/vector_illustration_of_ripe_bananas_567893.jpg" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">香蕉</h4>
      <p class="card-text">價格: $5/根</p>
      <a href="#" data-name="香蕉" data-price="5" class="add-to-cart btn btn-primary">加入購物車</a>
    </div>
  </div>
        </div>
        <div class="col">
          <div class="card" style="width: 20rem;">
    <img class="card-img-top" src="https://3.imimg.com/data3/IC/JO/MY-9839190/organic-lemon-250x250.jpg" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">檸檬</h4>
      <p class="card-text">價格: $2/粒</p>
      <a href="#" data-name="檸檬" data-price="2" class="add-to-cart btn btn-primary">加入購物車</a>
    </div>
  </div>
        </div>
      </div>
  </div>


   <!-- Modal -->
  <div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">購物車</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <table class="show-cart table">

          </table>
          <div>總金額: $<span class="total-cart"></span></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
          <button type="button" class="btn btn-primary">確認下單</button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <script src="./js/cart.js"></script>
</body>
</html>

cart.css

body {
  padding-top: 80px;
}

.show-cart li {
  display: flex;
}
.card {
  margin-bottom: 20px;
}
.card-img-top {
  width: 200px;
  height: 200px;
  align-self: center;
}

cart.js

// ************************************************
// Shopping Cart API
// ************************************************

var shoppingCart = (function() { //Self-invoking function/Immediately-invoked function, 此函式是一個物件，建立、初始化一個Cart物件，並以shoppingCart命名此Cart物件
  // =============================
  // Private methods and propeties
  // =============================
  cart = [];

  // Constructor
  function Item(name, price, count) { //購物車單項：名稱、價格、數量
    this.name = name;
    this.price = price;
    this.count = count;
  }

  // Save cart
  function saveCart() { //儲存Cart
    sessionStorage.setItem('shoppingCart', JSON.stringify(cart));
  }

    // Load cart
  function loadCart() { //載入Cart
    cart = JSON.parse(sessionStorage.getItem('shoppingCart'));
  }
  if (sessionStorage.getItem("shoppingCart") != null) {
    loadCart();
  }


  // =============================
  // Public methods and propeties 公開的方法與屬性
  // =============================
  var obj = {}; //物件

  // Add to cart
  obj.addItemToCart = function(name, price, count) { //function expression
    for(var item in cart) {
      if(cart[item].name === name) {
        cart[item].count ++;
        saveCart();
        return;
      }
    }
    var item = new Item(name, price, count);
    cart.push(item);
    saveCart();
  }
  // Set count from item
  obj.setCountForItem = function(name, count) {
    for(var i in cart) {
      if (cart[i].name === name) {
        cart[i].count = count;
        break;
      }
    }
  };
  // Remove item from cart
  obj.removeItemFromCart = function(name) {
      for(var item in cart) {
        if(cart[item].name === name) {
          cart[item].count --;
          if(cart[item].count === 0) {
            cart.splice(item, 1);
          }
          break;
        }
    }
    saveCart();
  }

  // Remove all items from cart
  obj.removeItemFromCartAll = function(name) {
    for(var item in cart) {
      if(cart[item].name === name) {
        cart.splice(item, 1);
        break;
      }
    }
    saveCart();
  }

  // Clear cart
  obj.clearCart = function() {
    cart = [];
    saveCart();
  }

  // Count cart
  obj.totalCount = function() {
    var totalCount = 0;
    for(var item in cart) {
      totalCount += cart[item].count;
    }
    return totalCount;
  }

  // Total cart
  obj.totalCart = function() {
    var totalCart = 0;
    for(var item in cart) {
      totalCart += cart[item].price * cart[item].count;
    }
    return Number(totalCart.toFixed(2));
  }

  // List cart
  obj.listCart = function() {
    var cartCopy = [];
    for(i in cart) {
      item = cart[i];
      itemCopy = {};
      for(p in item) {
        itemCopy[p] = item[p];

      }
      itemCopy.total = Number(item.price * item.count).toFixed(2);
      cartCopy.push(itemCopy)
    }
    return cartCopy;
  }

  // cart : Array 陣列
  // Item : Object/Class 物件別
  // addItemToCart : Function
  // removeItemFromCart : Function 從Cart移除一個項目
  // removeItemFromCartAll : Function 從Cart移除所有的項目
  // clearCart : Function 清空Cart
  // countCart : Function Cart項目數量
  // totalCart : Function 所有的Cart項目
  // listCart : Function 列出所有的Cart項目
  // saveCart : Function 儲存Cart
  // loadCart : Function 載入Cart
  return obj;
})();


// *****************************************
// Triggers / Events
// *****************************************
// Add item 加入一個項目到Cart
$('.add-to-cart').click(function(event) {
  event.preventDefault();
  var name = $(this).data('name');
  var price = Number($(this).data('price'));
  shoppingCart.addItemToCart(name, price, 1);
  displayCart();
});

// Clear items 清除Cart項目(複數，多個)
$('.clear-cart').click(function() {
  shoppingCart.clearCart();
  displayCart();
});


function displayCart() { //顯示Cart
  var cartArray = shoppingCart.listCart();
  var output = "";
  for(var i in cartArray) {
    output += "<tr>"
      + "<td>" + cartArray[i].name + "</td>"
      + "<td>(" + cartArray[i].price + ")</td>"
      + "<td><div class='input-group'><button class='minus-item input-group-addon btn btn-primary' data-name=" + cartArray[i].name + ">-</button>"
      + "<input type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>"
      + "<button class='plus-item btn btn-primary input-group-addon' data-name=" + cartArray[i].name + ">+</button></div></td>"
      + "<td><button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">X</button></td>"
      + " = "
      + "<td>" + cartArray[i].total + "</td>"
      +  "</tr>";
  }
  $('.show-cart').html(output);
  $('.total-cart').html(shoppingCart.totalCart());
  $('.total-count').html(shoppingCart.totalCount());
}

// Delete item button 刪除Cart項目按鈕

$('.show-cart').on("click", ".delete-item", function(event) {
  var name = $(this).data('name')
  shoppingCart.removeItemFromCartAll(name);
  displayCart();
})


// -1 項目加1
$('.show-cart').on("click", ".minus-item", function(event) {
  var name = $(this).data('name')
  shoppingCart.removeItemFromCart(name);
  displayCart();
})
// +1 項目減1
$('.show-cart').on("click", ".plus-item", function(event) {
  var name = $(this).data('name')
  shoppingCart.addItemToCart(name);
  displayCart();
})

// Item count input 輸入項目數量
$('.show-cart').on("change", ".item-count", function(event) {
   var name = $(this).data('name');
   var count = Number($(this).val());
  shoppingCart.setCountForItem(name, count);
  displayCart();
});

displayCart();

課堂練習：了解上面範例，加入購物車功能至訂便當

基本上，只要把cart.js這個檔案放到便當專案的目錄，然後商品頁加上購物車相關的按鈕即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <title>富國雞腿王</title>
</head>
<body>
  <nav class="navbar navbar-expand-md fixed-top">
    <a class="navbar-brand" href="#">富國雞腿王</a>
    <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="main-navigation">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>

  </nav>


  <header class="page-header header container-fluid">
    <div class="overlay">
      <div class="description">
        <h1>餓了沒？！</h1>
        <p>富國雞腿王總部成立於2019年3月，由弘光科技大學資訊管理系教師陳富國成立，總部位於台灣台中沙鹿弘光科技大學。富國雞腿王總部什麼都賣，什麼都不奇怪，只拼經濟，不拼政治！</p>
        <button class="btn btn-outline-secondary btn-lg">請不吝告知您的想法！</button>
      </div>

    </div>
  </header>
  <div class="container features">
    <div class="row">
        <div class="col">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cart">購物車 (<span class="total-count"></span>)</button>  <button class="clear-cart btn btn-danger">清除購物車</button></div>
    </div>
    <hr>
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="feature-title">招牌酥炸雞腿飯 90元 <a href="#" data-name="招牌酥炸雞腿飯" data-price="90" class="add-to-cart btn btn-primary">加入購物車</a></div>
        <img src="images/1.jpg" class="img-fluid">
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="feature-title">泰式椒麻雞腿飯 96元  <a href="#" data-name="泰式椒麻雞腿飯" data-price="95" class="add-to-cart btn btn-primary">加入購物車</a></div>
        <img src="images/2.jpg" class="img-fluid">
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="feature-title">日式蜜汁雞腿飯 85元  <a href="#" data-name="日式蜜汁雞腿飯" data-price="85" class="add-to-cart btn btn-primary">加入購物車</a></div>
        <img src="images/3.jpg" class="img-fluid">
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="feature-title">台式雞腿飯 85元  <a href="#" data-name="台式雞腿飯" data-price="85" class="add-to-cart btn btn-primary">加入購物車</a></div>
        <img src="images/3.jpg" class="img-fluid">
      </div>
    </div>
  </div>
  <!-- Modal -->
 <div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalLabel">購物車</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
         <table class="show-cart table">
         </table>
         <div>總金額: $<span class="total-cart"></span></div>
       </div>
       <div class="modal-footer">
         <div style="display:flex;justify-content:center;align-items:center;">
           <div class="font">學號(或姓名)：</div>
           <textarea id="orderPeople" class="font" name="order" style="resize:none;height:40px;"></textarea>
         </div>
         <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
         <button type="button" class="btn btn-primary" onclick="submit_order();">確認下單</button>
       </div>
     </div>
   </div>
 </div>

  <footer class="page-footer">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12">
        <h3 class="text-uppercase font-weight-bold">富國雞腿王總部基本資料</h6>
        <p>M棟 MB108研究室
        <br/>設備：主機、CPanel虛擬主機管理系統、Plesk虛擬主機管理系統
        <br/>地址：43302臺中市沙鹿區臺灣大道六段1018號</p>
        <h3 class="text-uppercase font-weight-bold">聯絡資訊</h3>
        <p>Wells Chen
        <br/>info@csim.hk.edu.tw
        <br/>+886 4 26318652
        <br/>fax: 886 4 26521921</p>

      </div>
      <div class="col-lg-6 col-md-6 col-sm-12">
        <h3 class="form-title">問題反應</h3>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="姓名" name="">
        </div>
        <div class="form-group">
          <input type="email" class="form-control" placeholder="Email" name="email">
        </div>
        <div class="form-group">
          <textarea class="form-control" rows="5"></textarea>
        </div>
        <input type="submit" class="btn btn-secondary btn-block" value="送出資料" name="">
      </div>

    </div>
    <div class="footer-copyright text-center">Copyright © 2019 - 富國雞腿王總部. All Rights Reserved.</div>
  </footer>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <script src="./js/main.js"></script>
  <script src="./js/cart.js"></script>
  <script type="text/javascript">
    function submit_order(){
      //JSON.stringify將json物件轉換成字串
      // console.log( JSON.stringify(shoppingCart.listCart()));
      //JSON.prse將資料轉換成json物件
      // console.log( JSON.parse(JSON.stringify(shoppingCart.listCart())));
      var orderPeople =$("#orderPeople").val();
      console.log("訂購人：" + orderPeople);
      var cartObject = shoppingCart.listCart();
      for (var i = 0; i < cartObject.length; i++){
        console.log('第' + (i+1) + '筆：' + Object.values(cartObject[i]));
      }
    }
  </script>
</body>
</html>

加上購物車的便當網頁接下來，我們要用smtpJS.com所提供的服務，從前端直接把訂單資料以email的方式送出。下次，再探討把訂單資料送到後端(使用ajax)，由後端來處理訂單(寫入資料庫、訂單檔案… )

Curriculum

加入購物車功能

Leave A Reply 取消回覆

Login with your site account

Modal title