HUFERSIL.WEBDEVELOPER

Criando um catálogo de produtos com Lumine e CodeIgniter – Parte 8

Olá pessoal

Hoje vamos fazer a parte de exibição de produtos.
Iremos:

  • Alterar o arquivo CSS
  • Criar uma controller de produtos
  • Criar a template de visualização de detalhes do produto

 

Alterando o arquivo CSS

Abra o arquivo assets/css/site.css e adicione os estilos abaixo:

.breadcrumb {
	padding: 10px 0px 10px 0px;
}
.breadcrumb li {
	display: inline;
}
 
.breadcrumb li:after {
	content: " » "; 
}
 
.breadcrumb li:first-child:after, .breadcrumb li:last-child:after {
	content: "" !important;
}
 
.detalhes-produto .fotos {
	width: 300px;
	overflow: hidden;
	float: left;
	padding-right: 10px;
}
 
.detalhes-produto .fotos .ampliada {
	text-align: center;
}
 
.detalhes-produto .fotos ul li {
	display: block;
	float: left;
	margin: 0px 5px 5px;
}
 
.detalhes-produto .conteudo {
	float: left;
	width: 650px;
}
 
.detalhes-produto .conteudo > ul {
	padding: 0px;
}
 
.detalhes-produto .conteudo > ul li a {
	font-weight: bold;
	font-size: 14px;
}
 
.detalhes-produto .conteudo > ul li.active {
	background-color: #F30;
}
 
.detalhes-produto .conteudo > ul li.active a {
	color: #FFF;
}
 
.detalhes-produto .conteudo > ul li {
	position: relative;
	display: block;
	float: left;
	padding: 5px;
	border: 1px solid #F30;
	border-bottom: 0px;
	background-color: #FFF;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
 
.detalhes-produto .conteudo .tab-content {
	clear: both;
	border: 1px solid #F30;
	min-height: 100px;
	padding: 10px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
}
 
.detalhes-produto .conteudo .tab-content.hidden {
	display: none;
}

Nota: não sou bom designer =o)
É só um exemplo de como montar um layout para nosso exemplo. Fique a vontade para fazer da maneira como achar melhor.

Criando a controller de produtos

Por enquanto ela está simples, pois só vamos exibir o conteúdo de detalhamento dos produtos. Crie a controller na estrutura application/controllers/produtos.php com o conteúdo abaixo:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
/**
 * Controller para operações relacionadas a produtos na parte publica
 * 
 *
 * @author Hugo Ferreira da Silva
 *
 */
class Produtos extends SiteController {
 
	/**
	 * Exibe os detalhes de um produto
	 * 
	 * Recebe o codigo do produto seguido do nome,
	 * separados por um hífem.
	 * 
	 * @param string $codigo Codigo do produto
	 * @return void
	 */
	public function detalhes($codigo = null){
 
		if(empty($codigo)){
			show_404();
		}
 
		$codigo = array_shift(explode('-', $codigo));
		$produto = new Produto();
		if( $produto->get($codigo) < 1 ){
			show_404();
		}
 
		// pegando as fotos dos produtos
		$foto = new Foto();
		$foto->codproduto = $produto->codproduto;
		$foto->order('ordem')
			->find();
 
		// pegando a arvore de categorias
		$categoria = new Categoria();
		$breadcrumb = $categoria->getArvore($produto->codcategoria);
 
		// colocando os dados no template
		$this->assign('produto', $produto->toArray());
		$this->assign('breadcrumb', $breadcrumb);
		$this->assign('fotos', $foto->allToArray());
 
		$this->loadCommonAssets();
		$this->display('produtos/detalhes');
	}
}

Note que na categoria chamamos um método que não tinhamos: getArvore. Abaixo a implementação deste método, que deverá ser colocado dentro do já existente arquivo application/models/Categoria.php

    /**
     * Retorna uma árvore da categoria indicada
     * 
     * @param int $codigo Código da categoria desejada
     * @return array
     * @author Hugo Ferreira da Silva
     */
    public function getArvore($codigo){
    	$lista = array();
 
    	while(!empty($codigo)){
    		$this->reset();
    		$this->get($codigo);
    		$lista[] = $this->toArray();
    		$codigo = $this->codpai;
    	}
 
    	return array_reverse($lista);
    }

