- 12 Fev 2012, 20:20
#15434
Olá colegas da OCBr.
Um recurso nativo do OpenCart é a possibilidade de vincular uma imagem ao cadastro de um departamento ou subdepartamento, e baseado neste recurso muitos colegas da comunidade vem solicitando a possibilidade de exibir esta imagem dos subdepartamentos quando você clica em um departamento e os subdepartamentos são listados acima dos produtos, então resolvi escrever este tutorial para ensinar a fazer esta simples modificação em nossas lojas onde substituiremos o nome do subdepartamento pela imagem que o representa.
Vamos lá!
1) Edite o arquivo category.tpl que está no diretório /catalog/view/theme/SEU_TEMA/template/product/ e localize o seguinte código:
Também é necessário editar o arquivo category.php que fica no diretório catalog/controller/product/
procure próximo a linha 136:
6) Salve as alterações no arquivo e veja a modificação em sua loja clicando em algum departamento que tenha subdepartamentos (obviamente que com imagens vinculadas aos subdepartamentos).
Melhorando:
Em um tema baseado no tema default, é exibido um "ponto" na frente das imagens dos subdepartamentos, o que indica que eles estão sendo exibidos em lista, para removermos este ponto e acrescentar algumas melhorias na exibição de nossas imagens como uma simples moldura e um efeito ao passarmos o mouse sobre a imagem do subdepartamento, temos que fazer uma editar o arquivo stylesheet.css que está no diretório /catalog/view/theme/SEU_TEMA/stylesheet/ e localizar o seguinte código:
É óbvio que muitas outras melhorias podem ser feitas conforme suas necessidades, porém meu objetivo é ensinar o básico, as melhorias ficam por conta de vocês.
Espero que gostem e que seja útil.
Um recurso nativo do OpenCart é a possibilidade de vincular uma imagem ao cadastro de um departamento ou subdepartamento, e baseado neste recurso muitos colegas da comunidade vem solicitando a possibilidade de exibir esta imagem dos subdepartamentos quando você clica em um departamento e os subdepartamentos são listados acima dos produtos, então resolvi escrever este tutorial para ensinar a fazer esta simples modificação em nossas lojas onde substituiremos o nome do subdepartamento pela imagem que o representa.
O passo a passo que vou descrever foi feito utilizando a versão 1.5.1.3 do OpenCart em um tema baseado no tema default, e como editor utilizei o Notepad++.Observação: Antes de começarmos é importante que você cadastre as imagens que você deseje que represente cada subdepartamento já no tamanho que você deseja que elas sejam exibidas e preferencialmente do mesmo tamanho, isso vai evitar que tenhamos que redimensioná-las via biblioteca do OpenCart e deixará a nossa modificação mais simples.
Vamos lá!
1) Edite o arquivo category.tpl que está no diretório /catalog/view/theme/SEU_TEMA/template/product/ e localize o seguinte código:
Código: Selecionar todos
2) E substitua-o pelo código abaixo:
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
Código: Selecionar todos
3) Localize o código abaixo:
<li><a href="<?php echo $category['href']; ?>" title="<?php echo $category['name']; ?>"><img src="image/<?php echo $category['image']; ?>" alt="<?php echo $category['name']; ?>" border="0" /></a></li>
Código: Selecionar todos
4) E substitua-o pelo código abaixo:
<li><a href="<?php echo $categories[$i]['href']; ?>"><?php echo $categories[$i]['name']; ?></a></li>
Código: Selecionar todos
5) Agora vamos retirar a palavra Filtrar que fica acima dos subdepartamentos, para isso localize o código abaixo e o remova:
<li><a href="<?php echo $categories[$i]['href']; ?>" title="<?php echo $categories[$i]['name']; ?>"><img src="image/<?php echo $categories[$i]['image']; ?>" alt="<?php echo $categories[$i]['name']; ?>" border="0" /></a></li>
Código: Selecionar todos
=== adicionado por Renato Frota ===<h2><?php echo $text_refine; ?></h2>
Também é necessário editar o arquivo category.php que fica no diretório catalog/controller/product/
procure próximo a linha 136:
Código: Selecionar todos
adicione esta nova linha em seguida:
$this->data['categories'][] = array(
Código: Selecionar todos
=========================== 'image' => $result['image'],
6) Salve as alterações no arquivo e veja a modificação em sua loja clicando em algum departamento que tenha subdepartamentos (obviamente que com imagens vinculadas aos subdepartamentos).
Melhorando:
Em um tema baseado no tema default, é exibido um "ponto" na frente das imagens dos subdepartamentos, o que indica que eles estão sendo exibidos em lista, para removermos este ponto e acrescentar algumas melhorias na exibição de nossas imagens como uma simples moldura e um efeito ao passarmos o mouse sobre a imagem do subdepartamento, temos que fazer uma editar o arquivo stylesheet.css que está no diretório /catalog/view/theme/SEU_TEMA/stylesheet/ e localizar o seguinte código:
Código: Selecionar todos
- Depois substituir o código acima pelo código abaixo:
.category-list ul {
float: left;
width: 18%;
}
Código: Selecionar todos
- Salve as alterações no arquivo e teste novamente sua loja, acessando a página de um departamento que possua subdepartamentos e pressione duas vezes as teclas Ctrl+F5 para que o arquivo stylesheet.css possa ser recarregado já com as alterações, se no seu navegador não funcionar o recarregamento da páginas com as teclas Ctrl+F5, limpe o cache do seu navegador..category-list ul {
float: left;
margin-top: 0px;
margin-left: 0px;
padding-left: 0px;
}
.category-list ul li {
float: left;
list-style-type: none;
border: #999 1px solid;
padding: 4px;
margin: 6px;
}
.category-list ul li img {
border: #999 1px solid;
}
.category-list ul li:hover {
background-color: #ececec;
}
É óbvio que muitas outras melhorias podem ser feitas conforme suas necessidades, porém meu objetivo é ensinar o básico, as melhorias ficam por conta de vocês.
Espero que gostem e que seja útil.
Sempre em frente...