Fórum OpenCart Brasil

Por um e-commerce livre, confiável e profissional

#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.
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
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
2) E substitua-o pelo código abaixo:
Código: Selecionar todos
<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>
3) Localize o código abaixo:
Código: Selecionar todos
<li><a href="<?php echo $categories[$i]['href']; ?>"><?php echo $categories[$i]['name']; ?></a></li>
4) E substitua-o pelo código abaixo:
Código: Selecionar todos
<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>
5) Agora vamos retirar a palavra Filtrar que fica acima dos subdepartamentos, para isso localize o código abaixo e o remova:
Código: Selecionar todos
<h2><?php echo $text_refine; ?></h2>
=== adicionado por Renato Frota ===

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
                $this->data['categories'][] = array(  
adicione esta nova linha em seguida:
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
.category-list ul {
	float: left;
	width: 18%;
}
- Depois substituir o código acima pelo código abaixo:
Código: Selecionar todos
.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;
}
- 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.

É ó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. :D
#16789
se voce esta falando das imagens dos departamentos, pior que estao todas corretas.... estranho....

fica assim >> http://shopdagalera.com/cart/index.php? ... ry&path=82
ainda que vc clica na imagem (que n aparece obvio), mas capaz de clicar, ele vai abrir a Sub categoria e a foto da marca/departamento aparece numa boa!!
Editado pela última vez por evaristood em 01 Mar 2012, 15:44, em um total de 2 vezes.
#16793
cara encontrei esse erro la no log...
2012-03-01 16:02:31 - PHP Notice: Undefined index: image in /home2/th132777/public_html/cart/catalog/view/theme/default/template/product/category.tpl on line 47
e o codigo que ta na linha 47 é:
<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>
tens alguma ideia?
#16806
arquivo catalog/controller/product/category.php

próximo a linha 136, encontre:
Código: Selecionar todos
                $this->data['categories'][] = array( 
adicione após:
Código: Selecionar todos
                    'image'  => $result['image'], 

Gente preciso de ajuda urgente. Na migraç&a[…]

Caro @reds , muito obrigado pela resposta.

PHP 8+ incompatibilidade

Toda tradução para a versão 3[…]

Ola @alex3257 Se você precisa apenas ver […]