Magento2: Configurable associated product image not showing

[rani-webkul]

Preconditions (*)

1. Magento 2.3-develop

Steps to reproduce (*)

1. create a configurable product based on _Text Swatch attribute_
2. check it at frontend

Expected result (*)

1. product image should be change as per selected configuration

Actual result (*)

1. product image not showing as per selected configuration

Example:
https://github.com/magento/magento2/issues/24571#issuecomment-537949454

[m2-assistant[bot]]

Hi @rani-webkul. Thank you for your report.
To help us process this issue please make sure that you provided the following information:

• [ ] Summary of the issue
• [ ] Information on your environment
• [ ] Steps to reproduce
• [ ] Expected and actual results

Please make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, please, add a comment to the issue:

@magento give me 2.3-develop instance - upcoming 2.3.x release

For more details, please, review the Magento Contributor Assistant documentation.

@rani-webkul do you confirm that you were able to reproduce the issue on vanilla Magento instance following steps to reproduce?

• [ ] yes
• [ ] no

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[m2-assistant[bot]]

Hi @engcom-Bravo. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• [ ] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
  Details

  If the issue has a valid description, the label Issue: Format is valid will be added to the issue automatically. Please, edit issue description if needed, until label Issue: Format is valid appears.

• [ ] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue. If the report is valid, add Issue: Clear Description label to the issue by yourself.

• [ ] 3. Add Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [ ] 4. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!

• [ ] 5. Add label Issue: Confirmed once verification is complete.

• [ ] 6. Make sure that automatic system confirms that report has been added to the backlog.

[engcom-Bravo]

Hello @rani-webkul. Probably we miss or misunderstand something, so please watch our gif and tell us where we go wrong. Thank You.

[rani-webkul]

@magento give me 2.3-develop instance

[magento-engcom-team]

Hi @rani-webkul. Thank you for your request. I'm working on Magento 2.3-develop instance for you

[magento-engcom-team]

Hi @rani-webkul, here is your Magento instance.
Admin access: https://i-24571-2-3-develop.instances.magento-community.engineering/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[rani-webkul]

@engcom-Bravo please look into https://i-24571-2-3-develop.instances.magento-community.engineering/test-conf.html

[magento-engcom-team]

:white_check_mark: Confirmed by @engcom-Bravo
Thank you for verifying the issue. Based on the provided information internal tickets MC-20134 were created

Issue Available: @engcom-Bravo, _You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself._

[ihor-sviziev]

Hi @rani-webkul or @engcom-Bravo ,
Could you add some gif/video that shows how issue reproducing? Unfortunately test instance already not available to check how @rani-webkul configured it.

[rani-webkul]

@magento give me 2.3-develop instance

[magento-engcom-team]

Hi @rani-webkul. Thank you for your request. I'm working on Magento 2.3-develop instance for you

[magento-engcom-team]

Hi @rani-webkul, here is your Magento instance.
Admin access: https://i-24571-2-3-develop.instances.magento-community.engineering/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[rani-webkul]

@ihor-sviziev, Please check https://i-24571-2-3-develop.instances.magento-community.engineering/test-config.html

[ihor-sviziev]

Hi @rani-webkul,
I just checked - param "Update Product Preview Image" is set to "No" in Stores >> Attributes >> Product >> size

That's why it didn't appeared.
Once I changed it to "Yes" and flushed cache - product image started changing

[rani-webkul]

@ihor-sviziev I have assigned images to each associated product but it's not showing at frontend why?

[ihor-sviziev]

Hi @rani-webkul

@ihor-sviziev I have assigned images to each associated product but it's not showing at frontend why?
I just checked - image URL generated correctly, but somehow resized image shows default magneto thumbnail:

https://i-24571-2-3-develop.instances.magento-community.engineering/pub/media/catalog/product/cache/f77037f53323565848a245b9388a2a70/i/m/img-3_1.png

While without "cache" it shows correct image:
https://i-24571-2-3-develop.instances.magento-community.engineering/pub/media/catalog/product/i/m/img-3_1.png

I'm not sure why preview image wasn't generated correctly - it might be issue with test instance, or another issue, but image URL is correct, so swatches functionality works fine.

