3

Colegas.

Tenho visto em algumas lojas virtuais que existe o recurso de mudar as cores do produto. Como eu faria para que ao clicar em uma determinada cor, o produto fosse alterado sem refresh? veja um modelo: lapupa.com.br/539sl

1 Resposta 1

2

Podes fazer assim, tendo em conta que isto obviamente não é o mesmo produto nem cores, mas a lógica será esta:

const prod_colors = {blue: 'https://cdn.mensagenscomamor.com/resize/400x225/content/images/int/imagens_de_deus.jpg', green: 'http://cdn.mixme.com.br/wp-content/uploads/2016/01/disney5.jpg', red: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTQJ8oMypN2S5RyM1S9zKxO3AOBc1UNT_EanYOIRYWK1evZVaj5'}
    
    for(var color in prod_colors) { // adicionar dinamicamente as cores que temos à disposição ao nosso select
       $('.colors').append('<div style="background-color: ' +color+ '" data-image="' +prod_colors[color]+ '"></div>');
    }
    $('.colors div').on('click', function() {
      var img_cor = $(this).data('image');
      $('.img_dinamic').prop('src', img_cor);
    });
.colors div {
  width: 20px;
  height: 20px;
  float: left;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <img class="img_dinamic" src="https://cdn.mensagenscomamor.com/resize/400x225/content/images/int/imagens_de_deus.jpg">
    <div class="colors">
      
    </div>
    <br>

4
  • Obrigado pela resposta Miguel, mas na verdade gostaria de algo parecido com esse modelo: lapupa.com.br/539sl
    – user24136
    Commented 10/01/2017 às 16:10
  • @Fox.11 na verdade a lógica é a mesma mas vai ser no click de divs em vez de estar num select, podias ter posto essa especificação na pergunta, agora não tenho muito tempo para fazer essa alteração, talvez mais tarde consiga
    – Miguel
    Commented 10/01/2017 às 16:13
  • Obrigado Miguel. Funcionou.
    – user24136
    Commented 11/01/2017 às 18:39
  • @Fox.11 de nada, ainda bem
    – Miguel
    Commented 11/01/2017 às 22:46

Você deve fazer log-in para responder a esta pergunta.