Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Imagens de variações

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>