I am currently implementing a shopping cart using jQuery, Ajax and PHP and most of it is working. However I am currently stuck on how to update the main shopping basket page content when I update the cart as at the moment my returned html updates the shopping cart area in the sidebar (that works fine).
So my question is how do I also update the table that displays all the shopping cart items in the main content area of the site at the same time?
My jQuery (for updating the cart):
$('.update_cart').submit(function (e) {
e.preventDefault();
$.ajax({
cache: false,
url: 'inc/shopping_bag.php',
data: $(this).serialize() + '&action=update',
type: 'POST',
success: function(html) {
$('#shopping-bag p').html(html);
}
});
});
My PHP for updating:
elseif (!empty($action) && $action == 'update') {
if (is_array($_POST['item_qty'])) {
foreach ($_POST['item_qty'] as $key=>$quantity) {
$quantity=ceil($quantity);
if ($quantity==0) {
unset($_SESSION['basket'][$key]);
} else {
$_SESSION['basket'][$key]['item_qty']=$quantity;
}
}
}
update_basket();
}
function update_basket() {
foreach ($_SESSION['basket'] as $array)
{
$totalItems+=$array['item_qty'];
$cost=$array['item_qty']*$array['unit_price'];
$total+=$cost;
}
echo 'Shopping Bag<br>'.$totalItems.' Items<br />£'.sprintf("%01.2f", $total);
}
My shopping cart page (sorry a bit long):
<div id="content">
<section>
<div class="content-seperator">
<h1>Shopping Bag</h1>
</div>
<div id="inner-content">
<section>
<?php if (count($_SESSION['basket']) > 0) { ?>
<form action="#" class="update_cart">
<table id="cart">
<thead>
<tr>
<th width="60">Quantity</th>
<th>Item</th>
<th width="70">Unit Price</th>
<th width="60">Total</th>
<th class="blank" width="90"> </th>
</tr>
</thead>
<tbody>
<?php
$total=0;
$count=0;
foreach ($_SESSION['basket'] as $array)
{
$check_id = substr($array['item_id'], 0, 5);
$cost=sprintf("%01.2f", $array['item_qty']*$array['unit_price']);
$total+=$cost;
if (!empty($array['image'])) {
if (file_exists($array['image'])) {
$image_path = $array['image'];
} else {
$image_path = '<img src="images/missing.gif" alt="missing image" />';
}
} else {
$image_path = '<img src="images/missing.gif" alt="missing image" />';
}
$image = getImagesize($image_path);
$dimensions = imgResize($image[0], $image[1], 80);
if ($check_id=='parts') {
?>
<tr>
<td class="align-centre">
<input name="item_qty[<?php echo $count; ?>]" type="text" size="1" value="<?php echo $array['item_qty']; ?>" class="formfield align-centre" />
<input name="unit_price[<?php echo $count; ?>]" type="hidden" value="<?php echo $array['unit_price']; ?>" />
</td>
<td>
<span class="basket_img"><img src="<?php echo $image_path; ?>" <?php echo $dimensions; ?> alt="Diesel Injector Image" /></span>
<strong><?php echo $array['category']; ?> Injector</strong><br />
<span class="basketlabel">Part No:</span> <strong><?php echo $array['item_name']; ?></strong>
</td>
<td>£<?php echo str_replace("£ ","",$array['unit_price']); ?></td>
<td><strong>£<?php echo $cost; ?></strong></td>
<td><a href="?removeItem=<?php echo $array['item_id']; ?>" class="basket_remove">Remove Item</a></td>
</tr>
<?php
} if ($check_id=='prods') { ?>
<tr>
<td class="align-centre">
<input name="item_qty[<?php echo $count; ?>]" type="text" size="1" value="<?php echo $array['item_qty']; ?>" class="formfield align-centre" />
<input name="unit_price[<?php echo $count; ?>]" type="hidden" value="<?php echo $array['unit_price']; ?>" />
</td>
<td>
<span class="basket_img"><img src="<?php echo $image_path; ?>" <?php echo $dimensions; ?> alt="Diesel Product Image" /></span>
<strong><?php echo $array['category']; ?></strong><br />
Product Code: <strong><?php echo $array['item_name']; ?></strong>
</td>
<td>£<?php echo sprintf("%01.2f", $array['unit_price']); ?></td>
<td><strong>£<?php echo $cost; ?></strong></td>
<td><a href="?removeItem=<?php echo $array['item_id']; ?>" class="basket_remove">Remove Item</a></td>
</tr>
<?php }
$count++;
} ?>
</tbody>
</table>
<input type="submit" name="update_cart" value="Update Shopping Bag" class="rounded-buttons" />
<input type="button" name="empty_cart" value="Empty Shopping Bag" class="rounded-buttons" />
</form>
<?php } else { ?>
<p class="no_items">You have no items in your shopping bag</p>
<?php } ?>
</section>
</div>
Any help greatly appreciated, thank you.
response = [{ product: 'a', price: 1 },{ product: 'b', price: 2 },...]
, so you can re-use it.