Could you confirm that everything works fine, or add some more details?

[m2-assistant[bot]]

Hi @ihor-sviziev. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if you want to validate it one more time, please, go though the following instruction:

• [ ] 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [ ] 2. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!

• [ ] 3. If the issue is not relevant or is not reproducible any more, feel free to close it.

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[engcom-Bravo]

Hi, @ihor-sviziev. Thank You for Your contributing to this issue. With the aforementioned setting set to Yes everything works fine. Maybe we really ought to close this issue. But one thing still bothers me - is it just an inaccuracy in the settings comment or not: "Filtering by this attribute will update the product image on catalog page". Usually filtering is associated with the layered navigation. And even if we do not consider that there is one more thing - the catalog page is usually stands for category page where alongside the current product there are other products presented as well. In this issue we've been testing product's behavior on the product page (not category), choosing (not filtering, though one may say in essence filtering and choosing are the same things) among available configurable variations. Unfortunately I didn't find anything on this setting in the official documentation but I found this on some other recourse: "...tick the Update Product Preview Image, so your Magento 2 visual swatches could be displayed on the category page. And it sustains my opinion on our setting to be designated for changing images when filtering through the layered navigation on a category page. And as to the product page it looks quite natural that the images here should be swapped by default when one clicks through different swatches. Just like in case with the attribute type drop-down where this setting is even unavailable at all.

So what do You think about that?

[ihor-sviziev]

It really looks confusing, it’s better to change the comment. Anyway it
looks separate issue and another actual & expected results.
Also need to check if this option affects any other places (according to
name it shouldn’t, but according to comment - it might.

On Fri, Sep 13, 2019 at 11:46 Alexander Potoky [e-mail]
wrote:

Hi, @ihor-sviziev https://github.com/ihor-sviziev. Thank You for Your
contributing to this issue. With the aforementioned setting set to Yes
everything works fine. Maybe we really ought to close this issue. But one
thing still bothers me - is it just an inaccuracy in the settings comment
or not: "Filtering by this attribute will update the product image on
catalog page". Usually filtering is associated with the layered navigation.
And even if we do not consider that there is one more thing - the catalog
page is usually stands for category page where alongside the current
product there are other products presented as well. In this issue we've
been testing product's behavior on the product page (not category),
choosing (not filtering, though one may say in essence filtering and
choosing are the same things) among available configurable variations.
Unfortunately I didn't find anything on this setting in the official
documentation but I found this on some other recourse: "...tick the
Update Product Preview Image, so your Magento 2 visual swatches could be
displayed on the category page
https://www.mag-manager.com/product-information/magento-product-management/add-magento-2-visual-swatches-with-store-manager-for-magento/.
And it sustains my opinion on our setting to be designated for changing
images when filtering through the layered navigation on a category page.
And as to the product page it looks quite natural that the images here
should be swapped by default when one clicks through different swatches.
Just like in case with the drop-down type attribute where this setting is
even unavailable at all.
[image: attrs]
https://user-images.githubusercontent.com/51680745/64849353-e53dbb80-d61b-11e9-9520-1f14bc4f7415.gif
So what do You think about it?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/magento/magento2/issues/24571?email_source=notifications&email_token=AAOJOUICOVGZJTN6CE2D2B3QJNHQDA5CNFSM4IWEJGFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6UML6Q#issuecomment-531154426,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAOJOUKAEZCQCMQUPWOVC6DQJNHQDANCNFSM4IWEJGFA
.

[engcom-Bravo]

@ihor-sviziev this issue is actual and correct. There's a simple logical prove to it. As I've already mentioned the Dropdown attribute, for example, doesn't even have "Update Product Preview Image" setting and it updates images by default. I even haven't tested what I'm going to talk about now because it's enough to just imagine it in order to understand that any further logic will fail with it. So lets assume a situation You have two attributes a dropdown one and a text swatch one. The last one has "Update Product Preview Image" set to "No". Now You have a configurable product created based on those two attributes with the separate images assigned to its variations. Go to the configurable product's page and try chose a concrete variation. Shall that variation's image appear or not? From one point of view it shall as there is a dropdown attribute involved, from the other point of view though it shan't as there is a text swatch attribute with "Update Product Preview Image" set to "No" involved. One logic excludes the other one while they are supposed to act simultaneously. Therefore no matter how it works in reality it works wrong (of course if there do not appear some warning messages on that problem when creating a configurable product. But I don't think there do any). So I'm reconfirming the issue. If You see my reasoning wrong I'm open for discussion.

