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 no seu e-commerce VTEX.

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 menuConfigurações> Portal (antigo Páginas de Vitrine (v2)) dentro do Admin.

Isso te levará para o Gerenciador do Portal. Uma vez lá, clique nas pastas Portal> Gerenciamento de Arquivos> .css. Na janela que se abrirá à direita, clique no botãoAdicionar. 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. Se tudo der certo, 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 a tag

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

dentro do head template, como faríamos com qualquer outro arquivo css.

Agora vamos inserir o controle

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

no body da página do template de produto.

Condições de funcionamento

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

É necessário também seguir algumas condições básicas, como 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 diferente desse.