Fórum OpenCart Brasil

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: - 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:
- E antes do código acima acrescente o seguinte código:
-Localize a seguinte linha de código:
- E substitua por:

- 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

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é+

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 Vidal escreveu: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é+

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

Manoel Vidal escreveu: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é+

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 ?

Manoel Vidal escreveu: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+

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

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