0
Accessing the address http://www.lccinformatica.com.br/, can verify that I can bring and view the two categories registered in the table "CATEGORY" in the BD (Image below),
but I would like that when selected one of the categories, were shown only the products that are related to the selected category, registered in the table "PRODUCTS" in the BD (Image below).
To direct them to the products for the desired category, I tried using a PHP command (Image below),
to bring the result I used (Image Below)
thinking that would solve (Pure illusion and pretension on my part)... Rsrsrs...
But as you can see, when I click on either of the two categories, brings me all the products registered in the table "PRODUCTS" in the comic.
Doing a Web search, I discovered that maybe the solution lies in creating an event that I can use with javascript:void(0). But I am totally Javascript layperson, and I need the help of friends to create such an event.
For this I am posting below the codes used so far:
Page listing the categories:
<!-- 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
}
?>
Page listing Products for Selected Categories:
<!-- 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 referring to the pages posted here.
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();
});
I await good tips and solutions to my problem, and already thanking the attention of all.
Perfect @bfavaretto, this method works when dealing with a PHP page, but this link is pulling the DIV id="Songs-list" page "pag_lista_produtos.php" list the products. That is, the content of the "pag_lista_produtos.php", this one inside the DIV id="Cats-list" page pag_products.php, therefore the need for the Javascript:void(0); with the event to bring the product data referring to the selected category. I only dismembered to better view the code.
– Murilo Cabral