0

My question is. I want to press that remove button at the end and remove my item form the session.

how can i do this?

js:

$('.remove button') .click (function() {
removeItem(This);
});

PHP and HTML:

   <?php
  foreach($_SESSION["cart"] as $item) {
  $data = getProducts($pdo, $item);
  if ($data["ColorName"] == NULL) {
      $color = "";
  } else {
      $color = "Color: ".$data["ColorName"]."<br>";
  }
  if ($data["Size"] == "") {
      $size = "";
  } else {
      $size = "Size: ".$data["Size"]."<br>";
  }
  print("<div class=\"basket-product\">
    <div class=\"item\">
      <div class=\"product-image\">
        <img src=\"http://placehold.it/120x166\" alt=\"Placholder Image 2\" class=\"product-frame\">
      </div>
      <div class=\"product-details\">
        <h1><strong><span class=\"item-quantity\">1</span> x ".$data["StockItemName"]."</strong></h1>
        <p><strong>".$color." ".$size."</strong></p>
        <p>Product Code - ".$data["StockItemID"]."</p>
      </div>
    </div>
    <div class=\"price\">".$data["RecommendedRetailPrice"]."</div>
    <div class=\"quantity\">
      <input type=\"number\" value=\"1\" min=\"1\" class=\"quantity-field\">
    </div>
    <div class=\"subtotal\">". $data["RecommendedRetailPrice"] * 1 ."</div>
    <div class=\"remove\">
      <button>Remove</button>
    </div>
  </div>");
  } 

I tried using Unset in allot of places, but that doesn't seem to get working :')

2
  • so the $_SESSION["cart"] is an array object right? do you want to remove a single item from it with the remove button or unset the whole session variable? Commented Dec 10, 2018 at 2:25
  • yes the $_SESSION["cart"] s an array. i just want to remove 1 item from the session using that button. it's a cart for a webshop. so inmagine multiple items in your cart and then you want to remove 1 item when you got for example like 3 different items in there Commented Dec 10, 2018 at 2:29

1 Answer 1

1

:)

The solution is rather easy, but requires some explanation in order to be understood.

What you need here is to:

  1. Create a new php file, which would fetch the post data (in this case ID of an element) and then simply unset the key (sub-array), which contains the cart item you want to remove. You can use $key_to_remove = array_search($_POST['stock_item_id'], array_column($_SESSION["cart"], 'StockItemID')); and then simply unset it unset($_SESSION["cart"][$key_to_remove]);
  2. Assign id="remove_<?php echo $data["StockItemID"]; ?>" to the <div class="basket-product"> and data-product-id="<?php echo $data["StockItemID"]; ?>" to the button, so you can identify it for item removal via javascript/jquery and you need that value extracted later for the item you want to remove from the corresponding session array (which is, in this case, $_SESSION["cart"]).
  3. Create a callback function for removal on('click', function(){});
  4. Inside that function extract that value data-product-id from the button you just clicked var stock_item_id=$(this).attr('data-product-id');
  5. Inside the same function, after step 4, create an ajax call to the file from step 1 with the post data from step 4
  6. On successful execution of an ajax call, delete the corresponding product row you have marked with id="remove_<?php echo $data["StockItemID"]; ?>" in step 2 with the following code $("#remove_"+stock_item_id).remove();

In the end, your code would look like this

YOUR INITIAL PHP AND HTML (With small corrections)

<?php 
 foreach($_SESSION["cart"] as $item) {
     $data = getProducts($pdo, $item);
     if ($data["ColorName"] == NULL) {
        $color = "";
     } else {
        $color = "Color: ".$data["ColorName"]."<br>";
     }
    if ($data["Size"] == "") {
        $size = "";
    } else {
        $size = "Size: ".$data["Size"]."<br>";
    }
 ?>
 <div class="basket-product">
    <div class="item">
        <div class="product-image">
            <img src="http://placehold.it/120x166" alt="Placholder Image 2" class="product-frame">
        </div>
        <div class="product-details">
            <h1>
                <strong>
                    <span class="item-quantity">
                        1
                    </span>
                    x <?php echo $data["StockItemName"]; ?>
                </strong>
            </h1>
            <p>
                <strong>
                    <?php echo $color." ".$size; ?>
                </strong>
            </p>
            <p>
                Product Code - <?php echo $data["StockItemID"]; ?>
            </p>
        </div>
    </div>
    <div class="price">
        <?php echo $data["RecommendedRetailPrice"]; ?>
    </div>
    <div class="quantity">
        <input type="number" value="1" min="1" class="quantity-field">
    </div>
    <div class="subtotal">
        <?php echo $data["RecommendedRetailPrice"]; ?> * 1
    </div>
    <div class="remove">
        <button data-product-id="<?php echo $data["StockItemID"]; ?>">
            Remove
        </button>
    </div>
 </div>
<?php
}
?>

JS

$(document).ready(function(){
    $('.remove button').on('click', function() {
        var stock_item_id=$(this).attr('data-product-id');

        $.ajax({
            url: "new_php_file_created_to_remove_item_from_session_via_ajax.php",
            data: 
                {stock_item_id : stock_item_id}
        }).done(function() {
            $("#remove_"+stock_item_id).remove();
        });
    });
});

NEW PHP FILE (new_php_file_created_to_remove_item_from_session_via_ajax.php)

<?php
    $stock_item_id = $_POST['stock_item_id'];
    $key_to_remove = array_search($_POST['stock_item_id'], array_column($_SESSION["cart"], 'StockItemID'));
    unset($_SESSION["cart"][$key_to_remove]);

    if(isset($_SESSION["cart"][$key_to_remove])) {
        return false;
    }
    return true;

For the sake of readability and further maintenance and possible additions, I would strongly recommend you to separate php, html and js code into separate files, but that's only a suggestion. :)

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.