Simple shopping cart application using php,mysql,ajax,jquery

1)
Create table named `bb_prodducts` and fields
number_of_bucks,name,price_per_package,price_per_credit,number_of_bucks,id as auto increment
2)
create a file named packages.php and paste the code below

session_start();
 $title = "BabyBoomApps - Content Page";
$page_description = "BabyBoomApps is the place to help fund and gift a baby's future through contests, drawings and online fun!";
include("includes/header.php");
include('includes/checksession.php');
include('includes/connect.php');
$packs = mysql_query("SELECT * FROM `bb_packages`");


<!--breadcrumbs start-->
<div class="breadcrumbs">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-sm-4">
        <h1 id="main_conhdr">MEMBERS</h1>
      </div>
      <div class="col-lg-8 col-sm-8">
        <ol class="breadcrumb pull-right">
          <li><a href="#">Home</a></li>
          <li class="active">BoomBucks
          <li>
        </ol>
      </div>
    </div>
  </div>
</div>
<!--breadcrumbs end-->
<!--container start-->
<div class="container">
  <div class="row">

    <div class="col-lg-9 about">
	<section class="credits-header">
          <div id="buy-credits-default">
            <h3>Buy BoomBucks</h3>
          
            <div class="clear"></div>
         
        </section>
     <div class="boombucks_section">
           
            <section class="tile-container smaller-boombucks_section">
			<?php while($pk = mysql_fetch_array($packs)) { ?>
             <section class="boombucks" >
                <header></header>
                <h3><?php echo $pk['number_of_bucks']; ?><BR><?php echo $pk['name']; ?> </h3>
                <span class="boombuck">$<?php echo ($pk['price_per_package']); ?>&nbsp;USD</span> <span class="boombucks-unit-price">($<?php echo $pk['price_per_credit']; ?>/credit)</span>
          
               
                 <span id="s<?php echo $pk['id']; ?>"> <input type="submit" name="submit" value="Buy Now" onclick="addtocart('<?php echo $pk['id']; ?>','<?php echo $pk['number_of_bucks']; ?>','<?php echo $pk['name']; ?>','<?php echo $pk['price_per_credit']; ?>','<?php echo $pk['price_per_credit']; ?>');" class="btn btn-info"  /></span>
           
              </section>
             <?php } ?>
            
            </section>
            <div class="clear"></div>
          
            
           
          </div>
		  <span class="row button-next btn btn-info" style="float:right;width:20%;" onclick="window.location.href='checkout.php'" id="proced_checkout">Proceed to Checkout</span>
    </div>
	
    <div class="col-lg-">
      <?php include("includes/sidebar-account.php"); ?>
    </div>
	
  </div>
  <div  class="row">
  </div>
</div>
<!--container end-->
<?php include("includes/footer.php"); ?>

<script>
function addtocart(id,numbucks,name,total,ppc)
{
$("#s"+id).html("Added!");
$.ajax({
     url:"add-to-cart.php",
	 type:"post",
	 data:{'crtidpck':id,'numbucks':numbucks,'name':name,'total':total,'ppc':ppc},
	 success:function(da){
	      alert('added');
		  
    }
});
}
</script>

3)The packages added to cart will be saved to session,use the file below add-to-cart.php

<?php
if(!session_id()){
	session_start();
}
include('includes/checksession.php');
/* unset($_SESSION['cart']);  */
$_SESSION['cart']['id'][] = $_POST['crtidpck'];
$_SESSION['cart']['numbucks'][] = $_POST['numbucks'];
$_SESSION['cart']['name'][] = $_POST['name'];
$_SESSION['cart']['total'][] = $_POST['total'];
$_SESSION['cart']['ppc'][] = $_POST['ppc'];
print_r($_SESSION['cart']);
?>


4)And the checkout file managing removal of items from cart and displaying them on the page on file checkout.php as follows


<?php
session_start();
 $title = "BabyBoomApps - Content Page";
