Sunday, May 24, 2020

jQuery Checkout.js Plugin



Hello guys! Welcome to a new section of my tutorials on jQuery. In this tutorial guide, i will be discussing about the jQuery Checkout.js plugin.

Checkout.js is a jQuery plugin that is used for easy implementation of check out for websites that sell products, that is to say e-commerce websites.

Example

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 wrapping it up with this tutorial. In my next tutorial post, i will be discussing about Blockrain.js plugins. Feel free to ask your questions where necessary and i will attend to them as soon as possible.

If you found this tutorial helpful and interesting, kindly use the share button to share this tutorial. Follow us on our various social media platforms available to stay updated with our latest posts. Also subscribe to our newsletter to get all our tutorials delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

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.