[外掛] jQuery myCart 購物車模組，炫麗動畫與金額自動加總

　　最近有不少朋友問梅干，Google表單能不能做這個或做那個，基本Google表單就是一個界面，幫各位把資料寫入Google試算表中，因此只要前端的表單能呈現的出來，剩下的就是把值寫回去Google的試算表中，所以可以把Google試算表看成是一個資料庫的概念。

  而對於單一商品，各位應該都沒啥問題，當遇到多產品時，就比較麻煩，最主要的原因就在於，當加入購物車的產品數量與金額的加總，或是刪除的商品自動扣除，而這部分是需要花時間與功力進行處理，但網路上已有不少熱心的網友，用jQuery寫了相關的套件，梅干在試用後，覺得jQuery myCart最簡單，也最好用，因此有需的朋友，現在也一塊來看看囉！

---

jQuery.myCart

---

Step1
首先，先將Boostrap與jQuery載入後，再把jquery.mycart.js載入。

<link href="bootstrap.min.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.mycart.js"></script>

---

Step2
加入購物車圖示與按鈕。

<span class="glyphicon glyphicon-shopping-cart my-cart-icon">
<span class="badge badge-notify my-cart-badge"></span></span>

---

Step3
建立產品區塊，而每一個產品區塊，都用一個div包起來，並在裡面放入圖片、標題與金額，而要把這產品加入購物車，則是由下方的加入購物鈕所控制的，因此在「加到購物車」按鈕，裡會有相關屬性的設定值分別為：

<div class="col-md-3 text-center">
<img height="150px" src="圖片.png" width="150px" /><br />
產品名稱ABC <strong>產品金額$NT100</strong><br />
<button class="btn btn-danger my-cart-btn" data-id="1" data-image="圖片.png" data-name="product 1" data-price="10" data-quantity="1" data-summary="summary 1">加入購物車</button>
</div>
 

---

Step4
最後再加入下方的啟動碼，而下方的程式碼，最主要就是用來，當加入購物車的動畫，與購物車內的產品加總與刪除。

$(function () {
  var goToCartIcon = function($addTocartBtn){
    var $cartIcon = $(".my-cart-icon");
    var $image = $('').css({"position": "fixed", "z-index": "999"});
    $addTocartBtn.prepend($image);
    var position = $cartIcon.position();
    $image.animate({
      top: position.top,
      left: position.left
    }, 500 , "linear", function() {
      $image.remove();
    });
  }


$('.my-cart-btn').myCart({
    classCartIcon: 'my-cart-icon',
    classCartBadge: 'my-cart-badge',
    affixCartIcon: true,
    checkoutCart: function(products) {
      $.each(products, function(){
        console.log(this);
      });
    },
    clickOnAddToCart: function($addTocart){
      goToCartIcon($addTocart);
    }
  });
});

---

Step5
當一切都建立好後，就會看到以下的畫面。

---

Step6
當按加入購物車時，除了會有動畫外，右上角的購物車也會顯示，目前已放入購物車的產品數量。

---

Step7
當點了購物車圖示，就會顯示所有的購物清單的數量與金額，到這邊剩下的部分，就是把這購物清單，寫回到Google表單，而透過這隻購物車模組，不用寫任何的程式碼，就能快速的打造出，自己專屬的購物車系統，至於要怎麼購物車裡的清單塞回到Google表單，有興趣的朋友，也歡迎報名梅干最近所開的線上課程「Google表單串接金流」。

---

#範例預覽