Error during updating product image on configurable

[TonyDeplanque]

When setting a configurable product's options via the URL, the gallery images do not update and show error in browser's console.

"Uncaught TypeError: Cannot read property 'updateData' of undefined"

Reproduce on my project and a natif magento2 with sample data.

Preconditions

1. Magento 2.2.1
2. PHP7

Steps to reproduce

1. use url : PRODUCT-URL.html#color=OPTION-ID in browser.

Expected result

1. Update image

Actual result

1. Don't update image
   With error :

VM696:45 Uncaught TypeError: Cannot read property 'updateData' of undefined
    at $.(anonymous function).(anonymous function).updateBaseImage (eval at require.load (http://demo.magento-elastic-suite.io/static/version1510829583/_cache/merged/e430daf4371303679f37a6e688796c3d.min.js:170:216), <anonymous>:45:60)
    at $.(anonymous function).(anonymous function).eval [as updateBaseImage] (eval at require.load (http://demo.magento-elastic-suite.io/static/version1510829583/_cache/merged/e430daf4371303679f37a6e688796c3d.min.js:170:216), <anonymous>:28:334)
    at $.(anonymous function).(anonymous function)._loadMedia (eval at require.load (http://demo.magento-elastic-suite.io/static/version1510829583/_cache/merged/e430daf4371303679f37a6e688796c3d.min.js:170:216), <anonymous>:25:6)
    at $.(anonymous function).(anonymous function).eval [as _loadMedia] (eval at require.load (http://demo.magento-elastic-suite.io/static/version1510829583/_cache/merged/e430daf4371303679f37a6e688796c3d.min.js:170:216), <anonymous>:28:334)
    at $.(anonymous function).(anonymous function)._OnClick (eval at require.load (http://demo.magento-elastic-suite.io/static/version1510829583/_cache/merged/e430daf4371303679f37a6e688796c3d.min.js:170:216), <anonymous>:29:9)
    at $.(anonymous function).(anonymous function).eval [as _OnClick] (eval at require.load (http://demo.magento-elastic-suite.io/static/version1510829583/_cache/merged/e430daf4371303679f37a6e688796c3d.min.js:170:216), <anonymous>:28:334)
    at HTMLDivElement.eval (eval at require.load (http://demo.magento-elastic-suite.io/static/version1510829583/_cache/merged/e430daf4371303679f37a6e688796c3d.min.js:170:216), <anonymous>:24:561)
    at HTMLDivElement.dispatch (eval at require.load (http://demo.magento-elastic-suite.io/static/version1510829583/_cache/merged/e430daf4371303679f37a6e688796c3d.min.js:170:216), <anonymous>:339:447)
    at HTMLDivElement.elemData.handle (eval at require.load (http://demo.magento-elastic-suite.io/static/version1510829583/_cache/merged/e430daf4371303679f37a6e688796c3d.min.js:170:216), <anonymous>:312:172)
    at Object.trigger (eval at require.load (http://demo.magento-elastic-suite.io/static/version1510829583/_cache/merged/e430daf4371303679f37a6e688796c3d.min.js:170:216), <anonymous>:333:211)

[magento-engcom-team]

@TonyDeplanque thank you for report.
Unfortunately, setting a configurable product's options via the URL is absent in functionality of Magento Community Editon.
Feature Requests and Improvements should now be submitted to the new Magento 2 Feature Requests and Improvements forum (see details here).

[czettnersandor]

This closing message is misleading. The feature is already there in Magento 2 Open Source.

It's just not updating gallery images. I feel it's a bug because of this. Every feature that's exist should work without an exception. Either remove the feature or implement it without throwing javascript exceptions.

[tigerx7]

I must agree with @czettnersandor, URL parameter functionality does exist in Magento CE:

magento2/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js

Line 1281 in 975b90b

_getSelectedAttributes: function () {

magento2/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js

Line 1241 in 975b90b

_EmulateSelected: function (selectedAttributes) {

This was actually an issue I came across way back in Magento 2.0: #3149 and was also raised in: #13891

The initial issue I created was prior to the new issue guidelines, but nonetheless it was closed as not able to reproduce; same reason for #13891. I can still reproduce this as of Magento 2.2.3.

[tig-daanvandenbergh]

@tigerx, I can still reproduce this issue in 2.2.5. removing .column.main from line 327 (resulting in gallery = $('[data-gallery-role=gallery-placeholder]', ''),) removes the error. However, the gallery of the selected product still isn't loaded.

[Dan0sz]

@tigerx, @TonyDeplanque, @czettnersandor, @magento-engcom-team

The fix to this is pretty simple actually:

Just update the updateBaseImage()-method with the following:

updateBaseImage: function (images, context, isInProductView, eventName) {
    var gallery = context.find(this.options.mediaGallerySelector).data('gallery');

    if (eventName === undefined && gallery !== undefined) {
        this.processUpdateBaseImage(images, context, isInProductView, gallery);
    } else {
        context.find(this.options.mediaGallerySelector).on('gallery:loaded', function (loadedGallery) {
            loadedGallery = context.find(this.options.mediaGallerySelector).data('gallery');
            this.processUpdateBaseImage(images, context, isInProductView, loadedGallery);
        }.bind(this));
    }
},

All you need to do is add a check if gallery is actually defined. If it isn't, it'll wait for the gallery to be loaded.

[leoquijano]

I created #18017 since this bug report is closed and I can't reopen it. I'm seeing this in 2.2.5 as well.

I think that the fix I propose there might be a better one, since it re-uses a custom event (emulateClick) that seems to be already created for this purpose. No need to add a custom check in updateBaseImage. Here's copy of that fix in case anyone needs it:

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));
   },