Looking at the MODEL , I would like some simple suggestion to classify these blocks by categories dynamically with the same effects already existing. Home
I have a table that saves the id of the "product" and its ids of the categories related to this product.
product_categories
catp_id int (11) catp_pro_id int (11) Yes NULL
catp_cat_id varchar (255) Yes NULLTable DATA:
PHPprototype(needssolution):
Rememberingthatthecategoryidsareprocessedinaarray
andareseparatedbycommasinthedatabaseusingtheexplode
function.
<divclass="section-content portfolio-section grid">
<div class="container">
<ul class="filter">
<li><a href="#" class="active" data-filter="*">Todas categorias</a></li>
<?php $selCategoria = $conn->prepare("SELECT * FROM cat ORDER BY cat_nome ASC");
$selCategoria->execute();
if($selCategoria->rowCount() > 0):
while($rowCategoria = $selCategoria->fetch(PDO::FETCH_OBJ)): ?>
<li><a href="#" data-filter=".<?php echo $rowCategoria->cat_id; ?>"><?php echo $rowCategoria->cat_nome; ?></a></li>
<?php endwhile; endif; ?>
</ul>
<div class="portfolio-box masonry two-col">
<?php $selProdutos = $conn->prepare("SELECT p.pro_id, p.pro_nome, p.pro_status, p.pro_valor, p.pro_destaque, p.pro_brevedescricao, fp.posicao, fp.arquivo, cp.catp_cat_id
FROM produtos p
LEFT JOIN fotos_produtos fp ON p.pro_id = fp.id_produto AND fp.posicao = ?
RIGHT JOIN produtos ON p.pro_status = ?
LEFT JOIN categorias_produtos cp ON cp.catp_pro_id = p.pro_id
GROUP BY p.pro_id
ORDER BY rand() ");
$selProdutos->execute(array(0,1));
while($rowProduto = $selProdutos->fetch(PDO::FETCH_OBJ)): ?>
<div class="project-post <?php echo $rowProduto->catp_cat_id; ?>">
<div class="project-gal">
<img alt="" src="<?php echo URL; ?>administracao/imagens/produtos/tamanho1_<?php echo $rowProduto->arquivo; ?>">
</div>
<h2><?php echo $rowProduto->pro_nome; ?></h2>
<p><?php echo $rowProduto->pro_brevedescricao; ?></p>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
HTML structure:
Ignore the origin of classes in this structure. It can be seen that the category name is rendered inside the data-filter
tag, in PHP I mounted something similar with the comma-separated categories ID in data-filter
.
<div class="section-content portfolio-section grid">
<div class="container">
<ul class="filter">
<li><a href="#" class="active" data-filter="*">Todas categorias</a></li>
<li><a href="#" data-filter=".design">Categoria 1</a></li>
<li><a href="#" data-filter=".animation">Categoria 2</a></li>
<li><a href="#" data-filter=".photography">Categoria 3</a></li>
</ul>
<div class="portfolio-box masonry two-col">
<div class="project-post design">
<div class="project-gal">
<img alt="" src="http://placehold.it/460x300"></div><h2>Crasornaretristique</h2><p>Vivamusvestibulumnullanecante.</p></div><divclass="project-post animation photography">
<div class="project-gal">
<img alt="" src="http://placehold.it/460x300"></div><h2>Crasornaretristique</h2><p>Vivamusvestibulumnullanecante.</p></div><divclass="project-post design">
<div class="project-gal">
<img alt="" src="http://placehold.it/460x300"></div><h2>Crasornaretristique</h2><p>Vivamusvestibulumnullanecante.</p></div><divclass="project-post photography">
<div class="project-gal">
<img alt="" src="http://placehold.it/460x300"></div><h2>Crasornaretristique</h2><p>Vivamusvestibulumnullanecante.</p></div><divclass="project-post design">
<div class="project-gal">
<img alt="" src="http://placehold.it/460x300"></div><h2>Crasornaretristique</h2><p>Vivamusvestibulumnullanecante.</p></div><divclass="project-post animation">
<div class="project-gal">
<img alt="" src="http://placehold.it/460x300">
</div>
<h2>Cras ornare tristique</h2>
<p>Vivamus vestibulum nulla nec ante.</p>
</div>
</div>
</div>
</div>