Dentro da VTEX, montar uma galeria personalizada pode ser algo complexo se não começar o trabalho do jeito certo. Confira como fazer sem dor de cabeça.

Assim como diversos controles para templates da VTEX, o controle que carrega a galeria de fotos dentro da página do produto (<vtex.cmc:ProductImage />) insere na página um HTML já estruturado, com diversos scripts para zoom das imagens e entre outras coisas. De certa forma, isso ajuda no desenvolvimento e deploy rápido de uma loja “padrão”, porém tira muitas possibilidades de personalização da galeria de fotos, já que ficamos presos naquela estrutura de código fornecido por eles.

Ciente disso, a VTEX promete lançar já no começo de 2017, o Storefront. Essa nova plataforma não será retrocompatível com as lojas já implementadas. Segundo a VTEX, os desenvolvedores não precisarão mais lidar com caches demorados em ambiente de desenvolvimento, terão flexibilidade na implementação das lojas, uma loja de aplicativos entre outras novidades.

Enquanto o Storefront não é uma realidade para nós, seguimos desenvolvendo na plataforma atual da maneira que podemos. E hoje vamos trazer uma solução para que você possa personalizar a galeria de imagens da sua página de produtos da maneira que quiser.


Vamos ao código:

Como já dito, o controle de template que carrega no layout as imagens de um produto, é o <vtex.cmc:ProductImage />. Ele insere na página um HTML com essa estrutura:

<div class="apresentacao">
    <div id="setaThumbs"></div>
    
    <div id="show">
        <div id="include">
            <div id="image" productindex="0">
                <a class="image-zoom" href="http://savan.vteximg.com.br/arquivos/ids/242855-1000-1000/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg" rel="undefined" style="outline-style: none; text-decoration: none;" title="">
                    <div class="zoomPad">
                        <img id="image-main" class="sku-rich-image-main" src="http://savan.vteximg.com.br/arquivos/ids/242855-340-340/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg" productindex="0" title="" style="opacity: 1;">
                        <div class="zoomPup" style="display: none; top: 238px; left: 203.5px; width: 101px; height: 101px; position: absolute; border-width: 1px;"></div>
                        <div class="zoomWindow" style="position: absolute; z-index: 5001; left: 350px; top: 0px; display: none;">
                            <div class="zoomWrapper" style="width: 300px;">
                                <div class="zoomWrapperTitle" style="width: 100%; position: absolute; display: none;"></div>
                                <div class="zoomWrapperImage" style="width: 100%; height: 300px;">
                                    <img style="position: absolute; border: 0px none; display: block; left: -601.471px; top: -702.941px;" src="http://savan.vteximg.com.br/arquivos/ids/242855-1000-1000/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg">
                                </div>
                            </div>
                        </div>
                        <div class="zoomPreload" style="visibility: hidden; top: 170px; left: 170px; position: absolute;"></div>
                    </div>
                </a>
            </div>
        </div>
        
        <ul class="thumbs">
            <li>
                <a id="botaoZoom" class="ON" zoom="http://savan.vteximg.com.br/arquivos/ids/242855-1000-1000/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg" rel="http://savan.vteximg.com.br/arquivos/ids/242855-340-340/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg" title="Zoom" href="javascript:void(0);">
                    <img alt="tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir" title="tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir" src="http://savan.vteximg.com.br/arquivos/ids/242855-55-55/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg">
                </a>
            </li>
            <li>
                <a id="botaoZoom" class="ON" zoom="http://savan.vteximg.com.br/arquivos/ids/242855-1000-1000/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg" rel="http://savan.vteximg.com.br/arquivos/ids/242855-340-340/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg" title="Zoom" href="javascript:void(0);">
                    <img alt="tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir" title="tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir" src="http://savan.vteximg.com.br/arquivos/ids/242855-55-55/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg">
                </a>
            </li>
            <li>
                <a id="botaoZoom" class="ON" zoom="http://savan.vteximg.com.br/arquivos/ids/242855-1000-1000/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg" rel="http://savan.vteximg.com.br/arquivos/ids/242855-340-340/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg" title="Zoom" href="javascript:void(0);">
                    <img alt="tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir" title="tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir" src="http://savan.vteximg.com.br/arquivos/ids/242855-55-55/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg">
                </a>
            </li>
            <li>
                <a id="botaoZoom" class="ON" zoom="http://savan.vteximg.com.br/arquivos/ids/242855-1000-1000/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg" rel="http://savan.vteximg.com.br/arquivos/ids/242855-340-340/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg" title="Zoom" href="javascript:void(0);">
                    <img alt="tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir" title="tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir" src="http://savan.vteximg.com.br/arquivos/ids/242855-55-55/tenis-nike-wmns-dual-fusion-724457-001-grafite-rosa_pdir.jpg">
                </a>
            </li>
        </ul>
    </div>
</div>

Observe que desse HTML gerado pela VTEX, é possível obter as URL’s de todas as imagens do produto, e então utilizar essas URL’s da maneira que quiser. E a ideia para fazer isso é bem simples. Em vez de utilizar e então estilizar o controle <vtex.cmc:ProductImage /> dentro da página de produto, vamos colocar esse controle dentro de uma <div> logo após a abertura do <body>. E então vamos esconder MUITO bem essa <div>, com um simples display: none. E não se preocupe, um elemento com display: none continua no DOM, podendo ser manipulado da mesma maneira.

E para facilitar essa manipulação, coloque uma classe e um ID nessa <div>. Por exemplo <div id=”product-images-clone” class=”hidden-clone”><vtex.cmc:ProductImage /></div>.

A classe .hidden-clone contém apenas um display: none para esconder a <div> (e por ser uma classe pode ser utilizada em outros elementos que queira fazer o mesmo), e o ID nós vamos utilizar no JavaScript/jQuery.

E agora sabendo a estrutura do HTML que a VTEX gera, e que esse HTML está dentro de um elemento com ID #product-images-clone, basta navegar pelo DOM (obviamente depois que ele já está pronto) e encontrar as URL’s das imagens. E isso pode ser feito da seguinte forma:

( function( $ ) {
    $( function() {
        var productImages = [];
        
        $( '#product-images-clone .thumbs li a' ).each( function() {
            var self = $( this );
            
            productImages.push( {
                image: self.attr( 'zoom' ),
                thumb: self.find( 'img' ).attr( 'src' )
            } );
        } );
        
        console.log( productImages ); // Apenas para debug!
    } );
} )( jQuery );

Um exemplo de conteúdo da variável productImages após a interpretação do código acima:

[
    {
        image: 'url-imagem',
        thumb: 'url-thumb'
    }, {
        image: 'url-imagem',
        thumb: 'url-thumb'
    }, {
        image: 'url-imagem',
        thumb: 'url-thumb'
    }, {
        image: 'url-imagem',
        thumb: 'url-thumb'
    }
]

Agora nós temos uma variável chamada productImages contendo um array de objetos, onde cada objeto tem 2 propriedades. A imagem normal e a imagem thumb.
E a partir desse array, você fica livre para gerar o seu HTML utilizando essas imagens, programar o seu JavaScript e estilizar a galeria com o seu CSS, da maneira que quiser.