PO/productdetail.php
<?php
include "db.php";
$productid = $_GET["product"]
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css?t=<?php echo time() ?>">
<script src="ajax.js"></script>
</head>
<body>
<?php
include "nav.php";
?>
<div id="productdetail">
<?php
if(isset($productid)){ //Laat de details zien op basis van de productid in de url
$result = mysqli_query($db, "SELECT producten.*, prijs_eenheid FROM producten, verkoopprijzen WHERE producten.productid = $productid AND verkoopprijzen.productid = $productid");
$product = mysqli_fetch_row($result);
echo "<div id='productafbeelding'>";
echo "<img src=afbeeldingen/$product[3]>";
echo "</div>";
echo "<div>";
echo "<h1>$product[1]</h1>";
echo "<p>$product[2]</p>";
echo "<div id='price'><button id='additem' onclick=additem()>€ $product[5]";
echo "</button><div id='itemamount'>";
echo "<button id='min' style='height: 0px;'>-</button><span id='amount'></span><button id='plus' style='height: 0px;'>+</button></div></div>";
echo "<div style='display: flex'><a href='product.php' class='button'>Terug</a><a href='winkelwagen.php' class='button'>Winkelwagen</a></div></div>";
}
?>
<div class="topbar" id="winkelnavbar">
<a href="winkelwagen.php" style="margin-right: 5px;"><img class="icon" src="afbeeldingen/winkelwagen.png"></a>
</div>
<div id="debug"></div>
</div>
<script>
document.getElementById("min").onclick = () => { //Verlaagt het aantal items
if(parseInt(document.getElementById("amount").innerHTML) == 1){ //Als de hoeveelheid items naar 0 gaat, verwijdert die het item
document.getElementById("itemamount").style.height = "0px"
document.getElementById("plus").style.height = "0px"
document.getElementById("plus").style.visibility = "hidden"
document.getElementById("min").style.height = "0px"
document.getElementById("min").style.visibility = "hidden"
document.getElementById("plus").innerHTML = ""
document.getElementById("min").innerHTML = ""
document.getElementById("amount").innerHTML = ""
ajax("removeitem.php?product=<?php echo $productid ?>", "debug")
}
else{ //Verlaagt het aantal items met 1
document.getElementById("amount").innerHTML = parseInt(document.getElementById("amount").innerHTML) - 1
ajax("changeitemamount.php?product=<?php echo $productid ?>&amount=" + document.getElementById("amount").innerHTML, "debug")
}
}
document.getElementById("plus").onclick = () => { //Voegt +1 item toe
document.getElementById("amount").innerHTML = parseInt(document.getElementById("amount").innerHTML) + 1
ajax("changeitemamount.php?product=<?php echo $productid ?>&amount=" + document.getElementById("amount").innerHTML, "debug")
}
<?php
$currentcookie = $_COOKIE["producten"];
$product = $_GET["product"];
$amount = $_GET["amount"];
$cookiearray = explode(", ", $currentcookie);
$cookiearray2 = array();
for($i = 0; $i < count($cookiearray); $i++){
array_push($cookiearray2, explode("_", $cookiearray[$i]));
}
// $currentcookie = "";
for($i = 0; $i < count($cookiearray2); $i++){
if($cookiearray2[$i][0] == $product){
echo "additem(" . $cookiearray2[$i][1] .");"; //Voegt aan het begin de hoeveelheid items toe die al in de winkelwagen zitten
break;
}
// $currentcookie .= $cookiearray2[$i][0] . "_" . $cookiearray2[$i][1];
// if(count($cookiearray) - 1 != $i){
// $currentcookie .= ", ";
// }
}
?>
function additem(amount = false){
document.getElementById("itemamount").style.height = "50px"
document.getElementById("plus").style.height = "50px"
document.getElementById("plus").style.visibility = "visible"
document.getElementById("plus").innerHTML = "+"
document.getElementById("min").style.height = "50px"
document.getElementById("min").style.visibility = "visible"
document.getElementById("min").innerHTML = "-"
if(amount){
document.getElementById("amount").innerHTML = amount
}
else{
document.getElementById("amount").innerHTML = "1"
ajax("additem.php?product=<?php echo $productid ?>", "debug")
}
}
</script>
</body>
</html>
Resultaat
Made by Thijs Aarnoudse