Portfolio organization by categories

Asked

Viewed 130 times

1

Analyzing the MODEL, would like some simple suggestion to classify these blocks by categories dynamically with the same existing effects.
I have a table that saves the "product" id and the respective category ids related to this product.

categories_products
catp_id int(11) No
catp_pro_id int(11) Yes NULL
catp_cat_id varchar(255) Yes NULL

TABLE DATA:
dados da tabela categorias_produtos

PHP prototype (requires solution):

Remembering that category ids are processed into one array and separated by comma in the database using the function explode.

            <div class="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 the classes in this structure. You can see that the category name is processed within the tag data-filter, in PHP I built something similar with the comma separated category 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>Cras ornare tristique</h2>
                        <p>Vivamus vestibulum nulla nec ante.</p>
                    </div>
                    <div class="project-post animation photography">
                        <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 class="project-post design">
                        <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 class="project-post photography">
                        <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 class="project-post design">
                        <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 class="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>
php jquery html5 pdo

  • with numbers and commas in the class will not work, create a keyword for each category and separate them with space and not comma... by the way this your table structure this strange way, to concatenate the category Ids thus, would not need to be in a separate table, could be a field in the same products table...

  • At first it is so because its use was differentiated earlier. In the case some time ago I developed something similar however, unsuccessfully, where I used a function in_array, to check whether there is a certain number in the data-filter. I thought of something like this, developed the logic, but without success in practice. At first I think there must be some way using the ids, otherwise I will rediscover this part.

1 answer

1

If you use a table structure like in the model below, I think you can easily query all product categories and get the class of each one...

Table categories:

CREATE TABLE IF NOT EXISTS `categorias` (
  `id_categoria` int(11) NOT NULL AUTO_INCREMENT,
  `nome_categoria` varchar(255) NOT NULL,
  `classe_categoria` varchar(25) NOT NULL,
  PRIMARY KEY (`id_categoria`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

tabela categorias

Products table:

CREATE TABLE IF NOT EXISTS `produtos` (
  `id_produto` int(11) NOT NULL AUTO_INCREMENT,
  `nome_produto` varchar(255) NOT NULL,
  `descricao_produto` text NOT NULL,
  PRIMARY KEY (`id_produto`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

tabela produtos

Table products for categories:

CREATE TABLE IF NOT EXISTS `produtos_para_categorias` (
  `id_produto` int(11) NOT NULL,
  `id_categoria` int(11) NOT NULL,
  PRIMARY KEY (`id_produto`,`id_categoria`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

tabela produtos_para_categorias

An example query for product ID 1:

SELECT * 
FROM `produtos_para_categorias` 
LEFT JOIN `categorias` 
USING ( id_categoria ) 
WHERE id_produto =1
LIMIT 0 , 30

select

Browser other questions tagged php jquery html5 pdo

You are not signed in. Login or sign up in order to post.