PO/product.php
<?php
include "db.php";
?>
<!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 class="content winkel">
<h1>Producten</h1>
<div class="topbar" id="winkelnavbar">
<button class="right" id="filter">
<img class="icon" id="filtericon" src="afbeeldingen/filter.svg">
<div id="filterpopup" style="display: none;">
<div id="filterpopuparrow"></div>
<img id="closepopup" src="afbeeldingen/close.svg">
<input class="hidden filtercheckbox" type="checkbox" id="elektronica">
<label class="filteroption" for="elektronica">Elektronica</label>
<input class="hidden filtercheckbox" type="checkbox" id="kampeerspullen">
<label class="filteroption" for="kampeerspullen">Kampeerspullen</label>
<input class="hidden filtercheckbox" type="checkbox" id="schoonmaakspullen">
<label class="filteroption" for="schoonmaakspullen">Schoonmaakspullen</label>
<input class="hidden filtercheckbox" type="checkbox" id="sport">
<label class="filteroption" for="sport">Sport</label>
<input class="hidden filtercheckbox" type="checkbox" id="tuin">
<label class="filteroption" for="tuin">Tuin</label>
<input class="hidden filtercheckbox" type="checkbox" id="keuken">
<label class="filteroption" for="keuken">Keuken</label>
<!-- <div class="doubleslidercontainer">
<input type="range" class="doubleslider" value="10" id="minprice">
<label for="minprice"></label>
<input type="range" class="doubleslider" value="90" id="maxprice">
<label for="maxprice"></label>
</div> -->
<div id="pricerange">
<p>Prijs:<br> Van €<input type="number" id="minprice">Tot €<input type="number" id="maxprice"></p>
</div>
<input type="submit" value="Bereken" id="bereken">
</div>
</button>
<a href="winkelwagen.php" style="margin-left: 5px;"><img class="icon" src="afbeeldingen/winkelwagen.png"></a>
<!-- <button>Account aanmaken</button> -->
<div id="searchdiv">
<img src="afbeeldingen/search.svg" width="10" height="10">
<input type="text" id="search" placeholder="Zoeken">
</div>
</div>
<div id="winkelopties"></div>
<div class="producten" id="producten">
<h2 style="display: none;" id="noresults">Geen resultaten</h2>
<?php
$result = mysqli_query($db, "SELECT productnaam, afbeelding, producten.productid, type, prijs_eenheid FROM producten, verkoopprijzen WHERE producten.productid = verkoopprijzen.productid");
while($row = mysqli_fetch_row($result)){
echo "<a class='product $row[3]' data-prijs='$row[4]' href='productdetail.php?product=$row[2]'>";
echo "<div><img src='afbeeldingen/$row[1]'></div>";
echo "<div class='desc'><p class='productname'>$row[0]</p>";
echo "</div>";
echo "</a>";
}
?>
</div>
</div>
<script>
const productnamen = document.getElementsByClassName("productname"); //Alle elements met de namen van de producten
const producten = document.getElementsByClassName("product"); //Alle producten
document.getElementById("search").oninput = () => { //Laat alle productent zien die de zoekwaarde bevatten
for(var i = 0; i < productnamen.length; i++){
if(productnamen[i].innerHTML.toLowerCase().indexOf(document.getElementById("search").value.toLowerCase()) == -1){
productnamen[i].parentElement.parentElement.style.display = "none"
}
else{
productnamen[i].parentElement.parentElement.style.display = "flex"
}
}
}
document.getElementById("filtericon").onclick = () => { //Laat de filterbox zien
if(document.getElementById("filterpopup").classList.contains("popupanim")){
document.getElementById("filterpopup").classList.remove("popupanim")
}
else{
document.getElementById("filterpopup").classList.add("popupanim")
}
}
document.getElementById("closepopup").onclick = () => { //Sluit de filterbox
document.getElementById("filterpopup").classList.remove("popupanim")
}
var selectedfilters = []
var tags = ""
var minprice = "0"
var maxprice = "100000000"
document.getElementById("bereken").onclick = () => { //Stelt de zoekprijsrange in en voert de php pagina uit om het te veranderen
minprice = document.getElementById("minprice").value
maxprice = document.getElementById("maxprice").value
if(minprice == ""){
minprice = "0"
}
if(maxprice == ""){
maxprice = "100000000"
}
if(tags != ""){
ajax("getproducts.php?tags=" + tags + "&min=" + minprice + "&max=" + maxprice, "producten")
}
else{
ajax("getproducts.php?min=" + minprice + "&max=" + maxprice, "producten")
}
}
for(var i = 0; i < document.getElementsByClassName("filteroption").length; i++){
document.getElementsByClassName("filtercheckbox")[i].oninput = function(){ //Stelt tags in bij verandering van een tag
if(this.checked){
selectedfilters.push(this.id)
}
else{
var index = selectedfilters.indexOf(this.id)
if(index !== -1){
selectedfilters.splice(index, 1)
}
}
tags = ""
for(var i = 0; i < selectedfilters.length; i++){
if(tags == ""){
tags += selectedfilters[i]
}
else{
tags += " " + selectedfilters[i]
}
}
if(tags != ""){
ajax("getproducts.php?tags=" + tags + "&min=" + minprice + "&max=" + maxprice, "producten")
}
else{
ajax("getproducts.php?min=" + minprice + "&max=" + maxprice, "producten")
}
}
}
</script>
</body>
</html>
Resultaat
Made by Thijs Aarnoudse