0

Acessando o endereço http://www.lccinformatica.com.br/, poderão verificar que consigo trazer e visualizar as duas categorias cadastradas na tabela "CATEGORIA" no BD (Imagem abaixo),

inserir a descrição da imagem aqui

mas gostaria que quando selecionado uma das categorias, fosse mostrados somente os produtos que são relacionados a categoria selecionada, cadastrados na tabela "PRODUTOS" no BD (Imagem abaixo).

inserir a descrição da imagem aqui

Para direciona-los aos produtos referente a categoria desejada, tentei usar um comando em PHP (Imagem abaixo),

inserir a descrição da imagem aqui

para trazer o resultado usei (Imagem Abaixo)

inserir a descrição da imagem aqui

achando que resolveria (Pura ilusão e pretensão de minha parte)...Rsrsrsrs...

Mas como poderão verificar, quando clico em qualquer uma das duas categorias, me traz todos os produtos cadastrados na tabela "PRODUTOS" no BD.

Fazendo uma pesquisa na Rede, descobri que talvez a solução esteja em criar um evento para que possa usar com o javascript:void(0). Mas sou totalmente leigo em JavaScript, e preciso da ajuda dos amigos para criar tal evento.

Para isso estou postando abaixo os códigos usado até o momento:

Página que lista as categorias:

    <!-- Listando os Categorias -->
<?php
$nome_cat = $_POST['nome_cat'];
$img_cat = $_POST['img_cat'];
$query_categoria = mysql_query("SELECT * FROM categoria");
while($res = mysql_fetch_array($query_categoria)){
?>
<div style="float:left; width:112px; height:133px; padding:2px 10px;" id="cats-list">
    <a class="cat-link" href="javascript:;" title="<?php echo $res['nome_cat']; ?>">
        <img style="position:relative; top:50%; transform:translateY(-50%);" src="img_cate/<?php echo $res['img_cat']; ?>" width="100" title="<?php echo $res['nome_cat']; ?>" />
    </a>
    <div style="background:#2f2140; margin-left:-300px; width:880px;z-index:999;border-radius:25px;" class="single-cat">
        <h1 align="center" style="width:830px; margin-top:-40px;"><?php echo $res['nome_cat']; ?></h1>
        <div style="margin-left:357px;width:50px;" class="cat-links">
            <a class="close-btn" href="javascript:;" title="Voltar">
                <img src="img/fechar.jpg" />
            </a>
        </div>
<!-- Listando os Produtos por Categoria -->
<?php include "pag_lista_produtos.php"; ?>                  
    </div>
</div>
<?php
}
?>

Página que lista os Produtos referente a Categorias selecionada:

    <!-- Listando os produtos referente a Categorias selecionada -->
<?php
include "conexao.php";
$codigo = $_POST['codigo'];
$img_prod = $_POST['img_prod'];
$titulo = $_POST['titulo'];
$descricao = $_POST['descricao'];
$mome_cat = $_POST['nome_cat'];
$query_produtos = mysql_query("SELECT * FROM produtos") or die(mysql_error());
while($res = mysql_fetch_array($query_produtos)){
?>

    <div style="float:left; width:112px; height:133px; padding:2px 10px;" id="songs-list">
            <a class="song-link" href="javascript:;" title="">
            <img style="position:relative; top:50%; transform:translateY(-50%);" src="img_prod/<?php echo $res['img_prod']; ?>" width="100" title="<?php echo $res['titulo']; ?>" /></a>

        <div style=" margin-top:120px;z-index:999;border-bottom-right-radius:25px;border-top-right-radius:25px;" class="single-song">
            <div style="width:50px;margin-left:300px;" class="song-links">
            <a class="close-btn" href="javascript:;" title="Voltar">
                <img src="img/fechar.jpg" />
            </a>
                <div class="song-sides">
                    <img style="margin:40px 0 0 -142px;" src="img_prod/<?php echo $res['img_prod']; ?>" width="369" />
                </div>
            </div>

            <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

            <h1> <?php echo $res['titulo']; ?> </h1>
            <div class="entry" style="overflow-y: hidden; padding: 0px; width: 100px;">
            <p style="font-family:Verdana, Geneva, sans-serif; size:14px; font-weight:bold; color:#ccc;">
            <?php echo nl2br($res['descricao']); ?>
            </p>
            <div class="jspContainer" style="width: 100px; height: auto;">
            <div class="jspPane" style="padding: 0px; top: 0px; width: 100px;">
            </div></div></div>
            <span class="song-sides left-side"></span>
        </div>
    </div>
<?php
}
?>

JavaScript referente as páginas postada aqui.

jQuery(".cat-link").click(function(){
    jQuery(this).parent().find(".single-cat").fadeIn();
});

jQuery(".song-link").click(function(){
    jQuery(this).parent().find(".single-song").fadeIn();
    jQuery(".single-song .entry").jScrollPane();
});

No aguardo de boas dicas e soluções para o meu problema, e já agradecendo a atenção de todos.

0

2 Respostas 2

2

Não precisa de JavaScript para fazer isso, o seu erro é tentar usar JS onde não precisa. Isto deve funcionar (supondo que seu arquivo que lista os produtos se chame produtos.php):

<a class="cat-link" href="produtos.php?nome_cat=<?php echo $res['nome_cat']; ?>">

