7

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

7

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.

3

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.

  • 1
    Great, was exactly I was looking for. Thanks :) – Narendra Vyas Dec 19 '18 at 7:12
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.

  • This is not working for me since there is no processUpdateBaseImage() defined in swatch-renderer.js – Mohit Rane Feb 5 at 12:28
  • @MohitRane might've been changed in recent Magento versions? When I have time I'll look into it. – Daan van den Bergh Feb 6 at 14:10
0

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.