Produkte nach Kategorie anzeigen ID php & mysql

Question

Ich mache gerade einen Einkaufswagen. Was ich möchte, wenn ich auf eine Kategorie klicke, werden alle darunter liegenden Produkte entsprechend ihrer Kategorie-ID angezeigt. Wenn es anders geht, lass es mich wissen.

ich meine Kategorien aus meiner Datenbank mit:

function getCats(){ 

global $con; 
$get_cats = "select * from categories"; 
$run_cats = mysqli_query($con, $get_cats); 
while ($row_cats = mysqli_fetch_array($run_cats)){  
    $cat_id = $row_cats['cat_id']; 
    $cat_title = $row_cats['cat_title']; 

    echo "<li><a href='#' class= 'category' cid='$cat_id'>$cat_title</a></li>"; 

} 

} 

und nennen es in meiner index.php

<?php 
getPro(); 
?; 

Dies ist mein Code in meinem functions.php

if(isset($_POST["get_product"])) 
{ 

$cid = $_POST["cat_id"]; 
$sql = "SELECT * from products WHERE product_cat = '$cid'"; 
$run_query = mysqli_query($con,$query) or die(mysqli_query($con)); 
while($row = mysqli_fetch_array($run_query)) 
{ 

     $pro_id = $row['product_id']; 
     $pro_title = $row['product_title']; 
     $pro_cat = $row['product_cat']; 
     $pro_price = $row['product_price']; 
     $pro_image = $row['product_image']; 


    echo" 
    <div class='col-md-4'> 
    <div class='panel panel-info'> 
     <div class='panel-heading'>$pro_title </div> 
     <div class='panel-body'> 
     <img src='admin_area/product_images/$pro_image' style='width:100px; height:100px;'/> 
     </div> 
     <div class='panel-heading'>$pro_price 
     <button pid='$pro_id' style='float:right;' class='btn btn-danger btn-xs'>Add to cart</button> 

     </div> 

    </div> 

    </div> 

    "; 


    } 



} 

Answer 1

Also im Grunde eine Schaltfläche für jede Kategorie, und wenn Sie darauf klicken, zeigt es ein kleines Menü mit den Produkten, sortiert b y ID. Ich weiß, dass dies über ein Dropdown-Menü möglich ist. Dieser wird nur von CSS erstellt. Es tut mir leid, wenn ich dich falsch verstehe, aber dann sei bitte genauer, was du willst.

<style> 
.dropdown { 
position: relative; 
display: inline-block;`enter code here` 
} 

.dropdown-content { 
display: none; 
position: absolute; 
background-color: #f9f9f9; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
padding: 12px 16px; 
z-index: 1; 
} 

.dropdown:hover .dropdown-content { 
display: block; 
} 
</style> 

<div class="dropdown"> 
<span>Mouse over me</span> 
<div class="dropdown-content"> 
<p>Hello World!</p> 
</div> 
</div>