Magento 2 error in swatchRenderer.js at 'updateData' property

Question

I have this error in category page. When i change color from swatch option it star loading in product image container and shows error in SwatchRenderer.js

here is the error:

Uncaught TypeError: Cannot read property 'updateData' of undefined
at $.(anonymous function).(anonymous function).processUpdateBaseImage (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/Magento_Swatches/js/swatch-renderer.js:1168:25)
at $.(anonymous function).(anonymous function).processUpdateBaseImage (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/jquery/jquery-ui.js:402:25)
at $.(anonymous function).(anonymous function).updateBaseImage (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/Magento_Swatches/js/swatch-renderer.js:1137:22)
at $.(anonymous function).(anonymous function).updateBaseImage (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/jquery/jquery-ui.js:402:25)
at $.(anonymous function).(anonymous function)._ProductMediaCallback (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/Magento_Swatches/js/swatch-renderer.js:1103:18)
at $.(anonymous function).(anonymous function)._ProductMediaCallback (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/jquery/jquery-ui.js:402:25)
at Object.mediaSuccessCallback [as success] (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/Magento_Swatches/js/swatch-renderer.js:981:29)
at i (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:27449)
at Object.fireWith [as resolveWith] (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:28213)
at y (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:4:22721)

i am using custom jquery.min file and created one custom slider with sly.js hope it will help you to understand my issue well.

TIA

Answer 1

As I can't replicate this issue it's hard for me to say what the issue is exactly but following the code from the error it seems to be when $('[data-gallery-role=gallery-placeholder]').data('gallery') is undefined. The cause of this is likely to be a class or data attribute being removed/changed.

To confirm this is the case when you replicate the problem paste this into your console:

console.log(jQuery('[data-gallery-role=gallery-placeholder]').data('gallery'));

This is how the console log looks for me:

If undefined is returned then this is your problem.

Debugging

To resolve this the first thing I'd do is check the following elements/selectors exist in the DOM. If they do not exist try finding where they are in the core and adding them back.

• [data-gallery-role=gallery-placeholder]
• .column.main
• .product-item-info

I say this as following the code back from this error leads me to the following:

1. gallery.updateData(imagesToUpdate);
2. mediaGallerySelector: '[data-gallery-role=gallery-placeholder]'
3. this.updateBaseImage(images, $main, isProductViewExist);
4. $main = isProductViewExist ? $this.parents('.column.main') : $this.parents('.product-item-info')

Another option could be that data('gallery') isn't being set, if that's the case the issue could be anything.

Notes

It will help if you could include the version of Magento you are working on, and any customisations you have done around swatches and/or the gallery DOM and/or JS.

A quick way to debug this could be to revert all the changes you've made to swatches/gallery and see if it works, if it does add the files back one by one until you find the one that caused the problem. Then run a diff on that file and go from there.

Answer 2

We had this same issue until we realized we were hiding the price of products on our category listing page. Apparently, swatch-renderer.js relies on classes on the price box to determine if it is on the product view or product listing page. After re-enabling the price box, color swatch switching started working again.

Answer 3

I found a pretty efficient way to fix this:

Copy the /vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js-file to app/design/YourName/YourTheme/Magento_Swatches/web/js/swatch-renderer.js and replace the updateBaseImage() (line ~1152) 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));
    }
},

You can also override the file using a module, but I found this to be the easiest way. There's plenty of information readily available to override a JS-component using a module.

It's weird that they define gallery and just assume it'll be defined afterwards. Adding a check for this fixes everything.

It works perfect! I just hope that the Magento Dev's pick up on this and implement this in the core-code.

Answer 4

Same problem here. What happened is that i have created a container for product.media outside of .column.main. Then the swatch-renderer.js was looking for that parent of product.media (.column.main), the solution was just changing the swatch-renderer.js lines that references to .column.main to my new container, product-container.

Hope it helps.

Answer 5

I was getting this error when I select edit on view cart's page. On updateBaseImage after this line:

imagesToUpdate = this._setImageIndex(imagesToUpdate);

Replace:

this._updateGallery(gallery, imagesToUpdate, isInitial);

With:

 if (gallery) {
    this._updateGallery(gallery, imagesToUpdate, isInitial);
 } else {
    context.find(this.options.mediaGallerySelector).on('gallery:loaded', function (loadedGallery) {
    gallery = context.find(this.options.mediaGallerySelector).data('gallery');
        this._updateGallery(gallery, imagesToUpdate, isInitial);
    }.bind(this));
}


// Add this method. To avoid code duplication
_updateGallery: function (gallery, imagesToUpdate, isInitial) {
    gallery.updateData(imagesToUpdate);

    if (isInitial) {
        $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
    } else {
        $(this.options.mediaGallerySelector).AddFotoramaVideoEvents({
            selectedOption: this.getProduct(),
            dataMergeStrategy: this.options.gallerySwitchStrategy
        });
    }

    gallery.first();
},

The error happens because the swatcher expects the fotorama to be loaded. The else condition handles the first load, and the if handle the swatcher color change to update the carousel, since gallery is not undefined anymore.

This happens on catalog' views and product page

Answer 6

I am Facing this issue than and resolve it in magento2.3.0.

First Check "column main" class Product view page source code if not found than remove your layout this location

app/design/frontend/YourName/YourTheme/Magento_Theme/page_layout 

than this is working.