42

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?

Improve this question
1
  • 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
    Commented Mar 12, 2015 at 16:50

3 Answers 3

Reset to default
115
+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.

Improve this answer
15
  • 1
    Thanks, Marius! Is it possible to do similar things inside extension?
    – Dmytro
    Commented Mar 13, 2015 at 10:23
  • 1
    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 ♦
    Commented Mar 13, 2015 at 10:53
  • 1
    Thanks again, Marius. I'm trying to implement customized checkout, which overrides default one, and I'm stuck with JS overrides.
    – Dmytro
    Commented Mar 13, 2015 at 11:42
  • 2
    @DmitryR. See my update to the answer.
    – Marius ♦
    Commented Mar 13, 2015 at 13:25
  • 1
    the place for requirejs-config.js is now Vendor/Module/view/frontend/requirejs-config.js
    – Eugen Bogdanovich
    Commented Sep 2, 2015 at 13:04
16

Here's the official doc about extending/replacing default JS components: https://developer.adobe.com/commerce/frontend-core/javascript/custom/

Feedback is welcome!

Improve this answer
2
  • 4
    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
    Commented Oct 2, 2015 at 18:16
  • 3
    That's a fair point but we add 301 redirects when topics move so the risk of 404s are minimized.
    – Steve Johnson
    Commented Oct 4, 2015 at 13:56
7

To use a custom implementation of an existing Magento or custom vendor JS component that's not defined in the requirejs-config.js copy the custom component source file to your theme JS files:

app/design/frontend/<your-vendor>/<your-theme>/<vendor_module>/web/js/<source_file>

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.