Magento2: Magento 2.1 visual swatch changes only the first picture of product

[ps202]

Preconditions

Operating System: Ubuntu 15.10

PHP 5.6.11-1ubuntu3.4 (cli)
Copyright (c) 1997-2015 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2015 Zend Technologies
with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2015, by Zend Technologies

mysql Ver 14.14 Distrib 5.6.31, for debian-linux-gnu (x86_64) using EditLine wrapper

Magento 2.1.0 CE

Steps to reproduce

1. Install Magento
2. Create one configurable product with 2 images
3. Create configurations (simple products) for that configurable product (color, size for example)
4. Add 2 images to each simple product

5. Browse to the product and use the visual swatches to change the color

   Expected result

6. Clicking on the swatches should change BOTH images

   Actual result

7. Only the FIRST image changes, second image stays as it was before. Stepping through the images is weird, because first image is for example red, second white...

Configurable product with simple images:

Images in the configurable product:

Images in the simple product:

Default product view:

Product view after clicking on the swatch:

Gallery view after clicking on the swatch:

[ps202]

Isssue is similar to this one here:
https://github.com/magento/magento2/issues/4101

[pboisvert]

Olena--can you check on this one? Seems like a duplicate.

[ps202]

Yeah, it seems to be a duplicate, but I think the other one was closed without providing a real solution. :(

[JesseEnd]

I'm having this same issue.

[tkacheva]

@JesseEnd @ps202
Gallery supports several modes to show images from configurable options:

• Replace images in gallery with the ones from configurable options
• Upend images from configurable option to the images in gallery

Currently the second option is broken. Internal issue MAGETWO-57210

[erikhansen]

@tkacheva Where would a merchant customize the gallery modes? Is this something they can do from the admin, or would a developer need to make (possibly in the etc/view.xml file)?

I was working with a merchant yesterday and uncovered that the Blank and Luma themes handle this differently: The Luma theme has the issue discussed in this issue. However the Blank theme works as you would expect: when a swatch is selected, all of the images of the simple product are shown in the gallery, not just the first one. So there is clearly something happening in the Luma theme that is causing different behavior from the Blank theme.

[ps202]

@tkacheva
Replace is also not really functioning, because if I have 2 images in the gallery of the configurable product, and also 2 images in the gallery of the simple product (as displayed above), according to your comment, the replace function should replace the existing images in the gallery.
But it is only replacing the first one.
So I would say both options are broken, not only the second one.

[ps202]

@erikhansen @tkacheva
I just tried out what Eric wrote above: I can confirm, that just switching to the Blank theme solves the issue...
Both images are changed, not just the first one.

[ps202]

Any update on this one?
Switching to the Blank Theme just raised more issues...

[tkacheva]

@ps202 @erikhansen
Yes, the setting I'm referring to is available only for developers that allows to change it per theme. That's why gallery in Blank and Luma behaves differently.

Work in progress

[ps202]

@tkacheva
can you provide a workaround for luma?
thanks!

[ps202]

@tkacheva
Does not matter, I found it.
/app/design/frontend/Magento/luma/etc/view.xml

Change these to false:

<vars module="Magento_ConfigurableProduct">
    <var name="change_only_base_image">false</var>
</vars>
<vars module="Magento_Swatches">
    <var name="change_only_base_image">false</var>
</vars>

[nelsonvpf]

@ps202 Well done. It's working now

[erikhansen]

@tkacheva I'm glad @ps202 found a workaround. While I understand that it may be easier from a development standpoint to make some settings be configured in etc/view.xml, this seems like a feature that would be ideal to have as an admin config setting. Just my two cents.

[carlowens]

👍 Thanks for the fix

[rashidtahir]

After implementing this solution images are now switching fine when selecting color swatches but we have video that's not showing now.When page load first time its show for couple of seconds and then it goes although we have assign video to simple products as well.

[thaddeusmt]

Just FYI, it appears that the way to change this functionality in your theme has changed a bit. The change_only_base_image option is gone. Now, in your theme's view.xml, you need to add this:

    <vars module="Magento_ConfigurableProduct">
        <var name="gallery_switch_strategy">prepend</var>
    </vars>

The default is replace, which prepend is overriding.

It appears that the Swatches module knows to look for this single setting, and you only need to set it on the ConfigurableProduct module.