Simple shopping cart with HTML5 Drag and drop and Javascript

Today i will show you simple shopping cart with Pure JavaScript and HTML drag and drop

function getId(id){
    return document.getElementById(id);
}
function dragStart(event){
    event.dataTransfer.setData('text',event.target.getAttribute('id'));
}
function dragDrop(event){
    event.preventDefault();
var productQuantiy = 1;
    var dropId = event.target.getAttribute('id')
    var data = event.dataTransfer.getData('text');
    var newAmount = getId(data).getAttribute("data-value");
    var list = getId(data);
    var productName = list.getElementsByClassName("product-name")[0].innerHTML;
    var productPrice = list.getElementsByClassName("product-price")[0].innerHTML;
  if(getId('dropZone').querySelector("#"+ data +"") == null){
    getId('dropZone').innerHTML += '<div class="row" id="'+ data +'">    <div class="col-md-4">\ '+ productName + '\</div>    <div class="col-md-4">1</div>    <div class="col-md-4">\ '+ productPrice + '\ </div></div>';
    addAmount(newAmount)
  }
   else {
     if(!confirm("This item is already in you cart. Are you sure you want to add it again ?")){
    return false;
  }
  else{
    for(var i=0; i<=getId(dropId).children.length; i++){
       if(getId(dropId).children[i].getAttribute('id') == data){
      var cartQuantity = getId(dropId).children[i].children[1].innerHTML;
      cartQuantity++
      getId(dropId).children[i].children[1].innerHTML = cartQuantity;
      break;
       }
        }
          }
  addAmount(newAmount);
  }
   }
function addAmount(newAmount){
  if(getId('todalAmount').innerHTML == 0){
      var todalAmount = 0;
      getId('statusHolder').innerHTML = "You cart is not empty"
    }
    else {
      todalAmount = parseFloat(getId('todalAmount').innerHTML);
    }
    var todalAmount = todalAmount + parseFloat(newAmount);
    getId('todalAmount').innerHTML = todalAmount;
   
  }

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
       <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
  <div class="container">
 
    <div class="row">
  <div class="col-md-7">
  <div id="product-grid">
  <div class="txt-heading">Products</div>
<div id="object1"  data-value="300" draggable="true" ondragend="dragEnd(event)" ondragstart="dragStart(event)"  class="product-item">
      <div class="product-image"><img  src="img/camera.jpg" ></div>
      <div class="product-name">3D Camera</div>
      <div class="product-price">$300.00</div>
    </div>
    <div id="object2"  data-value="100"  draggable="true" ondragend="dragEnd(event)" ondragstart="dragStart(event)"  class="product-item">
      <div class="product-image"><img src="img/external-hard-drive.jpg" ></div>
      <div class="product-name">Hard Drive</div>
      <div class="product-price">$100.00</div>
    </div>
    <div id="object3" data-value="400" draggable="true" ondragend="dragEnd(event)" ondragstart="dragStart(event)"  class="product-item">
      <div class="product-image"><img src="img/watch.jpg" ></div>
      <div class="product-name">Wrist Watch</div>
      <div class="product-price">$400.00</div>
    </div></div>
</div>
  <div class="col-md-5">
  <div class="row">
 
  <div id="shopping-cart">
<div class="txt-heading">Shopping Cart Empty Cart</div>
</div></div>
<div class="row dropzoneBGColor">
   <div class="col-md-4">Name</div>
   <div class="col-md-4">Quantity</div>
   <div class="col-md-4">Price</div>
 
</div>
<div class="row dropzoneBGColor">
  <div id="dropZone" ondragenter="drag_enter(event)" class="col-md-12"  ondrop="dragDrop(event)"  ondragover="return false" ondragleave="drag_leave(event)"  >
    </div> 
  </div><div class="row dropzoneBGColor">
  <div id="todalAmountHolder">Total Amount:$0
</div></div>
</div>
</div>
</div>



  </body>
</html>

Demo

Leave a Reply

Your email address will not be published. Required fields are marked *