[magento-engcom-team]

:white_check_mark: Confirmed by @engcom-Bravo
Thank you for verifying the issue. Based on the provided information internal tickets MC-20134 were created

Issue Available: @engcom-Bravo, _You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself._

[ihor-sviziev]

Sure, let’s improve it!
Just wanted to link following PR that introduced this issue https://github.com/magento/magento2/pull/19184

[engcom-Bravo]

Beautiful - here we have a prove that "Update Product Preview Image" originally didn't affect the Product page but the Category page as due to User Guide and the comment "Filtering by this attribute will update the product image on catalog page" was quite correct. So as I see everything had been working just as intended before #16446 appeared, was confirmed and then "fixed" by #19184. What do You think about it?

[ihor-sviziev]

Hi @akaplya,

I think we need your point of view as you're assigned to Swatches component.

Could you review this issue and add your opinion?

Is it ok that "Update Product Preview Image" now affects Product page once #19184 was merged or should we revert it? If we should revert it - maybe it's good idea to adjust option name or comment below it?

@engcom-Bravo I think before this feedback we can't say that this is "confirmed" issue and we can start working on it.

[engcom-Bravo]

You are doing extremely correct @ihor-sviziev) And that's good!

[rani-webkul]

@ihor-sviziev can we work on this issue?

[ihor-sviziev]

@ihor-sviziev can we work on this issue?

Hi @rani-webkul,
Currently it’s not clear what is expected result, @akaplya should define it

[rani-webkul]

@akaplya we need your point of view, please check this issue and confirm us what to do

[rani-webkul]

Hi @ihor-sviziev,
we are not getting any update from @akaplya, I think we should discuss it with other member.

[ihor-sviziev]

Hi @rani-webkul,
I'll try to push it forward.

I created issue in architecture repository, hope it will speed up response https://github.com/magento/architecture/issues/309

[engcom-Bravo]

Hi @ihor-sviziev. I've been seeing Your efforts to push the deal forward but time goes on and we're still there with wrong behavior persisting in Magento. With the considerably wrong behavior. So let me demonstrate it with the real example.
First, let me appeal to the bare formal logic once more as I already did it in the comment - the images for the configurable variations can not be updated and not updated at the same time if one of the attributes is set to update the image while the other - to not update it. And of course they are not - image is updated if You pick-up the updating attribute and is not when You pick-up the non-updating one. In half of the cases (the updating attribute is chosen first) it will produce a serious inadequacy.
So there's a configurable product "Background Colored Letter" with four variations based on Text Swatch and Dropdown attributes. Here the variations go:
A-Red - 101$;
A-Blue - 102$;
B-Red - 103$;
B-Blue - 104$.
Something like this:

Here we enter the configurable's Product Page with no attributes selected:

Now assume a customer choses "Red" from the dropdown menu and "B" from the swatch. Evidently we expect the customer will get B-Red's image with price 103$, i.e. this (watch attributes selected):

But instead he or she gets this (watch the same attributes selected):

Notice by the way the price is reflected correctly.
If at least from some point of view that can be deemed an expected behavior, (kindly ask You to excuse me if I letting my self here something more than is generally allowed), then further we can call any behavior an expected one, regardless of how it is consistent with elementary logic.
The current situation may lead to a customer has bought a product not the one that he or she were thinking he or she were buying. And that's definitely not good.
Of course image updating performance on Product Page could be arranged in other logically correct ways like, for example, it can be taken out from the attribute and put among the settings of Configurable Product. So the image is ether updated due to selected variation or is not updated at all remaining the Configurable's one. But it never can be updated and not updated simultaneously.
I will hope this post with a visual demonstration of the problem will foster the revert of the wrong commit. With that the issue remains in fact Confirmed but I accept the relative label is better not be on it as the contributors will strive to fix it with additional fix, while it definitely needs just a revert of the already existing one.

