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
O que você achou desse conteúdo?