Criando o template para visualização do produto

Este já é mais fácil; consiste somente de um HTML para exibição dos dados e um pouquinho de jQuery para animar as fotos em miniatura e ampliar na foto maior.

<div id="content">
	<div id="whats-hot">
 
		<ul class="breadcrumb">
			<li>Você está em:</li>
			<?php 
			echo fncImprimeConteudoAninhado(
				$breadcrumb
				, '<li><a href="'.site_url('categorias/lista/:codcategoria-:nome').'">:nome</a></li>'
				, ''
			);
			?>
		</ul>
 
		<h2 class="w-bot-border">
			Detalhes do produto <span><?php echo $produto['nome']; ?></span>
		</h2>
 
		<div class="detalhes-produto">
			<div class="fotos">
				<div class="ampliada">
					<?php 
					$foto = reset($fotos);
					echo '<img width="250" src="'.base_url($foto['grande']).'" title="' . $produto['nome'] . '" alt="'.$produto['nome'].'" />';
					?>
				</div>
 
				<ul>
					<?php 
					echo fncImprimeConteudoAninhado(
						$fotos
						, '<li>
							<a href="'.base_url(':grande').'">
								<img src="'.base_url(':thumb').'" alt="'.$produto['nome'].'" />
							</a>
						</li>'
						, ''
					);
					?>
				</ul>
			</div>
 
			<div class="conteudo">
				<ul>
					<li class="active"><a href="#tab-descricao">Descrição</a>
					<li><a href="#tab-obs-tecnicas">Especificações</a>
				</ul>
 
				<div id="tab-descricao" class="clearfix tab-content"><?php echo nl2br($produto['descricao']); ?></div>
				<div id="tab-obs-tecnicas" class="clearfix tab-content hidden"><?php echo nl2br($produto['observacoesTecnicas']); ?></div>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
	// criando o componente de abas
	$('.conteudo ul li a').click(function(e){
		var me = $(this), ul = me.closest('ul');
		ul.find('li').removeClass("active");
		me.closest('li').addClass('active');
 
		ul.parent().find('> div').addClass('hidden');
		ul.parent().find(me.attr('href')).removeClass('hidden');
 
		e.preventDefault();
		return false;
	});
 
	// elemento que contem as fotos do produto
	var ulFotos = $('.detalhes-produto .fotos ul');
 
	// criamos um elemento para "envelopar" as fotos
	var d = ulFotos.wrap('<div/>').parent();
 
	// ajustamos algumas propriedades/estilos
	d.width( 250 )
		.height( 100 )
		.css({overflow: 'hidden', position: 'relative', margin: '0px auto 0px auto', border: '1px solid #EFEFEF', padding: 2});
 
	// pegamos os elementos da lista
	var li = ulFotos.find('li');
 
	// recalculamos o tamanho da ul
	ulFotos.width( 110 * li.length ) 
		.css({position: 'absolute', display: 'block'});
 
	// verificamos se precisa reposicionar conforme o mouse
	var ulw = ulFotos.width();
	var w   = d.width();
	if(ulw > d.width()){
		d.bind('mousemove', function(e){
			var diff = w - ulw;
			var pct = (e.pageX - d.offset().left) / w;
 
			ulFotos.css({
				left: (diff * pct)
			});
		});
	}
 
	// quando clicar num imte da lista
	ulFotos.find('a').bind('click', function(event){
		$('.ampliada img').attr('src', this.href);
		event.preventDefault();
		return false;
	});
});
</script>

Este arquivo deverá ficar no caminho: application/views/site/produtos/detalhes.php

Se estiver tudo certo em suas modificações, a visualização dos produtos deverá ficar semelhante a este link.

Na próxima, veremos como fazer a listagem de produtos por categoria.

@braços e fique com Deus!

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

*

Pode usar estas etiquetas HTML e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">