jQuery - Checkout.js
Checkout.js is a jQuery plugin for easy to implementation of check out for e-commerce websites.
A Simple of checkout.js example as shown below −
<html xmlns = "https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1" />
<title>Untitled Document</title>
<script type = "text/javascript" src = "jquery-1.3.2.js"></script>
<script type = "text/javascript" src = "jquery.livequery.js"></script>
<link href = "css.css" rel = "stylesheet" />
<script type = "text/javascript">
$(document).ready(function() {
var Arrays = new Array();
$('#wrap li').mousemove(function(){
var position = $(this).position();
$('#cart').stop().animate({
left : position.left+'px',
},250,function(){
});
}).mouseout(function(){
});
$('#wrap li').click(function(){
var thisID = $(this).attr('id');
var itemname = $(this).find('div .name').html();
var itemprice = $(this).find('div .price').html();
if(include(Arrays,thisID)){
var price = $('#each-'+thisID).children(".shopp-price").
find('em').html();
var quantity = $('#each-'+thisID).children(".shopp-quantity").html();
quantity = parseInt(quantity)+parseInt(1);
var total = parseInt(ite mprice)*parseInt(quantity);
$('#each-'+thisID).children(".shopp-price").
find('em').html(total);
$('#each-'+thisID).children(".shopp-quantity").html(quantity);
var prev_charges = $('.cart-total span').html();
prev_charges = parseInt(prev_charges)-parseInt(price);
prev_charges = parseInt(prev_charges)+parseInt(total);
$('.cart-total span').html(prev_charges);
$('#total-hidden-charges').val(prev_charges);
} else {
Arrays.push(thisID);
var prev_charges = $('.cart-total span').html();
prev_charges = parseInt(prev_charges)+parseInt(itemprice);
$('.cart-total span').html(prev_charges);
$('#total-hidden-charges').val(prev_charges);
$('#left_bar .cart-info').append('
<div class = "shopp" id = "each-'+thisID+'">
<div class = "label">'+itemname+'</div>
<div class = "shopp-price">
$<em>'+itemprice+'</em></div>
<span class = "shopp-quantity">1</span>
<img src = "remove.png" class = "remove" />
<br class = "all" />
</div>');
$('#cart').css({'-webkit-transform' :
'rotate(20deg)','-moz-transform' : 'rotate(20deg)' });
}
setTimeout('angle()',200);
});
$('.remove').livequery('click', function() {
var deduct = $(this).parent().children(".shopp-price").find('em').html();
var prev_charges = $('.cart-total span').html();
var thisID = $(this).parent().attr('id').replace('each-','');
var pos = getpos(Arrays,thisID);
Arrays.splice(pos,1,"0")
prev_charges = parseInt(prev_charges)-parseInt(deduct);
$('.cart-total span').html(prev_charges);
$('#total-hidden-charges').val(prev_charges);
$(this).parent().remove();
});
$('#Submit').livequery('click', function() {
var totalCharge = $('#total-hidden-charges').val();
$('#left_bar').html('Total Charges: $'+totalCharge);
return false;
});
});
function include(arr, obj) {
for(var i = 0; i<arr.length; i++) {
if (arr[i] == obj) return true;
}
}
function getpos(arr, obj) {
for(var i = 0; i<arr.length; i++) {
if (arr[i] == obj) return i;
}
}
function angle(){$('#cart').css({'-webkit-transform' :
'rotate(0deg)','-moz-transform' : 'rotate(0deg)' });}
</script>
</head>
<body>
<div align = "left">
<div id = "wrap" align = "left">
<ul>
<li id = "1">
<img src = "a1.png" class = "items" height = "100" alt = "" />
<br clear = "all" />
<div><span class = "name">Learn Java:
Price</span>: $<span class = "price">
800</span> </div>
</li>
<li id = "2">
<img src = "5.png" class = "items" height = "100" alt = "" />
<br clear = "all" />
<div><span class = "name">Learn HTML
</span>: $<span class = "price">500
</span></div>
</li>
<li id="3">
<img src = "1.png" class = "items" height = "100" alt = "" />
<br clear = "all" />
<div><span class = "name">Learn Android
</span>: $<span class = "price">450
</span></div>
</li>
<li id = "4">
<img src = "6.png" class = "items" height = "100" alt = "" />
<br clear = "all" />
<div><span class = "name">Learn SVG
</span>: $<span class = "price">1200
</span></div>
</li>
<li id = "5">
<img src = "7.png" class = "items" height = "100" alt = "" />
<br clear = "all" />
<div> <span class = "name">Learn Bootstrap
</span>: $<span class = "price">65
</span></div>
</li>
<li id = "6">
<img src = "5.png" class = "items" height = "100" alt = "" />
<br clear = "all" />
<div><span class = "name">Learn HTML
</span>: $<span class = "price">800
</span> </div>
</li>
<li id = "7">
<img src = "7.png" class = "items" height = "100" alt = "" />
<br clear = "all" />
<div><span class = "name"> Learn Bootstrap
</span>: $<span class = "price">45
</span></div>
</li>
<li id = "8">
<img src = "6.png" class = "items" height = "100" alt = "" />
<br clear = "all" />
<div><span class = "name">Learn SVG
</span>: $<span class = "price">900
</span></div>
</li>
<li id = "9">
<img src = "8.png" class = "items" height = "100" alt = "" />
<br clear = "all" />
<div><span class = "name">Learn Angular Js
</span>: $<span class = "price">20
</span></div>
</li>
</ul>
<br clear = "all" />
</div>
<div id = "left_bar">
<form action = "#" id="cart_form" name = "cart_form">
<div class = "cart-info"></div>
<div class = "cart-total">
<b>Total Charges:
</b>
$<span>0</span>
<input type = "hidden" name = "total-hidden-charges"
id = "total-hidden-charges" value = "0" />
</div>
<button type = "submit" id = "Submit">CheckOut</button>
</form>
</div>
</div>
</body>
</html>
This should produce following result −
Click here
