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>