0

I have added color swatches for my Configurable products. On product detail page when we click on color swatches the product images gets changed properly. But this does not work fine on category pages. When i click on color swatch, the images does not load. https://prnt.sc/10gzh73

And it is showing following error on console.

Uncaught TypeError: $(...).AddFotoramaVideoEvents is not a function
    at $.<computed>.<computed>.updateBaseImage (swatch-renderer.js:1254)
    at $.<computed>.<computed>.updateBaseImage (widget.js:100)
    at $.<computed>.<computed>._ProductMediaCallback (swatch-renderer.js:1173)
    at $.<computed>.<computed>._ProductMediaCallback (widget.js:100)
    at Object.mediaSuccessCallback [as success] (swatch-renderer.js:1074)
    at fire (jquery.js:3238)
    at Object.fireWith [as resolveWith] (jquery.js:3368)
    at done (jquery.js:9846)
    at XMLHttpRequest.callback (jquery.js:10317)
0

First, check Magento_ProductVideo enable or not? If not enabled then try enabling it. After this, if this issue is not solved then here is a temporary fix for this. You need to override the swatch-renderer.js file.
Path: Magento_Swatches/view/base/web/js/swatch-renderer.js
Override the above file at your theme path and make the below change in code.

Replace this code

if (isInitial) {
   $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
}

With this one

if (isInitial) {
    if ($.isFunction($(this.options.mediaGallerySelector).AddFotoramaVideoEvents)) {
        $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
    } 
}
3
  • I tried this, but now got different error. Uncaught TypeError: Cannot read property 'first' of undefined at $.<computed>.<computed>.updateBaseImage (swatch-renderer.js:1263) at $.<computed>.<computed>.updateBaseImage (widget.js:100) at $.<computed>.<computed>._ProductMediaCallback (swatch-renderer.js:1173) at $.<computed>.<computed>._ProductMediaCallback (widget.js:100) at Object.mediaSuccessCallback [as success] (swatch-renderer.js:1074) at fire (jquery.js:3238) at Object.fireWith [as resolveWith] (jquery.js:3368) at done (jquery.js:9846)
    – Nafsss
    Mar 10 at 10:16
  • "if (gallery) {gallery.first();}" check this code in swatch-renderer.js file at 1263 line. Try to console "gallery" before "first()" and wrap with is not undefined confined. Like: "if (typeof(gallery.first()) != "undefined")"
    – Amit Saini
    Mar 10 at 10:32
  • By doing this thr is no error. But the image does not change when the color is selected. It loads first image only.
    – Nafsss
    Mar 11 at 8:41

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.