Tutorial de melhorias: imagens de produtos
Seguindo com os tutoriais de implementação das melhorias Nuvem Shop, 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!
Data da última atualização: 16/02/2018