5

I have overridden magento SwatchRenderer.js file in app\code\Mydirectory\CustomSwatches\view\frontend\web\js\SwatchRenderer.js.

My problem is I get an error in my product page load:

Uncaught TypeError: Cannot read property 'updateData' of undefined

I found out that data('gallery') on SwatchRenderer.js's following function is undefined.

updateBaseImage: function (images, context, isProductViewExist) {
        var justAnImage = images[0];

        if (isProductViewExist) {
            context
                .find('[data-gallery-role=gallery-placeholder]')
                .data('gallery')
                .updateData(images);
        } else if (justAnImage && justAnImage.img) {
            context.find('.product-image-photo').attr('src', justAnImage.img);
        }
    }

I checked a Magento 2 demo site. On that site the above data attribute is set as a JavaScript object. The target element is a div with the above attribute. But in my site it is undefined and obviously I think that data attribute is not set on my site. Can anyone help me to find the setter function/view/file for above element? Any help would be appreciated. Thanks.

  • How you overwrite this SwatchRenderer.js. Show your overwrite script and all code SwatchRenderer.js – Sohel Rana Jul 28 '16 at 7:44
  • Which is exactly your Magento version? – Khoa TruongDinh Jul 29 '16 at 12:57
  • @Khoa My magento version is 2.0.4 updated from 2.0.2. This issue is in both versions. – Janaka Dombawela Aug 2 '16 at 10:53
  • You can upload your full code on github or here. – Khoa TruongDinh Aug 2 '16 at 14:16
  • Hi @JanakaDombawela are you have this on Product Page or Category Listings - are you trying to use Product image switching from colours? If so, please post full code and what your trying to do. The reason I am asking is I had the same issue but I coded around this to fix it and made an AJAX swatcher – TheBlackBenzKid Aug 3 '16 at 11:27
1

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.

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.