URL pre-selection of configurable product swatches with associated product images throws JavaScript error

[leoquijano]

Summary

When pre-selecting a configurable product swatch that has an image, Magento will try to load that image in the product gallery before it is initialized, throwing a JavaScript error.

This issue was already reported in #12517, but that bug is closed. I think that the fix I propose below is a better one, since it uses an event name that seems to be created for a similar purpose.

Preconditions

1. Magento v2.2.5.
2. PHP v7.1.20-1.
3. Ubuntu 16.04.1
4. Apache 2.4.18
5. MySQL 5.7.23

Steps to reproduce

1. Set up a default Magento instance, and create a configurable product with at least one option.
2. Configure that option to use swatches (text or visual).
3. Create at least one simple product associated to that option.
4. Upload image A as default for the configurable product.
5. Upload a different image B as default for the simple product.
6. Make sure that Magento automatically loads the simple product image for the PDP gallery when the option is selected.
7. Open the configurable product page, with the option pre-selected. For example: https://magento.app/sample-product.html#89=1245
8. The Swatch Renderer will pre-select that swatch. Since Magento is configured to load its image (image B) when the swatch is selected, this image will be loaded.
9. However, since we haven't loaded the gallery yet, the swatch renderer will throw an error when trying to load the image.

Expected result

1. The swatch is selected and its associated simple product image is loaded in the gallery.

Actual result

2. The swatch is not selected and the JavaScript console shows an error.

Investigation

The problem seems to be located in Module_Swatches::view/frontend/web/js/swatch-renderer.js. The following sequence of method calls is performed when pre-selecting a simple product:

1. [Line 304] - Call to this._renderControls() - from the _init method.
2. [Line 465] - Call to $widget._EmulateSelected($widget._getSelectedAttributes()).
3. [Line 1243] - The click event is triggered with the attribute code, via $.proxy.
4. [Line 619] - The click event is handled by _EventListener(), and the _OnClick() method is called.
   Note:
   • The _OnClick is called with two arguments: $(this), and $widget.
   • The emulateClick event is also available, and will call _OnClick with a third parameter, the event name (emulateClick).
5. [Line 725] - The _loadMedia method is called by OnClick, to load the simple product image. Since the click event was used, and not emulateClick, the event name will be undefined.
6. [Line 674] - The updateBaseImage method is called, with an undefined eventName argument.
7. [Line 1156] - The processUpdateBaseImage is called, using an undefined gallery object. Note that if the event name is undefined (as in this case), the updateBaseImage method won't wait until the gallery image is loaded to process the image.
8. [Line 1187] - The processUpdateBaseImage method will try to call gallery.updateData with the updated images, triggering the JavaScript error.

• This error not only means that the image won't be loaded, but also that the swatch option won't be pre-selected, as expected.
• It seems that the emulateClick event was created to avoid this issue (see commit 97390b3), but it's not being used for this use case.

Probable fix:

• In the _EmulateSelected method described above (line 1243), use the emulateClick event instead of click:

  _EmulateSelected: function (selectedAttributes) {
    $.each(selectedAttributes, $.proxy(function (attributeCode, optionId) {
      this.element.find('.' + this.options.classes.attributeClass +
        '[attribute-code="' + attributeCode + '"] [option-id="' + optionId + '"]').trigger('emulateClick');
      }, this));
  },

[magento-engcom-team]

Hi @leoquijano. 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-engcom-team give me {$VERSION} instance

where {$VERSION} is version tags (starting from 2.2.0+) or develop branches (2.2-develop +).
For more details, please, review the Magento Contributor Assistant documentation.

@leoquijano do you confirm that you was able to reproduce the issue on vanilla Magento instance following steps to reproduce?

• yes
• no

[leoquijano]

Hi @magento-engcom-team

Yes, I was able to reproduce it on vanilla Magento instance. See screenshots below:

1. Configurable product loaded with no options selected (default).

   

2. Configurable product with the "Gray" option selected using the usual method (clicking on the option). That option has a grayscale version of the original image:

   

3. Configurable product with the "Gray" option pre-selected using the URL. An error shows up:

   

4. After applying the fix I mention above, the same configurable product with the "Gray" option pre-selected. The image is loaded and no console errors show up:

   

I'm using production mode in a local instance. If your environment moves too fast to reproduce the issue, switching to developer mode might help. Also, remember you need to reload the product page after adding the # option, to force the browser to request the page contents again.

Also note that if you add a second pre-selected option, the JavaScript error thrown by the first one will prevent the second one from being selected. That example is not presented here but it's easily be reproduced by adding a second swatch option and pre-selecting both options (the first one and the new one).

[ghost]

Hi @leoquijano , thank you for your report.
We've acknowledged the issue and added to our backlog.

[leoquijano]

Thanks @engcom-backlog-nazar.

I'm wondering, why is the issue marked as a feature request? It's actually a bug.

[ghost]

@leoquijano Actually magento not have functional to change swates from links, in any version if you click on swatches url not changes, so i think it's a feature. however.
Unfortunately, setting a configurable product's options via the URL is absent in functionality of Magento CE

[ghost]

@leoquijano Ok. seems like this is bug, the console must not have error

[leoquijano]

@engcom-backlog-nazar, it seems they had the same discussion in #12517, about whether it was a feature or not.

However, if you go back in time to #2746, it seems this functionality was present in M1 and that it has been present in M2 for some years now. An issue was fixed there so I guess it's already part of the feature set.

If it's unofficial, then it might be a good idea to make it official, since this is a very useful feature. You can connect other parts of the website with the product view page and have the options already pre-selected.

Hopefully the fix I suggest above will help.

[dani97]

emulateClick worked perfect for me @leoquijano thanks

[magento-engcom-team]

Hi @niravkrish. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if your 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-engcom-team 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. Verify that the issue is reproducible on 2.2-develop branch.

  Details

  - Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

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

[magento-engcom-team]

Hi @leoquijano. Thank you for your report.
The issue has been fixed in #19635 by @niravkrish in 2.3-develop branch
Related commit(s):

• b92bbc41c6f76e50b02922067d3df208501a56f6
• 95d5f44f6654a3db1ad6eb2b0b17b007f67bc3de
• 30c3eac83641969f6a38fdf1f52eac903520ea52
• ee64ecdf5e03deae2aa8734892cd51aff398543c
• 7feaeddc33995e2a0abe121e24854e02d7bb83f7
• bbceaab96e7f9440528944a41d141e78ee6c3b26
• 06113942bfd95b25efd94c2f3626526549aade1a
• 41c2d9031193c403bf93c65c82570dcfdb339979
• ec5c01f3ecf62d5276b41e7eec9e39290df935ed

The fix will be available with the upcoming 2.3.2 release.

[leoquijano]

Hi @magento-engcom-team and @niravkrish, will this be available in an upcoming 2.2.x release as well?

I see PR #19627, but I don't see an upcoming 2.2.x release announced.