Я реализовал функцию корзины покупок на веб-сайте моего проекта, следуя этому видео-руководству на YT https://www.youtube.com/watch?v=eAK8uYtNTy4&t=3528s, и я могу добавлять товары в корзину и удалять товары (вроде). Однако функция удаления действительно очень странная, потому что она позволяет мне удалить элемент, но когда я нажимаю на нее, она также удаляет другие элементы, которые в настоящее время находятся в корзине ...
Вот мои коды для the cart (cart. php)
<?php
session_start();
require_once ("conn.php");
require_once ("component.php");
if (isset($_POST['remove'])){
if ($_GET['action'] == 'remove'){
foreach ($_SESSION['cart'] as $key => $value){
if($value["ID"] == $_GET['game_ID']){
unset($_SESSION['cart'][$key]);
echo "<script>alert('Product has been Removed...!')</script>";
echo "<script>window.location = 'cart.php'</script>";
}
}
}
}
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart</title>
<link rel="icon" href= "images/logoonly.png" type="image/jpg" sizes="16x16">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/cart.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="js/sticky.js"></script>
<script src="https://kit.fontawesome.com/ac84272c35.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Navigation -->
<navbar>
<section class="navbar-section" style="background-color: #252525; box-shadow: 0px 2px 6px black;">
<div class="navbar-div">
<div class="navbar-div-logo">
<a href="index.html">
<img href="index.html" class="logo-pic" src="images/logoonly.png" alt="">
<img class="logo-name" src="images/logonameonly.png" alt="">
</a>
</div>
<ul class="navbar-ul-links">
<li> <a class="navbar-a-links" href="index.html">home</a> </li>
<li> <a class="navbar-a-links" href="store.php">store</a> </li>
<li> <a class="navbar-a-links" href="news.html">news</a> </li>
<li> <a class="navbar-a-links" href="about.html">about</a> </li>
</ul>
<div class="navbar-div-cart-login">
<a href="cart.html"><i class="fas fa-shopping-bag"></i></a>
<a class="login navbar-a-links" href="login.html">login</a>
</div>
</div>
</section>
</navbar>
<!-- /Navigation -->
<!-- Main Content -->
<?php
$total = 0;
if (isset($_SESSION['cart'])){
$ID = array_column($_SESSION['cart'], 'game_ID');
include("conn.php");
$result = mysqli_query($con,"Select * from games where games.game_status = 1");
while($row = mysqli_fetch_array($result)){
foreach ($ID as $game_ID){
if ($row['game_ID'] == $game_ID){
cartElement( $row['game_name'],$row['game_price'], $row['game_ID']);
$total = $total + (int)$row['game_price'];
}
}
}
}else{
echo "<h5>Cart is Empty</h5>";
}
?>
</section>
<!-- /Main Content -->
<!-- Footer -->
<footer>
<section class="footer-section" style="background-color: black;">
</section>
</footer>
<!-- /Footer -->
<script src="js/modal.js"></script>
<!-- Animate Show Panel -->
<script type="text/javascript">
function show(elementId) {
document.getElementById("personal-info").style.display = "none";
document.getElementById("acc-info").style.display = "none";
document.getElementById(elementId).style.display = "flex";
}
</script>
<!-- /Animate Show Panel -->
</body>
</html>
вот компоненты тележки для отображения товаров. (компонент. php)
<?php
function component($game_name, $game_price, $game_ID){
$element = "
<form action=\"store.php\" method=\"post\">
<div class=\"newrelease\">
<div class=\"special-offer-description-div\">
<h5 name=\"game_name\">$game_name</input></h5>
<button type=\"submit\" class=\"purchase\" name=\"add\">Add To Cart</button>
<input type='hidden' name='game_ID' value='$game_ID'>
<div class=\"price-div\">
<h6>- 85%</h6>
<p class=\"strikethrough\" name=\"game_price\">RM$game_price</p>
</div>
</div>
</div>
</form>
";
echo $element;
}
function cartElement($game_name, $game_price, $game_ID){
$element = "
<form action=\"cart.php?action=remove&id=$game_ID\" method=\"post\">
<section class=\"cart-section\">
<div class=\"block\"></div>
<div class=\"cart-div\">
<h1>$game_name</h1>
<!-- Cart Games -->
<div class=\"cart-items-div\">
<div class=\"description-div\">
<div class=\"description\">
<!-- Game Name -->
<h2 class=\"game-title\"></h2>
<!-- Game Description -->
<div class=\"d\">
<div class=\"details\">
<h2>overall reviews:</h2>
<h2>release date:</h2>
</div>
<div class=\"game-details\">
<h2 style=\"color: #407AD3;\">very positive</h2>
<h2>8 aug, 2018</h2>
</div>
</div>
<!-- Game Specification -->
<div class=\"compatibility\">
<i class=\"fab fa-windows\"></i>
<i class=\"fab fa-apple\"></i>
<i class=\"fab fa-linux\"></i>
</div>
</div>
<div class=\"button-div\">
<!-- Remove Game From Cart Button -->
<button type=\"submit\" class=\"btn btn-danger mx-2\" name=\"remove\"><i class=\"fas fa-trash-alt\" style=\"color: #FF4444\" ></i> </button>
<!-- Purchase Game -->
<button class=\"purchase\" input type=\"text\" value=\"1\">Purchase</button>
<!-- Price -->
<h3 style=\"border-right: none;\">$game_price</h3>
</div>
</div>
</div>
</form>
";
echo $element;
}