カテゴリー別に表示するID php＆mysql

Question

現在カートに入れています。私がしたいのは、カテゴリをクリックすると、その下のすべての商品がそのカテゴリIDに従って表示されます。それ以外の方法がある場合はお知らせください。

私が使用して私のデータベースからの私のカテゴリを取得：

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>"; 

} 

} 

とこれは私の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

で私のコードです

<?php 
getPro(); 
?; 

私のindex.phpでそれを呼び出します

基本的には、各カテゴリのボタンをクリックすると、その中に製品が入った小さなメニューが表示され、並べ替えられたb y ID。これはドロップダウンメニューで行うことができます。これはCSSによってのみ作成されます。私はあなたが間違っている場合は申し訳ありませんが、あなたが欲しいものをより具体的にしてください。

<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>