Membuat chekout Keranjang belanja dengan Jquery

Membuat chekout Keranjang belanja dengan Jquery
Hi Bloggers ,

Selamat siang sahabat mudah-loh , kali ini kita akan mencoba Membuat chekout Keranjang belanja dengan Jquery 
Pastinya sahabat sudah pada tahu ya tentang jquery ini , jika belum baca tutorial
cara-membuat-hitung-mundur-dengan-jquery
Konsepnya mudah ko , engga terlalu ribet

Langsung Saja Kita ke kodingnya
Silahkan copy kode di bawah ini
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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="http://www.tutorialspoint.com/jquery/src/checkout/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://www.tutorialspoint.com/jquery/src/checkout/jquery.livequery.js"></script>
<link href="http://www.tutorialspoint.com/jquery/src/checkout/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(itemprice)*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:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>
Baca juga artikel tentang membuat-option-tanpa-klik-submit-dengan Jquery 

Maka hasilnya akan seperti ini , 
Script dan CSS diatas anda dapat download , karena masih online .
anda dapat mendownload scriptnya di link diatas .


Maka hasil dari gambar tersebut seperti ini 

Ketika Gambar di klik maka Total Change akan bertambah 

Dan Ketika tombol Trash ( Sampah ) di klik maka hasilnya akan berkurang 



Sekian tutorial Membuat chekout Keranjang belanja dengan Jquery  , semoga dapat membantu .
Bagian tutorial ini agar bertambah ilmu kita :)
 

Wassalamu'alaikum Wr.Wb 

Share this

Related Posts

Previous
Next Post »

2 komentar

komentar