Estou querendo na pagina de produtos do meu site ver se tem como ao clicar em determinada categoria dos produtos , e só mude a quantidade dos produtos da pagina, sem precisar ir em outra pagina. Queria fazer isso para não ter que criar muitas paginas. No caso do código abaixo, queria por exemplo quando clicasse em camiseta básica aparece-se apenas tal modelo de camisa, e assim por diante nas outras duas categorias. Se alguém puder ajudar fico agradecido!!!
<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<?php
session_start();
require "banco.php";
if (isset($_SESSION['user_id'])) {
$records = $con->prepare("SELECT id,nome,email,senha FROM usuario WHERE id = :id");
$records->bindParam(':id',$_SESSION['user_id']);
$records->execute();
$results = $records->fetch(PDO::FETCH_ASSOC);
$user = NULL;
if (count($results) > 0) {
$user = $results;
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>New Store A Ecommerce Category Flat Bootstarp Resposive Website Template | Products :: w3layouts</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="New Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'><!--//fonts-->
<!-- start menu -->
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script>$(document).ready(function(){$(".memenu").memenu();});</script>
<script src="js/simpleCart.min.js"> </script>
<style>
.content{
margin: 10px;
text-align: center;
}
.botao01{
background: -webkit-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
background: -moz-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
background: -o-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
background: -ms-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
background: linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
border: 1px solid #CCCCCE;
border-radius: 3px;
box-shadow: 0 3px 0 rgba(0, 0, 0, .3),
0 2px 7px rgba(0, 0, 0, 0.2);
color: #FF4500;
display: inline;
font-family: "Trebuchet MS";
font-size: 14px;
font-weight: bold;
line-height: 25px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
text-shadow:1px 1px 0 #FFF;
padding: 5px 15px;
position: relative;
width: 80px;
}
.botao01:before{
border: 1px solid #FFF;
border-radius: 3px;
box-shadow: inset 0 -2px 12px -4px rgba(70, 70, 70, .2),
inset 0 3px 2px -1px rgba(255, 255, 255, 1);
content: "";
bottom: 0;
left: 0;
right: 0;
top: 0;
padding: 5px;
position: absolute;
}
.botao01:after{
background: rgba(255, 255, 255, .4);
border-radius: 2px;
content: "";
bottom: 15px;
left: 0px;
right: 0px;
top: 0px;
position: absolute;
}
.botao01:active{
box-shadow: inset 0 0 7px rgba(0, 0, 0, .2);
top: 4px;
}
.botao01:active:before{
border: none;
box-shadow:none;
}
</style>
</head>
<body>
<!--header-->
<div class="header">
<div class="header-top">
<div class="container">
<div class="search">
<form>
<input type="text" value="Search " onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}">
<input type="submit" value="Go">
</form>
</div>
<div class="header-left">
<ul style="margin-right: 50px;">
<?php if($user > 0): ?>
<li style="color:white;"><?= $user['nome'] ?></li><br>
<a href="logout.php">Sair</a>
<?php else: ?>
<li ><a href="login.php" >Login</a></li>
<li><a href="register.php" >Registrar</a></li>
<?php endif ?>
</ul>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="container">
<div class="head-top">
<div class="logo">
<a href="index.php"><img src="images/logo.png" alt=""></a>
</div>
<div class=" h_menu4">
<ul class="memenu skyblue">
<li class="active grid"><a class="color8" href="index.php">Home</a></li>
<li><a class="color1" href="#">Moda</a>
<div class="mepanel">
<div class="row">
<div class="col1">
<div class="h_nav">
<ul><a href="Roupas_Masculinas.php"> Roupas Masculinas</a>
<li><a href="camiseta_Masc.php">Camisetas</a></li>
<li><a href="moletom_Masc.php">Moletons</a></li>
<li><a href="bermuda_Masc.php">Bermudas</a></li>
<li><a href="meias_Masc.php">Meias</a></li>
<br>
<a href="Roupas_Infantis.php"> Roupas Infantis</a>
<li><a href="camiseta_Infa.php">Camisetas</a></li>
<li><a href="bodies_Infa.php">Bodies</a></li>
<li><a href="pijama_Infa.php">Pijamas</a></li>
<li><a href="meias_Infa.php">Meias</a></li>
</ul>
</div>
</div>
<div class="col1">
<div class="h_nav">
<ul>
<a href="Roupas_Femininas.php"> Roupas Femininas</a>
<li><a href="camiseta_Fem.php">Camisetas</a></li>
<li><a href="moletom_Fem.php">Moletons</a></li>
<li><a href="Saias_shorts.php">Saias e Shorts</a></li>
<li><a href="meias_Fem.php">Meias</a></li></br>
<a href="Calcados.php"> Calçados</a>
<li><a href="Calcados_Chinelos.php">Chinelos</a></li>
<li><a href="Calcados_Tenis.php">Tênis</a></li>
<li><a href="Calcados_Botas.php">Botas</a></li>
</ul>
</div>
</div>
<div class="col1">
<div class="h_nav">
<br><br>
<ul>
<img src="images/s7.png" align="right" height="260" width="320"/>
</ul>
</div>
</div>
</li>
<li class="grid"><a class="color2" href="#"> Acessorios</a>
<div class="mepanel">
<div class="row">
<div class="col1">
<div class="h_nav">
<ul>
<a href="Uso_Pessoal.php"> Uso Pessoal</a>
<li><a href="Uso_Pessoal_Bijuterias.php">Bijuterias</a></li>
<li><a href="Uso_Pessoal_Bones_Gorros.php">Bonés e Gorros</a></li>
<li><a href="Uso_Pessoal_Carteira.php">Carteiras</a></li>
<li><a href="Uso_Pessoal_Fantasias.php">Fantasias e Cosplay</a></li>
<li><a href="Uso_Pessoal_Mochilas.php">Mochilas</a></li>
<li><a href="Uso_Pessoal_Necessaires.php">Necessaires</a></li>
</ul>
</div>
</div>
<div class="col1">
<div class="h_nav">
<ul>
<a href="Uso_Variado.php"> Uso Variado</a>
<li><a href="Uso_Variado_Audio_Gadgets.php">Áudio e Gadgets</a></li>
<li><a href="Uso_Variado_Acessorios_Info.php">Informática e Acessórios</a></li>
<li><a href="Uso_Variado_Capas.php">Capas para Celulares</a></li>
<li><a href="Uso_Variado_Chaveiro.php">Chaveiros</a></li>
<li><a href="Uso_Variado_Corrente.php">Correntes</a></li>
</ul>
</div>
</div>
<div class="col1">
<div class="h_nav">
<br>
<ul>
<img src="images/s8.png" align="right" height="290" width="320"/>
</ul>
</div>
</div>
</div>
</div>
</li>
<li><a class="color4" href="Brinquedos.php">Brinquedos</a></li>
<li><a class="color6" href="contact.php">Contato</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--content-->
<!---->
<div class="product">
<div class="container">
<div class="col-md-3 product-price">
<div class=" rsidebar span_1_of_left">
<div class="of-left">
<h3 class="cate">Modelos</h3>
</div>
<ul class="menu">
<li class="item1"><a href="camiseta_Infa.php">Camiseta Basica </a>
</li>
<li class="item4"><a href="#">Raglan Masculina</a>
</li>
<li class="item4"><a href="#">Regata Masculina</a>
</li>
</ul>
</div>
<!--initiate accordion-->
<script type="text/javascript">
$(function() {
var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function(e) {
e.preventDefault();
if(!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
});
</script>
<!---->
<div class=" rsidebar span_1_of_left">
<div class="of-left">
<h3 class="cate">Personagens</h3>
</div>
<ul class="menu">
<li class="item4"><a href="#">Marvel</a>
<ul class="cute">
<li class="subitem1"><a href="product.html">Homem-Aranha </a></li>
<li class="subitem2"><a href="product.html">Homem de Ferro </a></li>
<li class="subitem3"><a href="product.html">Capitão América </a></li>
<li class="subitem3"><a href="product.html">Thor </a></li>
<li class="subitem3"><a href="product.html">Hulk </a></li>
<li class="subitem3"><a href="product.html">Luke Cage </a></li>
<li class="subitem3"><a href="product.html">Deadpool </a></li>
<li class="subitem3"><a href="product.html">O Justiceiro </a></li>
<li class="subitem3"><a href="product.html">Demolidor </a></li>
<li class="subitem3"><a href="product.html">Doutor Estranho </a></li>
<li class="subitem3"><a href="product.html">Guardiões da Galaxia </a></li>
<li class="subitem3"><a href="product.html">Os Vingadores </a></li>
<li class="subitem3"><a href="product.html">X-men </a></li>
</ul>
</li>
<li class="item4"><a href="#">Dc</a>
<ul class="cute">
<li class="subitem1"><a href="product.html">Batman </a></li>
<li class="subitem2"><a href="product.html">Superman </a></li>
<li class="subitem3"><a href="product.html">Flash </a></li>
<li class="subitem3"><a href="product.html">Lanterna Verde </a></li>
<li class="subitem3"><a href="product.html">Coringa </a></li>
<li class="subitem3"><a href="product.html">Arqueiro Verde </a></li>
<li class="subitem3"><a href="product.html">Mulher-Maravilha </a></li>
<li class="subitem3"><a href="product.html">Cyborg </a></li>
<li class="subitem3"><a href="product.html">Aquaman </a></li>
<li class="subitem3"><a href="product.html">Mulher-Gato </a></li>
<li class="subitem3"><a href="product.html">Exterminador </a></li>
<li class="subitem3"><a href="product.html">Liga da Justiça </a></li>
<li class="subitem3"><a href="product.html">Esquadrão Suicida </a></li>
</ul>
</li>
</ul>
</div>
<div class="sellers">
<div class="of-left-in">
<h3 class="tag">Tamanhos</h3>
</div>
<div class="tags">
<ul>
<li><a href="#">G</a></li>
<li><a href="#">G1</a></li>
<li><a href="#">G2</a></li>
<li><a href="#">G3</a></li>
<li><a href="#">G4</a></li>
<li><a href="#">G5</a></li>
<li><a href="#">GG</a></li>
<li><a href="#">P</a></li>
<li><a href="#">PP</a></li>
<li><a href="#">M</a></li>
<li><a href="#">XG</a></li>
<li><a href="#">XGG</a></li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
<!---->
<div class="product-bottom">
<div class="of-left">
<h3 class="cate">Faixa de Preço</h3>
</div>
<ul class="menu">
<li class="item1"><a href="#">R$99,99 </a>
</li>
<li class="item2"><a href="#">R$99,99 </a>
</li>
<li class="item3"><a href="#">R$99,99</a>
</li>
<li class="item4"><a href="#">R$99,99</a>
</li>
<li class="item4"><a href="#">R$99,99</a>
</li>
</ul>
</div>
<div class=" per1">
<a href="single.php" ><img class="img-responsive" src="Produtos/Imagens/Camisetas masculinas/camisa_masc_1.jpg" alt="">
<div class="six1">
<h4>DISCOUNT</h4>
<p>Up to</p>
<span>60%</span>
</div></a>
</div>
</div>
<div class="col-md-9 product1">
<div class=" bottom-product">
<?php
error_reporting (E_ALL & ~ E_NOTICE & ~ E_DEPRECATED);
require("banco.php");
$server = "localhost";
$db = "produtos"; // Indique o nome do banco de dados que será aberto
$usuario = "root"; // Indique o nome do usuário que tem acesso
$password = ""; // Indique a senha do usuário
//1º passo - Conecta ao servidor MySQL
$conect = mysql_connect($server,$user,$password ) or die (mysql_error());
//2º passo - Seleciona o Banco de Dados
$select_db = mysql_select_db($db) or die (mysql_error());
$sql = "SELECT * FROM camiseta_Masc";
$qr = mysql_query($sql) or die(mysql_error());
while($ln = mysql_fetch_assoc($qr)){
echo '<div class="col-md-4 bottom-cd simpleCart_shelfItem">';
echo '<div class="product-at ">';
echo '<a href="single.php"><img class="img-responsive" src="Produtos/Imagens/Camisetas masculinas/'.$ln['imagem'].'" />';
echo '<div class="pro-grid">';
echo '<span class="buy-in">Buy Now</span>';
echo '</div>';
echo '</a>';
echo '</div>';
echo '<br>';
echo '<font color="black" font face="Roboto" align="center" size="3px">'.$ln['nome'].'</font>';
echo '<p>';
echo '<font color="#00688B" size="2px">Por R$ '.number_format($ln['preco'], 2, ',', '.').'</font>';
echo '<div class="content">';
echo '<a href="checkout.php?acao=add&id='.$ln['id'].'" class="botao01">Comprar</a>';
echo '</div>';
echo '<br><br>';
echo '</div>';
}
?>
<div class="clearfix"> </div>
</div>
<div class=" bottom-product">
<div class="clearfix"> </div>
</div>
</div>
<div class="clearfix"> </div>
<nav class="in">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2 <span class="sr-only"></span></a></li>
<li><a href="#">3 <span class="sr-only"></span></a></li>
<li><a href="#">4 <span class="sr-only"></span></a></li>
<li><a href="#">5 <span class="sr-only"></span></a></li>
<li> <a href="#" aria-label="Next"><span aria-hidden="true">»</span> </a> </li>
</ul>
</nav>
</div>
</div>
<!---->
<!--//content-->
<div class="footer">
<div class="container">
<div class="footer-top-at">
<div class="col-md-4 amet-sed">
<h4>Mais informações</h4>
<ul class="nav-bottom">
<li><a href="blog.php">Quem somos</a></li>
<li><a href="sobre.php">Dúvidas</a></li>
<li><a href="contact.php">Localização</a></li>
<li><a href="register.php">Cadastro</a></li>
</ul>
</div>
<div class="col-md-4 amet-sed ">
<h4>Dados de contato</h4>
<p>Tel:(17)3543-0000</p>
<p>Fax:190-4509-494</p>
<p>Email: [email protected]</p>
<ul class="social">
<li><a href="#"><i> </i></a></li>
<li><a href="#"><i class="twitter"> </i></a></li>
<li><a href="#"><i class="rss"> </i></a></li>
<li><a href="#"><i class="gmail"> </i></a></li>
</ul>
</div>
<div class="col-md-4 amet-sed">
<h4>Newsletter</h4>
<p>Cadastre seu email para receber novidades</p>
<form>
<input type="text" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
<input type="submit" value="Enviar">
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="footer-class">
<p >© 2017 Site Marvel Dc | Site de Venda de produtos </p>
</div>
</div>
</body>
</html>