Magento – Magento 2 error in swatchRenderer.js at ‘updateData’ property

color-swatchesmagento2

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

Best Answer

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: enter image description here

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.

Related Topic