Para que los productos se muestren por categorías y se filtren correctamente según la categoría seleccionada, necesitas organizar el código de manera que las categorías y los productos se manejen conjuntamente.
Capturar la categoría seleccionada y marcarla como activa
Filtrar productos por categoría seleccionada
Mostrar las categorías y los productos en la misma sección
<?php
// Conectar a la base de datos
$conexion = new mysqli("localhost", "usuario", "contraseña", "base_de_datos");
// Obtener la categoría seleccionada desde la URL
$selected_category = isset($_GET['category']) ? $_GET['category'] : '';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carrito de Compras</title>
<style>
.selected {
font-weight: bold;
color: black;
}
</style>
</head>
<body>
<section class="py-5">
<div class="container px-4 px-lg-1">
<div class="row gx-4 gx-lg-5 row-cols-1 row-cols-md-3 row-cols-xl-3 justify">
<a href="./" class="nav-link text-body-emphasis <?php echo $selected_category == '' ? 'selected' : ''; ?>"><strong>VER TODAS LAS CATEGORÍAS</strong></a>
<?php
$query = mysqli_query($conexion, "SELECT * FROM categorias ORDER BY categoria ASC");
while ($data = mysqli_fetch_assoc($query)) {
$is_selected = $selected_category == $data['categoria'];
?>
<a href="?category=<?php echo $data['categoria']; ?>" class="nav-link text-body-emphasis <?php echo $is_selected ? 'selected' : ''; ?>"><?php echo $data['categoria']; ?></a>
<?php } ?>
</div>
</div>
</section>
<section class="py-5">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
<?php
// Modificar la consulta SQL para filtrar por categoría seleccionada
if ($selected_category == '') {
// Mostrar todos los productos si no hay categoría seleccionada
$query = mysqli_query($conexion, "SELECT p.*, c.id AS id_cat, c.categoria FROM productos p INNER JOIN categorias c ON c.id = p.id_categoria WHERE p.activo=1 ORDER BY p.nombre ASC");
} else {
// Mostrar productos de la categoría seleccionada
$query = mysqli_query($conexion, "SELECT p.*, c.id AS id_cat, c.categoria FROM productos p INNER JOIN categorias c ON c.id = p.id_categoria WHERE p.activo=1 AND c.categoria='$selected_category' ORDER BY p.nombre ASC");
}
$result = mysqli_num_rows($query);
if ($result > 0) {
while ($data = mysqli_fetch_assoc($query)) { ?>
<div class="col mb-5 productos" category="<?php echo $data['categoria']; ?>">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="../assets/img/<?php echo $data['imagen']; ?>" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<span class="d-flex align-items-center price text-body-emphasis fw-bold justify-content-center mb-3 fs-6"><?php echo $data['nombre'] ?><br></span>
<p class="text-center">Cod. <?php echo $data['codigo']; ?></p>
<!-- Product price-->
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto agregar" data-id="<?php echo $data['id']; ?>" href="#">Agregar</a></div>
</div>
</div>
</div>
<?php }
} else {
echo "<p>No hay productos disponibles en esta categoría.</p>";
}
?>
</div>
</div>
</section>
</body>
</html>
Ahora:
Capturamos la categoría seleccionada de la URL.
Filtramos los productos según la categoría seleccionada en la consulta SQL.
Mostramos las categorías con una clase selected para resaltar la categoría activa.
Mostramos los productos de la categoría seleccionada.
strong
, así:texto <strong>en negrita</strong>
. Saludos.<?php echo $data['categoria']; ?>"><?php echo '<strong>'.$data['categoria'].'</strong>'; ?></a>
@jachguate. Creo que quiere que se pongan en negrita la categoría seleccionada y para eso tendria que usar JS y las mismas funciones que ya provee Bootstrap.