$page_description = "BabyBoomApps is the place to help fund and gift a baby's future through contests, drawings and online fun!";
include("includes/header.php");
include('includes/checksession.php');
include('includes/connect.php');

?>

<!--breadcrumbs start-->
<div class="breadcrumbs">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-sm-4">
        <h1 id="main_conhdr">MEMBERS</h1>
      </div>
      <div class="col-lg-8 col-sm-8">
        <ol class="breadcrumb pull-right">
          <li><a href="#">Home</a></li>
          <li class="active">BoomBucks
          <li>
        </ol>
      </div>
    </div>
  </div>
</div>
<!--breadcrumbs end-->
<!--container start-->
<div class="container">
  <div class="row">

    <div class="col-lg-9 about">
	<section class="credits-header">
          <div id="buy-credits-default">
            <h3>BoomBucks Cart</h3>
          
            <div class="clear"></div>
         
        </section>
     <div class="boombucks_section">
           
            <section class="tile-container smaller-boombucks_section">
			
			
			<!-------this section runs when cart is updated----------->
			<?php if($_POST['upcart']) { 
					if($_GET['index'])
					{
					$removeindex = $_GET['index'];
					unset($_POST[$removeindex]);
					$_POST = array_values($_POST);
					}
			?>
			<table style="width:100%">
			<thead style="border-bottom:1px dashed #ccc">
			<tr>
			<th>Package</th><th>Package Price</th><th>Quantity</th><th>Sub Total</th><th>&nbsp;</th>
			</tr>
			</thead>
			<tbody>
			
			<?php 
			//echo "<pre>";print_r($_SESSION['cart']['id']); print_r($_POST);
			$countt = count($_SESSION['cart']['id']);
			$total = 0;
			for($l=0;$l<$countt;$l++)
			{
			?>
			<tr>
			<td>
			<?php echo $_SESSION['cart']['numbucks'][$l];?>&nbsp;BoomBucks
			</td>
			
			<td>
			$<span id="ppc<?php echo $_SESSION['cart']['id'][$l];?>"><?php echo $_SESSION['cart']['ppc'][$l];?></span>
			</td>
			<td>
			<form action="" method="post">
			<input type="text" value="<?php echo $_POST[$l];?>" name="<?php echo $l ;?>" id="<?php echo $_SESSION['cart']['id'][$l];?>" style=" border: 1px solid #CCCCCC;
    height: 30px;
    width: 50px;"/>
			</td>
			<td>
			$<span id="s<?php echo $l;?>">
			
			<?php echo ($_SESSION['cart']['numbucks'][$l])*($_SESSION['cart']['ppc'][$l])*($_POST[$l]);?>
			
			
			</span>
			</td>
			<td>
			<span class="removespan" id="re<?php echo $l;?>" onclick="removeitem('<?php echo $l;?>')">Remove</span>
			</td>
			</tr>
			<?php 
			$total+=  ($_SESSION['cart']['numbucks'][$l])*($_SESSION['cart']['ppc'][$l])*($_POST[$l]);
			} ?>
			<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>Grand Total</td><td>$<span id="grand_total"><?php echo $total; ?></span></td><td>&nbsp;</td></tr>
			</tbody>
			</table>
					
            <?php }else { ?>
			<!------------------>
		
			
			<table style="width:100%">
			<thead style="border-bottom:1px dashed #ccc">
			<tr>
			<th>Package</th><th>Package Price</th><th>Quantity</th><th>Sub Total</th><th>&nbsp;</th>
			</tr>
			</thead>
			<tbody>
			
			<?php 
			
			$countt = count($_SESSION['cart']['id']);
			$total = 0;
			for($l=0;$l<$countt;$l++)
			{
			?>
			<tr>
			<td>
			<?php echo $_SESSION['cart']['numbucks'][$l];?>&nbsp;BoomBucks
			</td>
			
			<td>
			$<span id="ppc<?php echo $_SESSION['cart']['id'][$l];?>"><?php echo $_SESSION['cart']['ppc'][$l];?></span>
			</td>
			<td>
			<form action="" method="post">
			<input type="text" value="1" name="<?php echo $l;?>" id="<?php echo $_SESSION['cart']['id'][$l];?>" style=" border: 1px solid #CCCCCC;
    height: 30px;
    width: 50px;"/>
			</td>
			<td id="sub<?php $l;?>">
			$<span id="s<?php echo $l;?>"><?php echo ($_SESSION['cart']['numbucks'][$l])*($_SESSION['cart']['ppc'][$l]);?></span>
			</td>
			<td>
			<span class="removespan" id="re<?php echo $_SESSION['cart']['id'][$l];?>" onclick="removeitem('<?php echo $l;?>')">Remove</span>
			</td>
			</tr>
			<?php 
			$total+=  ($_SESSION['cart']['numbucks'][$l])*($_SESSION['cart']['ppc'][$l]);
			} ?>
			<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>Grand Total</td><td>$<span id="grand_total"><?php echo $total; ?></span></td><td>&nbsp;</td></tr>
			</tbody>
			</table>
			<?php } ?>
            </section>
            <div class="clear"></div>
          
            
           
          </div>
		  <br/><br/>
		  <input type="submit" name="upcart" class="row button-next btn btn-info" value="Update Cart" style="float:left;width:20%;"></form><span class="row button-next btn btn-info" style="float:left;width:20%;margin-left:5px;" onclick="removeall();">Remove All</span><span class="row button-next btn btn-info" style="float:right;width:20%;" onclick="window.location.href='checkout.php'" id="proced_checkout">Proceed to Checkout</span>
    </div>
	
    <div class="col-lg-">
      <?php include("includes/sidebar-account.php"); ?>
    </div>
	
  </div>
  <div  class="row">
  </div>
