31

As Magento2 is using RequireJS for loading scripts, and there's no more skin folder, I've stuck with a problem:

How can I replace Magento's module JS file by my modified version?

For example — the opc-checkout-method.js which belongs to Magento_Checkout extension. It's not defined in the requirejs-config.js file, as far as I can see.

My extension is loaded after Magento_Checkout, so its requirejs-config.js data is appended at the end of resulting requirejs-config file.

Or should I do it in some other way, without replacing the whole script?

  • 1
    I would imagine you shouldn't be replacing the file so much as replacing the function(s) on the object loaded by the file. – Peter O'Callaghan Mar 12 '15 at 16:50
78
+100

There is no more skin folder but you can still use themes.

As a proof of concept I used you example with op-checkout-method.js and this this.

Preconditions:

  • Magento2-beta11 installed
  • Default theme active (blank).
  • No files generated in the pub/static folder (remove the pub/static/frontend folder)

Actions:

  • Copied the op-checkout-method.js file from it's module location app/code/Magento/Checkout/view/frontend/web/js/opc-checkout-method.js to the blank theme to app/design/frontend/Magento/blank/Magento_Checkout/web/js/opc-checkout-method.js
  • edited the clone file and added a console.log('something') or alert('something') in the _create function of the mage.opcCheckoutMethod widget.
  • cleared browser cache.

Result:

  • When the checkout page loads I see my alert displayed or the text logged in the console.

Related Info:

If I run from cli php dev/tools/Magento/Tools/View/deploy.php (the script that publishes the static resources) my new js file gets placed in pub/static/frontend/Magento/blank/en_US/Magento_Checkout/js/opc-checkout-method.js

[EDIT]

I found a way to do it via a module.

In [Namespace]/[Module]/view/frontend/requirejs-config.js add this:

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/opc-checkout-method':'[Namespace]_[Module]/js/opc-checkout-method'
        }
    }
};

Then create the file [Namespace]/[Module]/view/frontend/web/js/opc-checkout-method.js with your content.

For testing purposes I cloned the original file and just added again a console.log in the _create function.

Also remember to regenerate the public resources for frontend.

  • Thanks, Marius! Is it possible to do similar things inside extension? – DmitryR Mar 13 '15 at 10:23
  • I don't think you van do that from an extension. that was not possible in magento 1 unless you changed the checkout template completely. But I will look for a way to do it. – Marius Mar 13 '15 at 10:53
  • Thanks again, Marius. I'm trying to implement customized checkout, which overrides default one, and I'm stuck with JS overrides. – DmitryR Mar 13 '15 at 11:42
  • 1
    @DmitryR. See my update to the answer. – Marius Mar 13 '15 at 13:25
  • the place for requirejs-config.js is now Vendor/Module/view/frontend/requirejs-config.js – Eugen Bogdanovich Sep 2 '15 at 13:04
11

Here's the official doc about extending/replacing default JS components: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html

Feedback is welcome!

  • 3
    Welcome to MagentoSE. This answer would be more useful to future users if you added the answer here, instead of just the link. If the link breaks in the future, searchers won't find the information you are referencing. – AreDubya Oct 2 '15 at 18:16
  • 2
    That's a fair point but we add 301 redirects when topics move so the risk of 404s are minimized. – Steve Johnson Oct 4 '15 at 13:56

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.