Essa funcionalidade permite trocar a imagem principal do produto de acordo com as variações do mesmo.
Por exemplo: Temos uma camiseta com variações nas cores azul/vermelho e queremos mostrar imagens ampliadas de cada uma delas, quando selecionadas.
Essa funcionalidade funciona apenas na página do produto.
1. No arquivo layout.tpl cole o código javascript abaixo antes do tag </body>
. Essa função será executada a cada vez que uma mudança de variação for detectada.
$(document).ready(function() { LS.registerOnChangeVariant(function(variant){ // this is used on quick shop modals var current_image = $('img', '#quick'+variant.product_id); current_image.attr('src', variant.image_url); // this is used on single product view $(".cloud-zoom-gallery[data-image="+variant.image+"] > img").click(); }); })
2. Em seguida, vá em templates/product.tpl e adicione o atributo data-image:{{image.id}
ao elemento <a>
"pai" da imagem principal.
Para encontrar mais rapidamente o elemento, busque pelo o seguinte loop: {% if product.images_count > 1 %
. Depois de modificado, o código deverá ficar como no exemplo abaixo:
<a href="{{ image | product_image_url('original') }}" class="cloud-zoom-gallery img-thumbnail" rel="useZoom: 'zoom', smallImage: '{{ image | product_image_url('large') }}' " data-image="{{image.id}}"> {{ image | product_image_url('thumb') | img_tag(product.name) }} </a>