1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. [外掛] jQuery myCart 購物車模組,炫麗動畫與金額自動加總
js 網頁開發

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

2019/12/05

梅問題-[外掛] jQuery myCart 購物車模組,免寫Code立即套用
  最近有不少朋友問梅干,Google表單能不能做這個或做那個,基本Google表單就是一個界面,幫各位把資料寫入Google試算表中,因此只要前端的表單能呈現的出來,剩下的就是把值寫回去Google的試算表中,所以可以把Google試算表看成是一個資料庫的概念。

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


jQuery.myCart
網站名稱:jQueryScript.net
網站連結:www.jqueryscript.net

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包起來,並在裡面放入圖片、標題與金額,而要把這產品加入購物車,則是由下方的加入購物鈕所控制的,因此在「加到購物車」按鈕,裡會有相關屬性的設定值分別為:
data-id: 產品編號
data-name: 產品名稱
data-summary: 產品摘要
data-price: 產品價格
data-quantity: 產品數量
data-image: 產品圖片
<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
當一切都建立好後,就會看到以下的畫面。
梅問題-[外掛] jQuery myCart 購物車模組,免寫Code立即套用
Step6
當按加入購物車時,除了會有動畫外,右上角的購物車也會顯示,目前已放入購物車的產品數量。
梅問題-[外掛] jQuery myCart 購物車模組,免寫Code立即套用
Step7
當點了購物車圖示,就會顯示所有的購物清單的數量與金額,到這邊剩下的部分,就是把這購物清單,寫回到Google表單,而透過這隻購物車模組,不用寫任何的程式碼,就能快速的打造出,自己專屬的購物車系統,至於要怎麼購物車裡的清單塞回到Google表單,有興趣的朋友,也歡迎報名梅干最近所開的線上課程「Google表單串接金流」。
梅問題-[外掛] jQuery myCart 購物車模組,免寫Code立即套用
#範例預覽