0

Tengo un problema con un código en PHP que no he podido solucionar ya que tengo un conocimiento muy precario de PHP.

Tengo un carrito de compras que me funciona perfectamente pero tengo la opción de categorías, el mismo cuando piso una categoría que es una lista que trae de una tabla mysql me muestra los productos perfectamente en la parte de abajo de la página sin problemas.

Necesito que cuando pise dicha categoría se me resalte en negro para que el usuario sepa que se encuentra en la misma.

No se como hacer para que esa palabra se resalte en negrita o cambie de color, dejo parte del código a ver si alguien me puede ayudar.

    <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"><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)) { ?>

            <a href="#" class="nav-link text-body-emphasis" category="<?php echo $data['categoria']; ?>"><?php echo $data['categoria']; ?></a>
          <?php } ?>

        </div>
      </div>
    </section>
5
  • Para poner un texto en negrita encierralo en la etiqueta strong, así: texto <strong>en negrita</strong>. Saludos.
    – jachguate
    Commented el 27 jul. a las 7:32
  • Creo que quiere algo mas que poner <?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.
    – OCHOA
    Commented el 27 jul. a las 8:02
  • Exacto.. lo que necesito es que se ponga en negrita la categoria seleccionada para diferenciarla de las demas... y es lo que no se hacer...
    – Derecreo
    Commented el 27 jul. a las 10:08
  • @Derecreo al hacer clic en una categoría ¿donde guardas el identificador de la misma? En el código que compartís no se ve como se hace el cambio.
    – Marcos
    Commented el 27 jul. a las 21:30
  • Podrías usar onClick (JQuery o JS) para cambiar el estilo de cada categoría cuando se ha seleccionado. Incluso podrías usar hover (CSS) para cambiar el estilo al pasar el mouse sobre cada categoría Commented el 27 jul. a las 22:28

1 respuesta 1

2

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.

4
  • Excelente tu ayuda es lo que necesitaba, ahora te consulto me esta funcionando a la perfecto pero no me muestra los productos por las categorias y creo que es por el resultado, te coloco el codigo a ver si tu logras ver la falla por que yo no la veo..... lo voy a dejar en una nota mas abajo...
    – Derecreo
    Commented el 28 jul. a las 22:13
  • He actualizado el codigo
    – Stina
    Commented el 29 jul. a las 2:13
  • No se quien eres pero realmente eres una genio!, gracias por tu gran ayuda, estaba perdido gracias infinitas.
    – Derecreo
    Commented el 29 jul. a las 2:31
  • Me gusta ayudar. Si mi respuesta ha resuelto el problema que tenías, puedes marcarlo como resuelto junto a mi respuesta en la página. Eso me hace sentir bien.
    – Stina
    Commented el 29 jul. a las 11:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.