Modify the images

Question

I am currently working on Drupal 8 and Drupal commerce.

I have created an image field called "field_image_category" in the product-variation-types called "default".

I have created a color field as an attribute called "attribute_color".

I have copied the file commerce-product.html.twig in my theme.

if I want to show only the image field and the variation field where the color is displayed and the add button to the cart, I do it with the following code

{{ product.variation_field_imagen_category }}   
{{ product.variations }}

if I want to modify the images and only show the small images I do it with the following code

    {% for  img in    product.variation_field_imagen_category  %}
     {% if img.entity %}
      {% for  imgv in  img %}
        {# Set product thumbnail. #}
         {% set imagen1 = {
          '#theme':'image_style',
          '#style_name': 'thumbnail',
          '#uri': imgv.entity.uri.value,
          '#alt': imgv.alt}
         %}
       {{ imagen1  }}
      {% endfor %}
     {% endif %}
    {% endfor %}
{{ product.variation_field_imagen_category }}   

my problem is that if I have two colors as an attribute of a product, the modified images do not change and only the image field called

{{ product.variation_field_imagen_category }}   

How can I achieve that when I select a color, I also automatically change the small images that I have added?

Answer 1

I installed the module juicebox, and this module is integrated very well with drupal 8 commerce.