帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Bootstrap和jQuery购物车动画飞入特效

帝国模板之家 2020-12-16 网页特效 评论

插件介绍

非常好用的jQuery和bootstrap购物车插件,有添加到购物车、支付模式和添加/删除/编辑购物车功能。

兼容的浏览器

Chrome, IE9+, FireFox, Opera, Safari

使用方法

1. 在页面中加载jQuery库和bootstrap框架。

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

2.在页面尾部加载购物车插件js文件。

<script src="js/jquery.mycart.js"></script>

3. 在网页中插入购物车图标,该图标将显示已添加到购物车中的产品数量。

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

4. 在页面中添加“加入购物车”和“详细”按钮将您的产品。

data-id: product ID
data-name: product name
data-summary: product summary
data-price: product price
data-quantity: product quantity
data-image: product image


  <div class="row">
    <div class="col-md-3 text-center">
      <img src="images/img_1.png" width="150px" height="150px">
      <br>
      product 1 - <strong>¥10</strong>
      <br>
      <button class="btn btn-danger my-cart-btn" data-id="1" data-name="product 1" data-summary="summary 1" data-price="10" data-quantity="1" data-image="images/img_1.png">加入购物车</button>
      <a href="#" class="btn btn-info">详情</a>
    </div>

    <div class="col-md-3 text-center">
      <img src="images/img_2.png" width="150px" height="150px">
      <br>
      product 2 - <strong>¥20</strong>
      <br>
      <button class="btn btn-danger my-cart-btn" data-id="2" data-name="product 2" data-summary="summary 2" data-price="20" data-quantity="1" data-image="images/img_2.png">加入购物车</button>
      <a href="#" class="btn btn-info">详情</a>
    </div>

    <div class="col-md-3 text-center">
      <img src="images/img_3.png" width="150px" height="150px">
      <br>
      product 3 - <strong>¥30</strong>
      <br>
      <button class="btn btn-danger my-cart-btn" data-id="3" data-name="product 3" data-summary="summary 3" data-price="30" data-quantity="1" data-image="images/img_3.png">加入购物车</button>
      <a href="#" class="btn btn-info">详情</a>
    </div>

    <div class="col-md-3 text-center">
      <img src="images/img_4.png" width="150px" height="150px">
      <br>
      product 4 - <strong>¥40</strong>
      <br>
      <button class="btn btn-danger my-cart-btn" data-id="4" data-name="product 4" data-summary="summary 4" data-price="40" data-quantity="1" data-image="images/img_4.png">加入购物车</button>
      <a href="#" class="btn btn-info">详情</a>
    </div>

    <div class="col-md-3 text-center">
      <img src="images/img_5.png" width="150px" height="150px">
      <br>
      product 5 - <strong>¥50</strong>
      <br>
      <button class="btn btn-danger my-cart-btn" data-id="5" data-name="product 5" data-summary="summary 5" data-price="50" data-quantity="1" data-image="images/img_5.png">加入购物车</button>
      <a href="#" class="btn btn-info">详情</a>
    </div>

  </div>

5. 初始化购物车插件。

$(function () {

  var goToCartIcon = function($addTocartBtn){
    var $cartIcon = $(".my-cart-icon");
    var $image = $('<img width="30px" height="30px" src="' + $addTocartBtn.data("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);
    },
    getDiscountPrice: function(products) {
      var total = 0;
      $.each(products, function(){
        total += this.quantity * this.price;
      });
      return total * 0.5;
    }
  });

});

6.默认选项和回调函数。

classCartIcon: 'my-cart-icon',
classCartBadge: 'my-cart-badge',
classProductQuantity: 'my-product-quantity',
classProductRemove: 'my-product-remove',
classCheckoutCart: 'my-cart-checkout',
affixCartIcon: true,
showCheckoutModal: true,
clickOnAddToCart: function($addTocart) { },
clickOnCartIcon: function($cartIcon, products, totalPrice, totalQuantity) { },
checkoutCart: function(products, totalPrice, totalQuantity) { },
getDiscountPrice: function(products, totalPrice, totalQuantity) { return null; }
美梦,诞生在一瞬间,这短暂的喜悦,也就像泡沫一样,往往

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言