4

I was trying to replace magento 2 core javascript file for Swatches render which is located at app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js . And I followed official guide for this - http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html , but it did not work.

I have uploaded my module on GIT. Can someone check and tell me what is the issue ? Here is the GIT Link for the module created - https://github.com/chamalC/magento-2-replace-javascript/tree/master/app/code/Muaw/CustomSwatches

9

Try below code in your requirejs-config.js

 var config = {
     map: {
    '*': {
        swatchRenderer: 'Muaw_CustomSwatches/js/SwatchRenderer'
    }
}};
  • @Shaheer How would you do that in Magneto 2.1? File SwatchRenderer.js was renamed to swatch-renderer.js. But more important is that they removed vendor/magento/module-swatches/view/frontend/requirejs-config.js from the module. So swatch-renderer.js is not referenced there anymore. – zitix Aug 26 '16 at 15:39
  • @zitix did u get the soln ? – Lead Developer Oct 25 '16 at 13:33
  • 2
    works in <= M2.0 but not 2.1, see below answer for 2.1 – OZZIE Feb 11 '17 at 16:22
8

The code works for me on Magento 2.1.5

var config = {
    map: {
        '*': {
           'Magento_Swatches/js/swatch-renderer':'Vendor_Module/js/swatch-renderer'     
        }
    }
};
3

There is an Easy way out for that when you do that changes while creating a custom Theme,

Firstly override the template File in which the Js is being called i.e module-swatches/view/frontend/templates/product/view/renderer.phtml and change the line

"Magento_Swatches/js/swatch-renderer" 

to

"Magento_Swatches/js/swatch-renderer-custom"

Secondly create a js file in web/js Directory named swatch-renderer-custom.js Then if you apply any code in that js file then your code will be called....

  • only thing that works in 2.1.. but it should be noted that the swatch-renderer-custom can then extend Magento_Swatches/js/swatch-renderer by adding that in the define + adding fotorama there – OZZIE Feb 11 '17 at 16:21
1

Try below based on docs of magento 2 inside requirejs-config.js file, You have to do below,

var config = {
    map: {
        '*': {
            swatchRenderer:'Magento_Swatches/js/SwatchRenderer'
        }
    }
};
1
Using Mixins:
var config = {
    config: {
        mixins: {
            'Magento_Swatches/js/swatch-renderer': {
                'Ayasoftware_EnhancedConfigurable/js/swatches': true
            }
        }
    },
    }
};

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.