</div>
<!--container end-->
<?php include("includes/footer.php"); ?>


<script>
function addtocart(id)
{
$.ajax({
     url:"add-to-cart.php",
	 type:"post",
	 data:{'crtidpck':id},
	 success:function(da){
	      alert('added');
		  $("#s"+id).html("Added!");
    }
});
}
function removeitem(id)
{

var subtotal = $("#s"+id).text();

var grand_total = $("#grand_total").text();
var new_grand_total = parseInt(grand_total) - parseInt(subtotal);
$("#grand_total").text(new_grand_total);
$("#re"+id).parent("td").parent("tr").hide(0);
 $.ajax({
     url:"remove-from-cart.php",
	 type:"post",
	 data:{'crtidpck':id},
	 success:function(da){
	      //alert('Removed!');
		  window.location.href="checkout.php?index="+id;
		 // $("#s"+id).html("Removed!");
    }
}); 
}
function removeall()
{
 $.ajax({
     url:"remove-all-from-cart.php",
	 type:"post",
	 success:function(da){
	     $("tbody tr:last").prevAll("tr").hide(0);
		 $("#grand_total").text("00.00");
    }
}); 
}
</script>

5)The other ajax request files used in checkout.php are
a)remove-from-cart.php

<?php
if(!session_id()){
	session_start();
}
include('includes/checksession.php');
$index = $_POST['crtidpck'];

unset($_SESSION['cart']['id'][$index]);
$_SESSION['cart']['id'] = array_values($_SESSION['cart']['id']);

unset($_SESSION['cart']['numbucks'][$index]);
$_SESSION['cart']['numbucks'] = array_values($_SESSION['cart']['numbucks']);

unset($_SESSION['cart']['name'][$index]);
$_SESSION['cart']['name'] = array_values($_SESSION['cart']['name']);

unset($_SESSION['cart']['total'][$index]);
$_SESSION['cart']['total'] = array_values($_SESSION['cart']['total']);

unset($_SESSION['cart']['ppc'][$index]);
$_SESSION['cart']['ppc'] = array_values($_SESSION['cart']['ppc']);


?> 

b)remove-all-from-cart.php

<?php
if(!session_id()){
	session_start();
}
include('includes/checksession.php');
unset($_SESSION['cart']);
?>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s