Exibir produtos da categoria especificada

emmanuelsiqueira30 · Fevereiro 7, 2019

Pessoal preciso de uma ajuda sobre mostrar somente os produtos que foi clicado no menu de categorias na mesma página inicial:

<?php 

  include("admin/conexao.php");
  
  $cat = isset($_GET['id_cat']);

  $query = "SELECT * FROM categoria";
  $query1 = "SELECT * FROM produto";
  $query_emp = "SELECT * FROM empresa WHERE id_emp = 1";

  //$query1 = "SELECT * FROM produto WHERE categoria_id = $cat";

  $dados = mysqli_query($con,$query);
  $dados1 = mysqli_query($con,$query1);
  $dados_emp = mysqli_query($con,$query_emp);

  $linha_emp = mysqli_fetch_assoc($dados_emp);

?>

<!DOCTYPE html>
<html lang="pt-br">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Catálogo Online - </title>

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="css/shop-homepage.css" rel="stylesheet">

<style>

  .window-sobre{
      display:none;
      width:300px;
      height:300px;
      position:absolute;
      left:0;
      top:0;
      background:#FFF;
      z-index:9900;
      padding:10px;
      border-radius:10px;
  }
  
  #mascara-sobre{
      display:none;
      position:absolute;
      left:0;
      top:0;
      z-index:9000;
      background-color:#000;
  }
  
  .fechar-sobre{display:block; text-align:right;}

  .window-localizacao{
      display:none;
      width:640px;
      height:480px;
      position:absolute;
      left:0;
      top:0;
      background:#FFF;
      z-index:9900;
      padding:10px;
      border-radius:10px;
  }
  
  #mascara-localizacao{
      display:none;
      position:absolute;
      left:0;
      top:0;
      z-index:9000;
      background-color:#000;
  }
  
  .fechar-localizacao{display:block; text-align:right;}

#produtos{
  margin-top: 20px;
}
</style>

</head>

<body>

<!-- Modal Jquery Sobre -->

 <div class="window-sobre" id="janela-sobre">
     <a href="#" class="fechar-sobre">X Fechar</a>
     <h4>Sobre a empresa</h4>
     <p class="text-justify"><?=$linha_emp['sobre_emp']?></p>
 </div>

 <!-- mascara para cobrir o site -->  
<div id="mascara-sobre"></div>

 <!-- Fim da Modal Jquery Sobre-->

 <!-- Modal Jquery Localização -->

 <div class="window-localizacao" id="janela-localizacao">
     <a href="#" class="fechar-localizacao">X Fechar</a>
     <h4>Localização</h4>
     <p class="text-justify"><?=$linha_emp['endereco_emp']?></p>
     <p class="text-justify"><?=$linha_emp['fone_emp']?></p>
 </div>

 <!-- mascara para cobrir o site -->  
