We now have a youtube channel. Subscribe!

jQuery Checkout.js Plugin



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.

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 ).readyfunction( )   { 
                    var  Arrays =  new Array( ); 
                    $'#wrap li' ).mousemovefunction( )  { 
                         var  position = $this ).position( ); 
                         $'#cart' ).stop( ).animate( { 
                              left :  position.left  +  'px' , 
                         } ,  250 ,   function( )  { 
                         } ); 
                    } ).mouseoutfunction( )  { 
                    } ); 

                    $'#wrap li' ).clickfunction( ) { 
                         var thisID  =  $this ).attr('id'); 
                         var  itemname  =  $(this).find'div .name' ).html( ); 
                         var  itemprice  =  $this ).find'div .price' ).html() ; 

                         if   includeArrays thisID ) )   { 
                              var  price  =  $'#each-'  +  thisID ).children".shopp-price" ). 
                                   find'em' ).html( ); 
                              var  quantity  =  $(' #each-'  +  thisID ).children".shopp-quantity" ).html( ); 
                              quantity  =  parseIntquantity )+parseInt); 
                              var   total  =  parseIntite mprice )*parseIntquantity ); 

                              $'#each-'  +  thisID ).children".shopp-price" ). 
                                   find'em' ).htmltotal ); 
                              $'#each-'  thisID ).children".shopp-quantity" ).htmlquantity ); 

                              var  prev_charges  =  $'.cart-total span' ).html( ); 
                              prev_charges  =  parseIntprev_charges )-parseIntprice ); 
                              prev_charges  =  parseIntprev_charges )+parseInttotal ); 

                              $'.cart-total span' ).htmlprev_charges ); 
                              $'#total-hidden-charges' ).valprev_charges ); 
                         }  else  { 
                              Arrays.pushthisID ); 
                              var  prev_charges  = $'.cart-total span' ).html( ); 
                              prev_charges  =  parseIntprev_charges )+parseIntitemprice ); 

                              $'.cart-total span' ).htmlprev_charges ); 
                              $'#total-hidden-charges' ).valprev_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  = getposArrays,  thisID ); 

                         Arrays.splicepos1"0" ) 
                         prev_charges  = parseIntprev_charges )-parseIntdeduct ); 

                         $'.cart-total span' ).htmlprev_charges ); 
                         $'#total-hidden-charges' ).valprev_charges ); 
                         $this ).parent( ).remove( ); 
                    } ); 

                    $'#Submit' ).livequery'click',   function( )  { 
                         var   totalCharge = $'#total-hidden-charges' ).val( ); 

                         $'#left_bar' ).html'Total Charges: $'  +  totalCharge ); 
                         return false; 
                    } ); 
               } ); 
               function   includearr, obj )  { 
                    for  var  i = 0;  i arr.length;   i++ )  { 
                         if arr] == obj )  return true; 
                    } 
               } 
               function  getposarr, 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.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain