Adding Multiple Products to Basket using PHP Sessions

Question

Ive built a basket/checkout system for an e-commerce site, and have used session variables to store product name, price and quantity and can have them be displayed on my checkout page. I'm struggling to be able to add different products to the basket, when the user goes to another product and clicks the add to basket button it removes the first product from the basket. does anyone know how I could change my code so that different products can be added to the basket without removing any products that are currently in the variable. and also how could I add the Quantity to the URL so that I can add it to the basket. the quantity is an input box on the products page that the user can tryp the number of products into.

this is my products page -

<?php
require('includes/application_top.php');
$page_title='Details';
require('includes/site_header.php');
$_GET['prod_ID'];
$product_id = isset($_REQUEST['prod_ID']) ? (int) $_REQUEST['prod_ID'] : 0;
$pound ="&pound;";
?>
<style>
<?php
require('css/prod_details.css');
?>
</style>
<br>
<br>
<br>
<br>
<br>
<?php $product = get_product_details1($freshKickz_conn); ?>

         <?php foreach($product as $productdetails) {
 ?>



<main class="container">

  <!-- Left Column / Headphones Image -->
  <div class="left-column">
    <img data-image="red" class="active" src="<?= htmlspecialchars($productdetails['images']) ?>" style="height: 400px; width: 400px;" alt="">
  </div>
  <!-- Right Column -->
  <div class="right-column">
 
    <!-- Product Description -->
    <div class="product-description">
      <h1><?= htmlspecialchars($productdetails['prod_Name']) ?></h1>
      <p><?= htmlspecialchars($productdetails['prod_Details']) ?></p>
    </div>

    <!-- Product Pricing -->
    <div class="product-price">
      <span><?=$pound?><?= htmlspecialchars($productdetails['prod_Price'])?></span>
      <a href="basket_page.php?quantity=1&action=add_product&name=<?=$productdetails['prod_Name']?>&price=<?=$productdetails['prod_Price']?>" class="cart-btn">Add to Basket</a>
    </div>
    <br>
    <div class="quantity">
        <span>Quantity</span>
        <br>
        <input type="number" min="1" max="9" step="1" value="1">
    </div>
  </div>
</main>
<?php
} ?>
<script src="js/prodJS.js"></script>
<script>
$(document).ready(function () {

    $('.color-choose input').on('click', function () {
        var headphonesColor = $(this).attr('data-image');

        $('.active').removeClass('active');
        $('.left-column img[data-image = ' + headphonesColor + ']').addClass('active');
        $(this).addClass('active');
    });

});
</script>
<?php
require('includes/application_bottom.php');
require('includes/site_footer.php');
?>

and this is my basket/checkout page -

<?php

require('includes/application_top.php');
$page_title='Your Basket';
require('includes/site_header.php');

if ( ! isset($_SESSION['basket'])) {
  $_SESSION['basket'] = array();
}
$pound ="&pound;";
$action = $_REQUEST['action'] ?? '';
$err = '';

if($_REQUEST['action']=='add_product'){
  $_SESSION['basket'][$_REQUEST['name']]=$_REQUEST['quantity']=$_REQUEST['quantity'];
}

?>
<style>
<?php
require('css/basket.css');
?>
</style>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="row">
  <div class="col-75">
    <div class="container">
      <form action="successful_order.php">

        <div class="row">
          <div class="col-50">
            <h3>Billing Address</h3>
            <label for="fname"><i class="fa fa-user"></i> Full Name</label>
            <input type="text" id="fname" name="firstname" placeholder="John M. Doe">
            <label for="email"><i class="fa fa-envelope"></i> Email</label>
            <input type="text" id="email" name="email" placeholder="[email protected]">
            <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
            <input type="text" id="adr" name="address" placeholder="542 W. 15th Street">
            <label for="city"><i class="fa fa-institution"></i> City</label>
            <input type="text" id="city" name="city" placeholder="New York">

            <div class="row">
              <div class="col-50">
                <label for="state">County</label>
                <input type="text" id="county" name="county" placeholder="Cheshire">
              </div>
              <div class="col-50">
                <label for="zip">PostCode</label>
                <input type="text" id="postcode" name="postcode" placeholder="SK11 6TF">
              </div>
            </div>
          </div>

          <div class="col-50">
            <h3>Payment</h3>
            <label for="fname">Accepted Cards</label>
            <div class="icon-container">
              <i class="fa fa-cc-visa" style="color:navy;"></i>
              <i class="fa fa-cc-amex" style="color:blue;"></i>
              <i class="fa fa-cc-mastercard" style="color:red;"></i>
              <i class="fa fa-cc-discover" style="color:orange;"></i>
            </div>
            <label for="cname">Name on Card</label>
            <input type="text" id="cname" name="cardname" placeholder="John More Doe">
            <label for="ccnum">Credit card number</label>
            <input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444">
            <label for="expmonth">Exp Month</label>
            <input type="text" id="expmonth" name="expmonth" placeholder="September">

            <div class="row">
              <div class="col-50">
                <label for="expyear">Exp Year</label>
                <input type="text" id="expyear" name="expyear" placeholder="2018">
              </div>
              <div class="col-50">
                <label for="cvv">CVV</label>
                <input type="text" id="cvv" name="cvv" placeholder="352">
              </div>
            </div>
          </div>

        </div>
        <label>
          <input type="checkbox" checked="checked" name="sameadr"> Shipping address same as billing
        </label>
        <input type="submit" value="Checkout" class="btn">
      </form>
    </div>
  </div>

  <div class="col-25">
    <div class="container">
      <h4>Cart
        <span class="price" style="color:black">
          <i class="fa fa-shopping-cart"></i>
        </span>
      </h4>
      <br>
      <br>
      <p><span class="name"><?= $_REQUEST['name'] ?></span> <span class="price"><span class="name"><?= $_REQUEST['quantity'] ?><br></span><?= $pound ?><?= $_REQUEST['price'] ?></span></p>
      <hr>
      <p>Total <span class="price" style="color:black"><b>$30</b></span></p>
    </div>
  </div>