<div id="mascara-localizacao"></div>

 <!-- Fim da Modal Jquery Sobre-->

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Catálogo Online</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Página inicial
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#janela-sobre" rel="modal-sobre">Sobre</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#janela-localizacao" rel="modal-localizacao">Localização</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contato</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Content -->
  <div class="container" id="conteudo">
    <div class="row">

      <div class="col-lg-3">

        <h1 class="my-4">Logomarca</h1>
        <div class="list-group">
            <?php
              while ($linha = mysqli_fetch_assoc($dados)) {
            ?>
              <a href="index.php?id_cat=<?=$linha['id_cat']?>" class="list-group-item"><?=$linha['nome_cat']?></a>
            <?php 
              }// fim do while  
            ?>
        </div>

      </div>
      <!-- /.col-lg-3 -->

      <div class="col-lg-9">

        <div class="row" id="produtos">
        
        <?php
              while ($linha1 = mysqli_fetch_assoc($dados1)) {
        ?>

          <div class="col-lg-4 col-md-6 mb-4">
            <div class="card h-100">
             <img class="card-img-top img-responsive" src="admin/fotos/<?=$linha1['foto_prod']?>" alt="Este produto não possui imagem." width="150px" height="230px"></img>
              <div class="card-body">
                <h4 class="card-title">
                  <?=$linha1['titulo_prod']?>
                </h4>
                <h5>Preço: R$ <?=$linha1['preco_prod']?></h5>
                <p class="card-text"><?=$linha1['desc_prod']?></p>
              </div>
             
            </div>
          </div>      
         
          <?php 
             }// fim do while  
          ?>

        </div>
        <!-- /.row -->
       
        
       
      
    </div>
      <!-- /.col-lg-9 -->

    </div>
    <!-- /.row -->

  </div>
  <!-- /.container -->

  <!-- Footer -->
  <footer class="py-5 bg-dark">
    <div class="container">

        <div class="container">
            <div class="row">
              <div class="col-4"></div>
              <div class="col-4"> <p class="m-0 text-center text-white">Copyright &copy; Catálogo Online 2019</p></div>
              <div class="col-4"><p class="m-0 text-right text-white">Desenvolvimento: System Informática</p></div>
            </div>
        </div>
      
    </div>
    <!-- /.container -->
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  
  <!-- Javascript do Modal Sobre Jquery --> 
  <script>
  $(document).ready(function(){
    $("a[rel=modal-sobre]").click( function(ev){
        ev.preventDefault();
 
        var id = $(this).attr("href");
 
        var alturaTela = $(document).height();
        var larguraTela = $(window).width();
     
        //colocando o fundo preto
        $('#mascara-sobre').css({'width':larguraTela,'height':alturaTela});
        $('#mascara-sobre').fadeIn(1000); 
        $('#mascara-sobre').fadeTo("slow",0.8);
 
        var left = ($(window).width() /2) - ( $(id).width() / 2 );
        var top = ($(window).height() / 2) - ( $(id).height() / 2 );
     
        $(id).css({'top':top,'left':left});
        $(id).show();   
    });
 
    $("#mascara-sobre").click( function(){
        $(this).hide();
        $(".window-sobre").hide();
    });
 
    $('.fechar-sobre').click(function(ev){
        ev.preventDefault();
        $("#mascara-sobre").hide();
        $(".window-sobre").hide();
    });
});
</script>
<!-- Fim do Javascript do Modal Sobre Jquery -->


<!-- Javascript do Modal Localização Jquery -->
<script>
  $(document).ready(function(){
    $("a[rel=modal-localizacao]").click( function(ev){
        ev.preventDefault();
 
        var id = $(this).attr("href");
 
        var alturaTela = $(document).height();
        var larguraTela = $(window).width();
     
        //colocando o fundo preto
        $('#mascara-localizacao').css({'width':larguraTela,'height':alturaTela});
        $('#mascara-localizacao').fadeIn(1000); 
        $('#mascara-localizacao').fadeTo("slow",0.8);
 
        var left = ($(window).width() /2) - ( $(id).width() / 2 );
        var top = ($(window).height() / 2) - ( $(id).height() / 2 );
     
        $(id).css({'top':top,'left':left});
        $(id).show();   
    });
 
    $("#mascara-localizacao").click( function(){
        $(this).hide();
        $(".window-localizacao").hide();
    });
 
    $('.fechar-localizacao').click(function(ev){
        ev.preventDefault();
        $("#mascara-localizacao").hide();
        $(".window-localizacao").hide();
    });
});
</script>
<!-- Fim do Javascript do Modal Localização Jquery -->

</body>

</html>

Fernando C · Fevereiro 7, 2019

olá. se entendi bem, tente isso:

busca-simples-com-php-pdo-e-mysql.

sugestão pessoal: procure não postar código desnecessário (CSS, jquery...)

Entrar

Arquivado

Exibir produtos da categoria especificada

Recommended Posts

emmanuelsiqueira30 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fernando C 128

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante