按类别ID php和mysql显示产品

Question

I`m currently doing a shopping cart. What I want to happen is when I click a category all the products under it will be displayed according to its category id. If there is other way please let me know.

I get my categories from my database using:

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

}

}

and call it in my index.php

<?php 
getPro();
 ?;

This is my code in my 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

So basically you a button for each categorie, and when you click it, it shows a little menu with the products in it, sorted by ID. I know this can be done by a dropdown menu. This one is only made by CSS. I'm sorry if I get you wrong, but then please be more specific on what you want.

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