Ops! Esse email nao possui permissão para abertura de ticket. Por favor, entre em contato com o responsável pela sua loja para providenciar o acesso.

Como configurar o zoom?

Um recurso muito comum em lojas online é o zoom.

Ele permite ver detalhes de uma imagem na medida em que o cliente passa o mouse sobre as fotos de um produto. Vamos ver ver como configurar e implementar esta funcionalidade.

 

Configurando o CSS

A primeira coisa a fazer é configurar o CSS da página que será aberta com uma imagem aproximada do produto no momento que o usuário passar o mouse em cima da foto do produto. Para isso, salve um arquivo com o CSS da página e suba para o servidor da sua loja.

Abaixo reproduzimos um trecho de CSS que você pode utilizar como ponto de partida para este fim. Copie e cole o conteúdo em um editor de texto e salve com o nome “zoom.css”, por exemplo.

 

.zoomPad{position:relative;float:left;z-index:99;cursor:crosshair} .zoomPreload{-moz-opacity:.8;opacity:.8;filter:alpha(opacity=80);color:#333;font-size:12px;font-family:Tahoma;text-decoration:none;border:1px solid #CCC;background-color:#fff;padding:8px;text-align:center;background-image:url(/arquivos/ajax-loader.gif);background-repeat:no-repeat;background-position:center center;z-index:110;width:100%;height:100%;position:absolute;top:0;left:0;} .zoomPup{overflow:hidden;background-color:#FFF;-moz-opacity:.6;opacity:.6;filter:alpha(opacity=60);z-index:120;position:absolute;border:1px solid #CCC;z-index:101;cursor:crosshair} .zoomOverlay{position:absolute;left:0;top:0;background:#FFF;z-index:5000;width:100%;height:100%;display:none;z-index:101} .zoomWindow{position:absolute; left:445px !important; top:40px; background:#FFF; z-index:6000; height:auto; z-index:10000; z-index:110;} .zoomWrapper{position:relative;border:1px solid #999;z-index:110; width:531px !important; height:400px !important;} .zoomWrapperTitle{display:block;background:#999;color:#FFF;height:18px;line-height:18px;width:100%;overflow:hidden;text-align:center;font-size:10px;position:absolute;top:0;left:0;z-index:120;-moz-opacity:.6;opacity:.6;filter:alpha(opacity=60)} .zoomWrapperImage{display:block;position:relative;overflow:hidden;z-index:110; height:400px !important;} .zoomWrapperImage img{border:0;display:block;position:absolute;z-index:101} .zoomIframe{z-index:-1;filter:alpha(opacity=0);-moz-opacity:.8;opacity:.8;position:absolute;display:block}

 

Em seguida, vamos enviar o arquivo CSS salvo para o servidor. Para isso, clique no menu Configurações> Portal dentro do Admin.

 

 

 

Na janela que se abrirá à direita, clique no botão Adicionar.

Em seguida, localize o arquivo CSS salvo acima e envie-o para o servidor clicando no botão Localizar e em seguida no botão Salvar arquivo.

Então, o seu arquivo será lista na janela, conforme a imagem abaixo:

 

Ativar o zoom no template de página

Uma vez efetuado os procedimentos acima, é preciso inserir o controle que ativa o zoom no template da página de produto. O processo para isso também acontece dentro do Gerenciador do Portal, só que dessa vez localizando o template de página de produto que deve estar dentro da pasta Portal> Templates de Página. Uma vez localizado o template, é necessário colocar a referência para o arquivo .css que acabamos de subir. Para isso, você deve incluir uma tag como a abaixo:

<link href="/arquivos/zoom.css" rel="stylesheet" type="text/css" />

dentro do head template, como faríamos com qualquer outro arquivo css. Agora basta inserir zoom="on" na tag do produto. Conforme abaixo:

<vtex.cmc:ProductImage zoom="on" />

Condições de funcionamento

É necessário configurar o tamanho padrão da imagem de zoom. Você pode definir isso em Configurações> Tipos de Arquivo dentro do Admin. Por padrão, esse tipo de imagem de zoom vem configurada com 1000×1000 pixels, o que significa que o zoom não funcionará caso você suba uma imagem com tamanho menor que esse.

http://www.youtube.com/watch?v=hsRaUR9rxjc

 

 



Tem mais dúvidas? Envie uma solicitação

Comentários

Quer falar com alguém?

Para questões técnicas, dúvidas de configurações, problemas com a plataforma ou sugestões

Abrir questão na Comunidade Suporte gratuito com a Comunidade VTEX (Como usar a Comunidade)
Abrir ticket Suporte pago VTEX

Para questões de Pagamentos, Boletos e Nota Fiscal

Outro tipo de questão?

Caso precise conversar sobre questões que não se encaixam nos casos anteriores ou não saiba o tipo de questão:
Fale com a VTEX

Powered by Zendesk