Uncategories Membuat chekout Keranjang belanja dengan Jquery

Membuat chekout Keranjang belanja dengan Jquery

13:00
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 
Wafik ulinnuha

Share this

Related Posts

Next
« Prev Post
Previous
Next Post »

3 komentar

komentar
Unknown
9 August 2016 at 12:29 delete

wah bagus banget artikelnya.. mduah dipahami para newbie macam saya thanks ya Outbound Malang

Reply
avatar
Megaroid.com
1 October 2016 at 20:14 delete

Gimana memproses checkout nya bos biar ke form pemesanan ataw order via email

Reply
avatar
Anonymous
5 February 2022 at 10:56 delete

1xbet korean - legalbet.co.kr
1xbet korean. Registration Information. 1xbet mongolia The first bet is to create an account. You can also play poker with real money in online betting. In order to

Reply
avatar

Subscribe to: Post Comments (Atom)