Porém, tem alguns outros problemas no seu código.

  1. Relacionamento entre tabelas usando o nome da categoria em vez do código. O correto seria ter o código da categoria na tabela de produtos, e usar um JOIN na query para obter tanto os dados do produto, quanto o nome da categoria selecionada. Veja esta pergunta para detalhes sobre o funcionamento dos joins.

  2. Você está usando um driver defasado para acessar o banco de dados, o mysql_*. O recomendado é usar mysqli ou PDO. Veja aqui e aqui para mais detalhes.

  3. Usando mysqli ou PDO, você pode usar prepared statements para evitar uma vulnerabilidade (SQL injection) presente no seu código atual. Leia o conteúdo desse link para detalhes. Basicamente, não é recomendado interpolar na sua query dados que venham do usuário, como você está fazendo em ... WHERE nome_cat = '$nome_cat'.

1
  • Perfeito @bfavaretto, esse método funciona quando a se tratar de uma pagina em PHP, porém esse link esta puxando a DIV id="songs-list" da página "pag_lista_produtos.php" que lista os produtos. Ou seja, o conteúdo da "pag_lista_produtos.php", esta dentro da DIV id="cats-list" da página pag_produtos.php, por isso a necessidade do JavaScript:void(0); com o evento para trazer os dados do produto referente a categoria selecionada. Eu só desmembrei para melhor visualizar o código. 9/07/2016 às 14:59
0

Com a ajuda do amigo @Givanildo R. de Oliveira, conseguimos solucionar o problema e trazer somente os produtos referentes a Categoria selecionada.

Abaixo o código funcionando:

<?php include "conexao.php"; ?>

<div id="produtos" class="sections full-width-wrapper bg_4">
    <div class="centered-wrapper">

        <div class="section-header">
            <?php include 'menu_pags.php';?>            
        </div>

<div id="produtos-content">

    <!-- Listando os Categorias -->
    <?php
    $nome_cat = $_POST['nome_cat'];
    $img_cat = $_POST['img_cat'];
    $query_categoria = mysql_query("SELECT * FROM categoria");
    while($res = mysql_fetch_array($query_categoria)){
    ?>
    <div style="float:left; width:112px; height:133px; padding:2px 10px;" id="cats-list">
        <a class="cat-link" href="?nome_cat=<?php echo $res['nome_cat']; ?>#produtos" title="<?php echo $res['nome_cat']; ?>">
        <img style="position:relative; top:50%; transform:translateY(-50%);"
            src="img_cate/<?php echo $res['img_cat']; ?>" width="100"
            title="<?php echo $res['nome_cat']; ?>" />
        </a>
        <div style="background:#2f2140; ; width:880px;z-index:999;border-radius:25px; <?php echo $res['nome_cat']==$_GET['nome_cat'] ? 'display:block;' : ''; ?>" class="single-cat">
            <h1 align="center" style="width:830px; margin-top:-40px;"><?php echo $res['nome_cat']; ?></h1>
            <div style="margin-left:357px;width:50px;" class="cat-links">
                <a class="close-btn" href="javascript:;" title="Voltar">
                    <img src="img/fechar.jpg" />
                </a>
            </div>

<!-- Listando os produtos -->
<?php
$nome_cat = $_GET['nome_cat'];
$query_produtos = mysql_query("SELECT * FROM produtos WHERE nome_cat = '$nome_cat'") or die(mysql_error());
while($res = mysql_fetch_array($query_produtos)){

$codigo = $_POST['codigo'];
$img_prod = $_POST['img_prod'];
$titulo = $_POST['titulo'];
$descricao = $_POST['descricao'];
$nome_cat = $_POST['nome_cat'];
?>

    <div style="float:left; width:112px; height:133px; padding:2px 10px;" id="songs-list">
            <a class="song-link" href="javascript:;" title="">
            <img style="position:relative; top:50%; transform:translateY(-50%);" src="img_prod/<?php echo $res['img_prod']; ?>" width="100" title="<?php echo $res['titulo']; ?>" /></a>

        <div style=" margin-top:120px;z-index:999;border-bottom-right-radius:25px;border-top-right-radius:25px;" class="single-song">
            <div style="width:50px;margin-left:300px;" class="song-links">
            <a class="close-btn" href="javascript:;" title="Voltar">
                <img src="img/fechar.jpg" />
            </a>
                <div class="song-sides">
                    <img style="margin:40px 0 0 -142px;" src="img_prod/<?php echo $res['img_prod']; ?>" width="369" />
                </div>
            </div>

            <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

            <h1> <?php echo $res['titulo']; ?> </h1>
            <div class="entry" style="overflow-y: hidden; padding: 0px; width: 100px;">
            <p style="font-family:Verdana, Geneva, sans-serif; size:14px; font-weight:bold; color:#ccc;">
            <?php echo nl2br($res['descricao']); ?>
            </p>
            <div class="jspContainer" style="width: 100px; height: auto;">
            <div class="jspPane" style="padding: 0px; top: 0px; width: 100px;">
            </div></div></div>
            <span class="song-sides left-side"></span>
        </div>
    </div>
<?php
}
?>

        </div>
    </div>
    <?php
    }
    ?>
</div>

</div></div></div>

Espero que possa ajudar a outros usuários com o mesmo problema.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .