Magento 2 error in swatchRenderer.js

Question

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.

Answer 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.