</div>
<?php
require('includes/application_bottom.php');
require('includes/site_footer.php');
?>

Answer 1

First of all you should avoid using GET request to perform an action. Next try to use product id because name can be same for different products.

So my offer for product page:

<?php
require('includes/application_top.php');
$page_title='Details';
require('includes/site_header.php');
$product_id = isset($_REQUEST['prod_ID']) ? (int) $_REQUEST['prod_ID'] : 0;
$pound ="&pound;";
?>
<style>
<?php
require('css/prod_details.css');
?>
</style>
<br>
<br>
<br>
<br>
<br>
<?php $product = get_product_details1($freshKickz_conn); ?>
<?php foreach($product as $productdetails): ?>
    <main class="container">
        <!-- Left Column / Headphones Image -->
        <div class="left-column">
            <img data-image="red" class="active" src="<?= htmlspecialchars($productdetails['images']) ?>" style="height: 400px; width: 400px;" alt="">
        </div>
        <!-- Right Column -->
        <div class="right-column">
            <!-- Product Description -->
            <div class="product-description">
                <h1><?= htmlspecialchars($productdetails['prod_Name']) ?></h1>
                <p><?= htmlspecialchars($productdetails['prod_Details']) ?></p>
            </div>
            <!-- Product Pricing -->
            <form action="basket_page.php" method="POST">
                <div class="product-price">
                    <span><?=$pound?><?= htmlspecialchars($productdetails['prod_Price'])?></span>
                    <input type="hidden" name="action" value="add_product" />
                    <!-- i'm not sure what index did you use for id so -->
                    <input type="hidden" name="id" value="<?php echo htmlspecialchars($productdetails['prod_Name']); ?>" />
                    <input type="hidden" name="price" value="<?php echo htmlspecialchars($productdetails['prod_Price']); ?>" />
                    <input type="hidden" name="name" value="<?php echo htmlspecialchars($productdetails['prod_Name']); ?>" />
                    <button type="submit" class="cart-btn">Add to Basket</button>
                </div>
                <br>
                <div class="quantity">
                    <span>Quantity</span>
                    <br>
                    <input type="number" min="1" max="9" step="1" value="1">
                </div>
           </form>
        </div>
    </main>
<?php endforeach; ?>
<script src="js/prodJS.js"></script>
<script>
$(document).ready(function () {
    $('.color-choose input').on('click', function () {
        var headphonesColor = $(this).attr('data-image');
        $('.active').removeClass('active');
        $('.left-column img[data-image = ' + headphonesColor + ']').addClass('active');
        $(this).addClass('active');
    });
});
</script>
<?php
require('includes/application_bottom.php');
require('includes/site_footer.php');
?>

Next you can use associative array for your session. Don't forget to check all user input. It is important.

<?php
require('includes/application_top.php');
$page_title = 'Your Basket';
require('includes/site_header.php');

if (!isset($_SESSION['basket'])) {
    $_SESSION['basket'] = [];
}
$pound = "&pound;";
$action = $_REQUEST['action'] ?? '';
$err = '';

if ($action === 'add_product') {
    $id = isset($_POST['id']) ? (int) $_POST['id'] : null;
    $price = isset($_POST['price']) ? (float) $_POST['price'] : null;
    $number = isset($_POST['number']) ? (int) $_POST['number'] : null;
    $name = isset($_POST['name']) ? trim($_POST['name']) : null;
    if ($id && $price && $number) {
        $_SESSION['basket'][$id] = [
            'id' => $id,
            'price' => $price,
            'number' => $number,
            'name' => $name,
        ];
    }
}
?>

Next you have an error in rendering. You should use your session array. Not a raw input.

<div class="col-25">
    <div class="container">
        <h4>
            Cart
            <span class="price" style="color:black">
                <i class="fa fa-shopping-cart"></i>
            </span>
        </h4>
        <br>
        <br>
        <?php 
            $total = 0;
            foreach ($_SESSION['basket'] as $item): 
                $total += $item['price'] * $item['number'];
        ?>
            <p>
                <span class="name"><?php echo htmlspecialchars($item['name']) ?></span> 
                <span class="price">
                    <span class="name"><?= $item['number'] ?><br></span>
                    <?= $pound ?><?= $item['price'] ?>
                </span>
            </p>
          <hr>
        <?php endforeach; ?>
        <p>
            Total <span class="price" style="color:black"><b>$<?= total ?></b></span>
        </p>
    </div>
</div>

And finally please take a look at specialized php scripts for ecommerce like WooCommerce or Magento.