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>
