Fórum OpenCart Brasil

[Manoel Vidal]

Olá colegas da OCBr.

Atualizado: 11/12/2011 - 2ª Versão

Vejo que muitas lojas online no Brasil são adeptas do efeito conhecido como zoom, que adiciona um zoom sobre a imagem principal do produto, e sinceramente acho este um recurso muito atrativo para os clientes, então para quem tiver interesse, vamos adicionar este recurso em nossa loja.

O passo a passo que vou descrever foi feito utilizando a versão 1.5.1.3 e como editor utilizei o Notepad++.

1) Baixe o plugin jquery batizado como jqzoom já modificado para encaixar certinho em seu OpenCart, segue o link para download, é só baixar e descompactar no diretório raiz de sua loja ou enviar via ftp respeitando a estrutura de pastas e arquivos:

Na 1ª versão foram feitos 136 downloads.
Download da 2ª versão:

jqzoom_opencart_1.5.zip

- Se desejar a versão original segue o link para download, e neste caso, você terá que preparar o pacote para o OpenCart:
http://www.mind-projects.it/projects/jqzoom/

2) Edite o arquivo product.tpl que está no diretório catalog/view/theme/SEU_TEMA/template/product/ e localize as seguintes linhas de código:

Código: Selecionar todos

<script type="text/javascript"><!--
$('.fancybox').fancybox({cyclic: true});
//--></script> 

- E antes do código acima acrescente o seguinte código:

Código: Selecionar todos

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/jqzoom/css/jquery.jqzoom.css" />
<script src="catalog/view/javascript/jquery/jqzoom/js/jquery.jqzoom-core-pack.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".jqzoom").jqzoom({
			showEffect: 'fadein',
			hideEffect: 'fadeout',
			fadeoutSpeed: 'slow',
			title: true,
			lens: true,
			zoomWidth: 350,
			zoomHeight: 350,
			preloadText: 'Carregando'
		});
	});
</script>

-Localize a seguinte linha de código:

Código: Selecionar todos

<a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="fancybox" rel="fancybox"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" /></a>

- E substitua por:

Código: Selecionar todos

<a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="jqzoom"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" /></a>

- Salve as alterações no arquivo.

Agora teste as alterações na sua loja, sendo que:
- Esta implementação/modificação adiciona o efeito zoom na foto principal da página de detalhes do produto, eliminando da foto principal o efeito fancybox.
- O efeito fancybox permanecerá nas fotos adicionais do produto em miniatura.

Observações:
- Se você implementou este tutorial na 1ª versão e deseja implementar a 2ª versão faça o seguinte:
1º Baixe o novo pacote do jqzoom para OpenCart que está neste tutorial, pois ele foi corrigido e atualizado para ser mais compacto e logo carregar mais rápido.
2º Remova todas as referências ao jqzoom que existirem no arquivo header.tpl do seu tema como: css e javascripts.
3º Refaça as alterações descritas neste tutorial no arquivo product.tpl do seu tema.

Espero que gostem e que seja útil

[Flavio_vivinho]

Testei na 1.5.1.1 e deu erro:
1 - O slides show da home sumiu;
2 - Ao clicar em um produto para visualizar: "Error: Could not load controller module/lastview!"
O que pode ter acontecido?
Até+

[Manoel Vidal]

Muito estranho realmente os erros que você citou, como citei testei na versão 1.5.1.3 e não sei se há compatibilidade com a sua versão.

O erro Error: Could not load controller module/lastview, me parece que ele está procurando pelo módulo Últimos Visualizados, que exibe os últimos produtos visualizados.

O erro com o slideshow é realmente muito estranho, pois esta modificação não meche em nada dele.

Mas como citei antes, pode ser incompatibilidade com a versão.

Espero ter ajudado

[Flavio_vivinho]

Muito estranho realmente os erros que você citou, como citei testei na versão 1.5.1.3 e não sei se há compatibilidade com a sua versão.

O erro Error: Could not load controller module/lastview, me parece que ele está procurando pelo módulo Últimos Visualizados, que exibe os últimos produtos visualizados.

O erro com o slideshow é realmente muito estranho, pois esta modificação não meche em nada dele.

Mas como citei antes, pode ser incompatibilidade com a versão.

Espero ter ajudado

Manoel, refiz todo o processo:
1 - Deletei todo o diretório da loja e descompactei outra cópia;
2 - Deletei todo o banco e criei outro com nome diferente;
3 - baixei novamente o arquivo que indicou e segui o passo-a-passo.

Resultado: Continuou a bloquear o slideshow da home e o projeto não funcionou; somente o erro que havia mencionado não ocorreu, quando clicava no produto para visualizá-lo. Após fazer estes testes, deletei o diretório e renomeei a copia que havia feito antes de colar os arquivos e o slideshow funcionou.
O estranho que a versão é muito perto uma da outra, 1.5.1.1 para 1.5.1.3!
Até+

[Manoel Vidal]

No final, que bom que resolveu, e valeu por informar como resolveu

[Flavio_vivinho]

No final, que bom que resolveu, e valeu por informar como resolveu

Não, não resolveu. Como disse acima:

Após fazer estes testes, deletei o diretório e renomeei a copia que havia feito antes de colar os arquivos e o slideshow funcionou.

Acho que não me expressei bem, o slide show voltou a funcionar depois de eu restaurar a cópia (pura, sem adição de módulos; fiz uma copia após acabar de instalar), somente depois deste processo e que adicionei o módulo e fiz os testes.
Em resumo: Não funcionou (aqui no meu pc) na versão 1.5.1.1. E, além de não funcionar, travou o slideshow.
Até+

[Manoel Vidal]

Neste caso, creio que a modificação só é compatível com a versão 1.5.1.3 mesmo, mas uma última pergunta, você está utilizando o tema default ?

[Flavio_vivinho]

Neste caso, creio que a modificação só é compatível com a versão 1.5.1.3 mesmo, mas uma última pergunta, você está utilizando o tema default ?

Sim. Não mudei nada após instalar; somente acrescentei o teu módulo. Assim que der, vou baixar a versão .3 e fazer alguns testes.
Ate+

[Nyux]

isso deve ser bug com o jquery, que deve estar dando conflito.

[aleflorida]

Para mim deu o mesmo erro mas decobri o problema. O caminho no header está errado:

Altere estas linhas:

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/jqzoom/css/jquery.jqzoom.css" />
<script src="catalog/view/javascript/jquery/jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>

Para:

<link rel="stylesheet" type="text/css" href="catalog/view/jquery/jqzoom/css/jquery.jqzoom.css" />
<script src="catalog/view/jquery/jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>

O diretório "javascript" está a mais...

Abs...Ale