0

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 />&pound;'.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">&nbsp;</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>&pound;<?php echo str_replace("£ ","",$array['unit_price']); ?></td>
                                                  <td><strong>&pound;<?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>&pound;<?php echo sprintf("%01.2f", $array['unit_price']); ?></td>
                                                  <td><strong>&pound;<?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.

3
  • what exactly do you want to do in the table? hide that row or mark it as already added? giv more details
    – redDevil
    Mar 10, 2012 at 10:17
  • Sorry, you are right I should have been more specific. What I want to do is update the quantity and price of each product in the tabe if the quantities are changed and the 'Update Bag' is clicked or remove the row from the table if the item is removed. My problem isn't doing this as such but how to do this as well as update the shopping cart div in the sidebar as well.
    – The Baker
    Mar 11, 2012 at 6:21
  • 1
    Use JSON as response instead of HTML. So you would have something like: response = [{ product: 'a', price: 1 },{ product: 'b', price: 2 },...], so you can re-use it. Mar 11, 2012 at 8:59

2 Answers 2

0

Just update your success function :

success: function(html) {
    $('#shopping-bag p').html(html);
    // update / add to your table here
    $updatehere = $('#tableid #idortd');
    $updatehere.text(parseInt($updatehere.text())++);
}

Above is an example of incrementing a value in a ` by one. you could replace this with adding a row

0

All OK now, I have finally found how to reload the div that holds the shopping cart table - I have put all content inside the inner-content div into a separate file, include it normally and use

$("#inner-content").load(location.href + " #inner-content>*", "");

To reload on update.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.