Help needed: Creating a dynamic checkout page with item removal feature

Ecom
1

Hey everyone! I’m working on a checkout page for my online store and I’m stuck. I want customers to be able to remove items from their cart before they print the bill. I’ve set up buttons for each item, but I can’t get them to work right.

Here’s what I’ve tried:

<?php
if ($userLoggedIn) {
  $cartItems = getCartItems();
  if ($cartItems) {
    echo '<table>';
    echo '<tr><th>Item</th><th>Amount</th><th>Price</th></tr>';
    foreach ($cartItems as $item) {
      echo '<tr>';
      echo '<td>' . $item['name'] . '</td>';
      echo '<td>' . $item['quantity'] . '</td>';
      echo '<td>$' . $item['price'] . '</td>';
      echo '<td><button name="remove_' . $item['id'] . '">Delete</button></td>';
      echo '</tr>';
    }
    echo '</table>';
  }
}
?>

The buttons show up, but clicking them doesn’t do anything. I’ve tried both GET and POST methods, but no luck. I even tried to echo the item name when the button is clicked, but nothing happens.

Any ideas on how to make this work? I’m really hoping to get the ‘remove item’ feature working before I finish the print function. Thanks in advance for any help!

2

I’ve faced similar challenges with dynamic cart updates. Have you considered using a form submission for each removal button? It’s a simpler approach that doesn’t require JavaScript.

You could modify your PHP to include a form for each item:

echo '<form method="POST">';
echo '<input type="hidden" name="item_id" value="' . $item['id'] . '">';
echo '<button type="submit" name="remove_item">Delete</button>';
echo '</form>';

Then, at the top of your PHP file, handle the form submission:

if(isset($_POST['remove_item'])) {
    $item_id = $_POST['item_id'];
    removeItemFromCart($item_id);
    header('Location: ' . $_SERVER['PHP_SELF']);
    exit();
}

This method refreshes the page after removal, but it’s straightforward and works without JavaScript. Let me know if you need more clarification on this approach.

3

Hey FlyingEagle, sounds like you’re on the right track with your checkout page! Have you considered using JavaScript to handle the button clicks? That might be the missing piece.

You could attach event listeners to your buttons that send an AJAX request to remove the item when clicked. Something like:

document.querySelectorAll('button[name^="remove_"]').forEach(button => {
    button.addEventListener('click', function() {
        let itemId = this.name.split('_')[1];
        // AJAX call to remove item
    });
});

Then on the server side, you’d need a PHP script to handle the removal request.

What do you think about this approach? Have you worked with AJAX before? It can really make your page feel more dynamic and responsive.

Also, I’m curious - what kind of items are you selling in your store? Might help to know in case there are any specific considerations for your checkout process.

4

hey flyingeagle, hav u thought about using ajax for this? it’d make ur page way more responsive. u could use jquery to make it easier:

$('button[name^=\"remove_\"]').click(function() {
  var itemId = $(this).attr('name').split('_')[1];
  $.post('remove_item.php', {id: itemId}, function() {
    // update cart here
  });
});

'then just make a remove_item.php to handle the server-side stuff. lmk if u need more help!