Swap image or image color in virtual store

Question

Colleagues.

I have seen in some virtual stores that there is the feature of changing the colors of the product. How would I make sure that when I click on a certain color, the product is changed without refresh? see a model: lapupa.com.br/539sl

Answer 1

You can do it this way, given that this is obviously not the same product or colors, but the logic will be this:

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>