Tutorial de melhorias: imagens de produtos

Índice

Seguindo com os tutoriais de implementação das melhorias Nuvemshop, trouxemos hoje um guia rápido a respeito de imagens de produtos. Este tutorial muda a imagem de um produto ou o processo de quickshop dependendo da variação selecionada. Para fazer com que os clientes possam visualizar imagens diferenciadas dentro de um mesmo produto, siga os dois passos abaixo:

1. Registre uma função para ser executada a cada vez que uma mudança de variação for detectada. Essa função Javascript deve ser inserida em layout.tpl.

$(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 templates/product.tpl adicione o ID da data-image para conectar à imagem que deve ser selecionada.

<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>

Nem é tão complicado, certo? E se você ainda não é parceiro Nuvem, mas gostaria de atender seus (E NOSSOS) clientes com uma solução de e-commerce, cadastre-se agora e conheça todos os benefícios!