[ihor-sviziev]

Hi @engcom-Bravo,
Thank you for your input! With your example it’s becoming really clear that we have to do following:

1. Revert changes that were introduced in https://github.com/magento/magento2/pull/19184
2. Describe in https://github.com/magento/magento2/issues/16446 that that’s not an issue and related PR changes will be reverted
3. Update description for this option to reflect that it’s used only for category/search pages
4. We need to add MFTF test that will prevent appearing of this issue in future

Are you agree with me?

[engcom-Bravo]

@ihor-sviziev, I totally agree with You.

[engcom-Bravo]

Of course @ihor-sviziev we must understand that after #19184 had been merged there as well could be merged other commits that are dependent or rely on the behavior created by #19184. And there is some peril that those so to say bounded commits may throw then some new unexpected behavior. So if You could do some additional check in that relation before those fore steps are undertaken it would be great.

[pemann]

@magento give me 2.3-develop instance

[magento-engcom-team]

Hi @pemann. Thank you for your request. I'm working on Magento 2.3-develop instance for you

[magento-engcom-team]

Hi @pemann, here is your Magento instance.
Admin access: https://i-24571-2-3-develop.instances.magento-community.engineering/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[m2-assistant[bot]]

Hi @engcom-Delta. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• [ ] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
  Details

  If the issue has a valid description, the label Issue: Format is valid will be added to the issue automatically. Please, edit issue description if needed, until label Issue: Format is valid appears.

• [ ] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue. If the report is valid, add Issue: Clear Description label to the issue by yourself.

• [ ] 3. Add Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [ ] 4. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!

• [ ] 5. Add label Issue: Confirmed once verification is complete.

• [ ] 6. Make sure that automatic system confirms that report has been added to the backlog.

[magento-engcom-team]

:white_check_mark: Confirmed by @engcom-Delta
Thank you for verifying the issue. Based on the provided information internal tickets MC-20134 were created

Issue Available: @engcom-Delta, _You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself._

[ukguy]

We have a similar issue with attributes. All the images appear in the gallery but when selecting for eg, yellow option from a dropdown, it just selects a magento logo, not the yellow image.
When inspecting the filename of the yellow image it has _ underscores.
When selecting the filename of the magento logo the url is correct but it has %20 instead of underscores.

[ukguy]

Based on my previous comment it seems it's not selecting the image due to a bug with the underscores, so it doesn't select the image which is there. Maybe a javascript error?

[ihor-sviziev]

@ukguy it looks like different issue, please report it separately

[ukguy]

Ok 👍

[sandy6666]

@rani-webkul are you using any 3rd party plugin

[chinmayphutela]

@rani-webkul or @ihor-sviziev
Were you guys able to solve this configurable product - swatch image issue ?

I am facing the same issue and would love to understand how to rectify it. I am not a developer so would love if you could explain it in simple terms.

[ajithkumar-maragathavel]

@magento give me 2.3.4 instance

[magento-engcom-team]

Hi @ajithkumar-maragathavel. Thank you for your request. I'm working on Magento 2.3.4 instance for you

[magento-engcom-team]

Hi @ajithkumar-maragathavel, here is your Magento instance.
Admin access: https://i-24571-2-3-4.instances.magento-community.engineering/admin_4e69
Login: d85cf5c1 Password: 5dff328627f7
Instance will be terminated in up to 3 hours.

[sarbjeet-cmsDev]

I had same issue(on category page, on click swatch product thumbnail was not changing )
I found my custom theme etc/view.xml was missing

<image id="product_swatch_image_large" type="image">
                <width>320</width>
                <height>270</height>
            </image>
            <image id="product_swatch_image_medium" type="thumbnail">
                <width>320</width>
                <height>270</height>
            </image>
            <image id="product_swatch_image_small" type="small_image">
                <width>320</width>
                <height>270</height>
            </image>

[ihor-sviziev]

@sidolov @sivaschenko could you explain why this issue was closed without any comments?

[sivaschenko]

The issue cannot be reproduced. Attribute option "Update Product Preview Image" must be set to "Yes" if you want to change the image for a configurable product with text swatch options.