Magento2 – Override JS File via requirejs-config.js

javascriptmagento2overridesrequirejs

I'm trying to override the file vendor/magento/module-catalog/view/base/web/js/price-box.js in my theme using requirejs-config.js unsuccessfully.

Location of my requirejs-config.js:

app/design/frontend/Mytheme/mytheme/requirejs-config.js

Contents of my requirejs-config.js file:

var config = {
map: {
     '*': {
            priceBox:'js/price-box',
     }
}
};

I placed my new file price-box.js in here:

app/design/frontend/Mytheme/mytheme/web/js/price-box.js

I also tried placing it under:

app/design/frontend/Mytheme/mytheme/Magento_Catalog/web/js/price-box.js

but none of those worked.

In the frontend the file that gets loaded is:

pub/static/frontend/Mytheme/mytheme/en_US/Magento_Catalog/js/price-box.js

Which is the default vendor file, and not mine? My file is here:

pub/static/frontend/Mytheme/mytheme/en_US/js/price-box.js

We are working in Developer mode and Cached Disabled.

I tried a few commands to see if that would actually help:

php bin/magento setup:static-content:deploy
php bin/magento cache:clean
php bin/magento setup:upgrade
php bin/magento setup:di:compile

Any suggestions?

Related questions:

  1. Magento2: How can I override core js module price-box.js
  2. How to extend js class/method of checkout model class in magento 2
  3. Magento 2 does not read my requirejs-config.js

Official documentation:

Update 1

Following suggestions of a StackExchange user I just did:

  1. Move requirejs-config.js inside the web/ folder of my theme.
  2. Manually remove everything under /pub/static/ except the .htaccess file
  3. Execute this command: php bin/magento dev:source-theme:deploy

It didn't do any effects, the loaded file keeps being:

pub/static/frontend/Mytheme/mytheme/en_US/Magento_Catalog/js/price-box.js

Update 2 – Solution

As suggested by David Verholen I did the following steps:

  1. Remove the map from the requirejs-config.js file in the root folder of my theme.
  2. Place my new files price-box.js in:

    app/design/frontend/Mytheme/mytheme/Magento_Catalog/web/js/price-box.js

  3. Manually remove all the contents from /pub/static/ by doing:

    rm -rf pub/static/*

Best Answer

placing the file under app/design/frontend/Mytheme/mytheme/Magento_Catalog/web/js/price-box.js should be sufficient (without any require config) to overload the file in your theme.

As already said, try clearing the pub/static/ folder content (except the .htaccess). On unix systems you can do this with the command rm -rf pub/static/* from the root directory since * does not include any files starting with a .

If this does not work, I assume there is a problem, since the original File is located in the base area while your theme is in the frontend area. Logically (if this is not working), since base should be inherited by all areas, this might be a bug in the overloading mechanism.

Related Topic