Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In this tutorial guide, we are going to be discussing about the jQuery Checkout.js plugin.
Checkout.js is a jQuery plugin that is used for easy implementation of checkout for the websites that sell products, i.e., e-commerce sites.
Checkout.js is a jQuery plugin that is used for easy implementation of checkout for the websites that sell products, i.e., e-commerce sites.
Example
The following below is a simple Checkout.js example -
<html xmlns = "https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1" />
<title>Checkout.js Plugin Example</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 HTML:
Price</span>: $<span class = "price"> 400
</span>
</div>
</li>
<li id = "2">
<img src = "3.png" class = "items" height = "100" alt = "items" />
<br clear = "all" />
<div><span class = "name">Learn Java:
</span>: $<span class = "price">300 </span>
</div>
</li>
<li id="3">
<img src = "1.png" class = "items" height = "100" />
<br clear = "all" />
<div><span class = "name">Learn Bootstrap:
</span>: $<span class = "price">50 </span>
</div>
</li>
<li id = "4">
<img src = "6.png" class = "items" height = "100" />
<br clear = "all" />
<div><span class = "name">Learn SVG:
</span>: $<span class = "price">1000 </span>
</div>
</li>
<li id = "5">
<img src = "7.png" class = "items" height = "100" />
<br clear = "all" />
<div> <span class = "name">Learn Python:
</span>: $<span class = "price">200 </span>
</div>
</li>
<li id = "6">
<img src = "5.png" class = "items" height = "100" />
<br clear = "all" />
<div><span class = "name">Learn PHP:
</span>: $<span class = "price">1500 </span>
</div>
</li>
<li id = "7">
<img src = "8.png" class = "items" height = "100" />
<br clear = "all" />
<div><span class = "name"> Learn MySQL:
</span>: $<span class = "price">450</span>
</div>
</li>
<li id = "8">
<img src = "9.png" class = "items" height = "100" />
<br clear = "all" />
<div><span class = "name">Learn Wordpress:
</span>: $<span class = "price">40 </span>
</div>
</li>
<li id = "9">
<img src = "4.png" class = "items" height = "100" />
<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>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1" />
<title>Checkout.js Plugin Example</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 HTML:
Price</span>: $<span class = "price"> 400
</span>
</div>
</li>
<li id = "2">
<img src = "3.png" class = "items" height = "100" alt = "items" />
<br clear = "all" />
<div><span class = "name">Learn Java:
</span>: $<span class = "price">300 </span>
</div>
</li>
<li id="3">
<img src = "1.png" class = "items" height = "100" />
<br clear = "all" />
<div><span class = "name">Learn Bootstrap:
</span>: $<span class = "price">50 </span>
</div>
</li>
<li id = "4">
<img src = "6.png" class = "items" height = "100" />
<br clear = "all" />
<div><span class = "name">Learn SVG:
</span>: $<span class = "price">1000 </span>
</div>
</li>
<li id = "5">
<img src = "7.png" class = "items" height = "100" />
<br clear = "all" />
<div> <span class = "name">Learn Python:
</span>: $<span class = "price">200 </span>
</div>
</li>
<li id = "6">
<img src = "5.png" class = "items" height = "100" />
<br clear = "all" />
<div><span class = "name">Learn PHP:
</span>: $<span class = "price">1500 </span>
</div>
</li>
<li id = "7">
<img src = "8.png" class = "items" height = "100" />
<br clear = "all" />
<div><span class = "name"> Learn MySQL:
</span>: $<span class = "price">450</span>
</div>
</li>
<li id = "8">
<img src = "9.png" class = "items" height = "100" />
<br clear = "all" />
<div><span class = "name">Learn Wordpress:
</span>: $<span class = "price">40 </span>
</div>
</li>
<li id = "9">
<img src = "4.png" class = "items" height = "100" />
<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>
RECOMMENDED POST: jQuery Whatsnearby Plugin
Alright guys! This is where we are rounding up for this tutorial post. In our next tutorial guide, we are going to be discussing about the Blockrain.js Plugin.
Do feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Do feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
