Educational

Checkout.js

Written by

Saim Khalid

in

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 =newArray();$('#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('
                 &lt;div class="shopp" id ="each-'+thisID+'"&gt;&lt;div class="label"&gt;'+itemname+'&lt;/div&gt;&lt;div class="shopp-price"&gt; 
                       $&lt;em&gt;'+itemprice+'&lt;/em&gt;&lt;/div&gt;&lt;span class="shopp-quantity"&gt;1&lt;/span&gt;&lt;img src ="remove.png"class="remove"/&gt;&lt;br class="all"/&gt;&lt;/div&gt;');$('#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);returnfalse;});});functioninclude(arr, obj){for(var i =0; i&lt;arr.length; i++){if(arr[i]== obj)returntrue;}}functiongetpos(arr, obj){for(var i =0; i&lt;arr.length; i++){if(arr[i]== obj)return i;}}functionangle(){$('#cart').css({'-webkit-transform':'rotate(0deg)','-moz-transform':'rotate(0deg)'});}&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div align ="left"&gt;&lt;div id ="wrap" align ="left"&gt;&lt;ul&gt;&lt;li id ="1"&gt;&lt;img src ="a1.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn Java: 
                 Price&lt;/span&gt;: $&lt;span class="price"&gt;800&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id ="2"&gt;&lt;img src ="5.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn HTML&lt;/span&gt;: $&lt;span class="price"&gt;500&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id="3"&gt;&lt;img src ="1.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn Android 
                 &lt;/span&gt;: $&lt;span class="price"&gt;450&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id ="4"&gt;&lt;img src ="6.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn SVG&lt;/span&gt;: $&lt;span class="price"&gt;1200&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id ="5"&gt;&lt;img src ="7.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn Bootstrap
                 &lt;/span&gt;: $&lt;span class="price"&gt;65&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id ="6"&gt;&lt;img src ="5.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn HTML&lt;/span&gt;: $&lt;span class="price"&gt;800&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id ="7"&gt;&lt;img src ="7.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt; Learn Bootstrap
                 &lt;/span&gt;: $&lt;span class="price"&gt;45&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id ="8"&gt;&lt;img src ="6.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn SVG&lt;/span&gt;: $&lt;span class="price"&gt;900&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id ="9"&gt;&lt;img src ="8.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn Angular Js
                 &lt;/span&gt;: $&lt;span class="price"&gt;20&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;br clear ="all"/&gt;&lt;/div&gt;&lt;div id ="left_bar"&gt;&lt;form action ="#" id="cart_form" name ="cart_form"&gt;&lt;div class="cart-info"&gt;&lt;/div&gt;&lt;div class="cart-total"&gt;&lt;b&gt;Total Charges:&lt;/b&gt; 
                 $&lt;span&gt;0&lt;/span&gt;&lt;input type ="hidden" name ="total-hidden-charges" 
                 id ="total-hidden-charges" value ="0"/&gt;&lt;/div&gt;&lt;button type ="submit" id ="Submit"&gt;CheckOut&lt;/button&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

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

More posts