jQuery And Bootstrap Based Shopping Cart Plugin

by Posted on

jQuery And Bootstrap Based Shopping Cart Plugin:
If you want to add shopping cart feature on your existing or new website to sell your products then In this post i am going to share a simple shopping cart plugin written in jQuery and bootstrap which you can easily integrate on your bootstrap website jut few steps. the plugin name is jquery.mycart. It is a simple jQuery plugin with cart feature. 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.



Steps to Integrate jQuery And Bootstrap Based Shopping Cart Plugin in Your Web Project

Libraries

Include following required libraries on page where you want to add shopping cart feature.

<!--CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css">
 
<!--JS-->
<script src="js/jquery-2.2.3.min.js"></script>
<script type='text/javascript' src="js/bootstrap.min.js"></script>
<script type='text/javascript' src="js/jquery.mycart.js"></script>

HTML

Insert a shopping cart icon into your webpage that will display how many products have been added to the cart. As soon as you click this icon a popup window will display with add product summary and you can also modify the existing product quantity or remove product from the cart.

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

Now create product list with little details like product name, price with Add to Cart button.

 <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>

Note: Every add to cart button should contain following data-* fields (data-id, data-name, data-summary, data-price, data-quantity and data-image) :

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

In the demo there is a button to add more product in the list you can use this same process to dynamically add product in the list from your admin panel, just customize this option.

<button type="addNewProduct" name="addNewProduct" id="addNewProduct">Add New Product</button>



CSS

Ad some CSS on page for styling your cart icon which shows added product count.

<style>
  .badge-notify{
    background:red;
    position:relative;
    top: -20px;
    right: 10px;
  }
  .my-cart-icon-affix {
    position: fixed;
    z-index: 999;
  }
</style>

JS

Finally call the plugin on page. below is the basic method to call the plugin

<script type="text/javascript">
     $(function () {
         $(".my-cart-btn").myCart(options);
     });
</script>

Now pass all the required option and callbacks which help you to customize cart for your project.

<script type="text/javascript">
     $(function () {
         $(".my-cart-btn").myCart({
      currencySymbol: '$',
      classCartIcon: 'my-cart-icon',
      classCartBadge: 'my-cart-badge',
      classProductQuantity: 'my-product-quantity',
      classProductRemove: 'my-product-remove',
      classCheckoutCart: 'my-cart-checkout',
      affixCartIcon: true,
      showCheckoutModal: true,
      numberOfDecimals: 2,
      cartItems: [
        {id: 1, name: 'product 1', summary: 'summary 1', price: 10, quantity: 1, image: 'images/img_1.png'},
        {id: 2, name: 'product 2', summary: 'summary 2', price: 20, quantity: 2, image: 'images/img_2.png'},
        {id: 3, name: 'product 3', summary: 'summary 3', price: 30, quantity: 1, image: 'images/img_3.png'}
      ],
      clickOnAddToCart: function($addTocart){
        goToCartIcon($addTocart);
      },
      afterAddOnCart: function(products, totalPrice, totalQuantity) {
        console.log("afterAddOnCart", products, totalPrice, totalQuantity);
      },
      clickOnCartIcon: function($cartIcon, products, totalPrice, totalQuantity) {
        console.log("cart icon clicked", $cartIcon, products, totalPrice, totalQuantity);
      },
      checkoutCart: function(products, totalPrice, totalQuantity) {
        var checkoutString = "Total Price: " + totalPrice + "\nTotal Quantity: " + totalQuantity;
        checkoutString += "\n\n id \t name \t summary \t price \t quantity \t image path";
        $.each(products, function(){
          checkoutString += ("\n " + this.id + " \t " + this.name + " \t " + this.summary + " \t " + this.price + " \t " + this.quantity + " \t " + this.image);
        });
        alert(checkoutString)
        console.log("checking out", products, totalPrice, totalQuantity);
      },
      getDiscountPrice: function(products, totalPrice, totalQuantity) {
        console.log("calculating discount", products, totalPrice, totalQuantity);
        return totalPrice * 0.5;
      }
});
     });
</script>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.



Published by admin