Tutorial de melhorias: imagens de produtos

Por: Dannie Karam
Criado em: 27/05/15.
Atualizado em 16/02/18.
5 min
de leitura

Índice

    programar quickshop

    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!

    Dannie Karam

    Com mais de 10 anos de experiência em gerenciamento de projetos digitais, Danniela é comunicadora, escritora e líder do time de Branding da Nuvem Shop. Gosta de música, viagem, pessoas e culturas. E sempre fala demais, especialmente quando escreve de si em terceira pessoa.


      Registre-se gratuitamente

      Receba posts sobre marketing e empreendedorismo diretamente no seu e-mail.

      Coloque o conhecimento na prática

      +15 mil alunos já aplicaram o aprendizado na Universidade e criaram seus negócios com a Nuvemshop.

      Teste 15 dias grátis

      Faça sua marca crescer

      Cria sua loja virtual com a Nuvemshop e venda de maneira profissional como eles:

      Osmoze - www.osmozestore.com.br
      Morango Brasil - morangobrasil.com.br
      Osram - loja.osram.com.br
      Testar 15 dias grátis