Shopping Cart Plugin in jQuery – Bootstrap – Mycart

File Size:498.47 KB
Views Total:657
Last Update:December 22, 2017
Publish Date:December 1, 2017
Official Website:Go to website
License:MIT

mycart is a jQuery plugin for used shopping cart interface with Bootstrap styles. that features add to cart, payout modal and add/remove/edit cart items. Items are added into cart with single unit quantity every time add to cart button pressed. There are also feature for showing built in modal for checkout from cart. Quantity can be changed from the modal and item can be removed from it also. There has a facility to show your custom checkout page.

How to use it:

1. Load the required jQuery library and Bootstrap’s JS & CSS:

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

2. Insert a shopping cart icon into your webpage that will display how many products have been     added to the cart.

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

3. Add your products with ‘add to cart’ and ‘details’ buttons into the webpage.

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">Add to Cart</button>
    <a href="#" class="btn btn-info">Details</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">Add to Cart</button>
    <a href="#" class="btn btn-info">Details</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">Add to Cart</button>
    <a href="#" class="btn btn-info">Details</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">Add to Cart</button>
    <a href="#" class="btn btn-info">Details</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">Add to Cart</button>
    <a href="#" class="btn btn-info">Details</a>
  </div>

</div>

4. The JavaScript to enable the shopping cart plugin.

$(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;
    }
  });

});

Done 🙂