115 votes
Accepted

Extending / Overriding JS in Magento 2

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 ...
user avatar
  • 196k
85 votes

How To add JS file in frontend for all pages

To load a custom main.js file on all pages (in the RequireJS-way) this is a good way: 1) Create main.js Create main.js within the theme folder <theme_dir>/web/js/main.js with this content: ...
user avatar
  • 1,839
47 votes
Accepted

How Does Magento 2 Apply KnockoutJS Bindings

The Magento_Ui/js/lib/ko/initialize library is, indeed, where Magento initializes its Knockout instance. Magento does not assign a ViewModel when it applies bindings. The missing key here is the ...
user avatar
  • 43.8k
39 votes
Accepted

Magento2 not reading my requirejs-config.js

I found the problem. Under pub/static/_requirejs/frontend/Namespace/Theme/en_US, delete the file requirejs-config.js. Refresh your page and it will be generated again with new content. If it ...
user avatar
  • 703
33 votes
Accepted

Magento2 - How to extend jQuery widget (configurable.js)

Firstly, you need to make sure, that your module has Magento_ConfigurableProduct in sequence in module.xml: <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:...
user avatar
32 votes
Accepted

How to add a custom javascript to theme in Magento 2?

jQuery is already pre-packaged with Magento2, there is no need to implement it on your own, however, you have to utilize it. To add JS to your theme you have several possibilities. By utilizing ...
user avatar
  • 1,784
29 votes
Accepted

How to load custom module js file in magento 2?

Finally, I got the solution for my query. I would like to share it in details as below. Step 1: Add your module js file under <Vendor>/<Module_Name>/view/<area>/web/js/ e.g. <...
user avatar
28 votes
Accepted

Why does Magento 2 use RequireJS `map` instead of `path`

After researching this a bit more, I have found one major difference between map and path. I'm not sure if the Magento core team makes deliberate use of this, but per this Stack Overflow answer when ...
user avatar
  • 43.8k
26 votes
Accepted

What Are the Import/Exports `defaults` for in a uiElement Object?

These properties allow components to be connected so they can interact with each other. The principle is somewhat simple: import (take) a value from another component or export (send) a value to a ...
user avatar
  • 2,078
24 votes
Accepted

How to use RequiredJS to execute the JS after the DOM ready?

You can use this feature of the RequiredJS 'domReady!' like the native Magento's modules use: PHTML <script> require(['jquery','domReady!'], function ($) { // Your Code ...
user avatar
22 votes

Magento 2 add custom validation rule

One thing you could try is to add a JavaScript mixin: In requirejs-config.js do: var config = { config: { mixins: { 'mage/validation': { 'Vendor_Module/js/...
user avatar
  • 11.7k
21 votes
Accepted

Requirejs shim option not working

You have to set requirejs-config.js like below, More details, Refer link, How to Resolve RequireJs error in Magento 2 var config = { paths: { 'flexslider': 'Vendor_Modulejs/...
user avatar
21 votes
Accepted

Magento 2 Advanced Js Bundling

I did R & D on this task and prepared some implementation notes it might help you others if you would like to do, please follow the below steps on Advanced JS Bundling. A) Required Tools node....
user avatar
18 votes

Magento 2: requirejs-config.js in themes?

OK, I think I may have solved it and I believe that the documentation is ambiguous and needs updating to clarify the process. I moved my requirejs-config.jsfrom within the web/js and web directories ...
user avatar
18 votes
Accepted

Magento 2 Knockout JS - What does this._super() do?

Searching the dev docs for this returns the uiClass library page which mentions the following: The _super() method calls the parent UI component method with the same name as the _super() method’s ...
user avatar
  • 15.3k
18 votes
Accepted

How Are the Things Magento 2 calls "mixins" Implemented?

I'd like to go straight to your questions and then I'll try to make it clear on what you can actually do with the mixins plugin. So, first things first. Implementation The main thing here is the ...
user avatar
  • 196
18 votes

Use require-config.js to load files needed on all pages

requirejs-config.js uses for creating the JavaScript resources mapping. We can find all require configs under: pub/static/_requirejs. As far as I know, the correct way to load our custom script via ...
user avatar
18 votes
Accepted

Magento 2 : How to Detect Checkout Step Change

You can register a handle for when the hash code changes, i.e. $(window).hashchange(callBack). This is what happens in Magento_Checkout/view/frontend/web/js/view/progress-bar.js: $(window)....
user avatar
  • 8,819
16 votes
Accepted

How to extend js class/method of checkout model class in magento 2

You need create requirejs-config.js in you module with var config = { config: { mixins: { 'Magento_Checkout/js/model/step-navigator': { 'You_Module/js/step-...
user avatar
  • 20.3k
15 votes

Extending / Overriding JS in Magento 2

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!
user avatar
  • 479
15 votes

JS errors Magento 2

Replace in customer module in the file authentication-popup.js: autocomplete: window.checkout.autocomplete with: autocomplete: ((window.checkout && window.checkout.autocomplete) ? window....
user avatar
  • 3,252
15 votes
Accepted

How to share Knockout JS observables between UI Components

The values of the exports object have to resolve to a name and a property of a UiComponent instance, separated by a ':', for example checkout.cart.total:title. The export target name has to include ...
user avatar
  • 14.4k
14 votes
Accepted

Magento 2: requirejs-config.js in themes?

you can actually include a require-config.js in your themes Module dirs. The problem is (actually for our frontend team) that there seems to be no possibility, to override the config, but to extend ...
user avatar
14 votes

Magento 2: How to defaultly open "content 2" tab?

Magento 2 docs - Accordion Set active to the tab you'd like to be open by default instead of true. For example: $("#element").accordion({ active: "0 1"}); $("#element").accordion({ active: [0,1]}); ...
user avatar
  • 15.3k
14 votes
Accepted

Override html template file in Magento 2 not working

Just copy file from vendor/magento/module-checkout/view/frontend/web/template/billing-address/details.html And put it to app/design/frontend/Vendor/YourTheme/Magento_Checkout/web/template/billing-...
user avatar
13 votes
Accepted

Magento2: How can I override core js module price-box.js

Specify PriceBox js file in your custom module's requirejs-config.js with the same name by which its already declared in core modules. in our case it is priceBox like below. Your modules requirejs-...
user avatar
13 votes
Accepted

Sigil Strings in Magento 2's RequireJS Files

They are template literals that Magento handles itself to enhance browser compatibility. In ES2015, template literals can be done with back-ticks (``). However, since not all browsers support that, ...
user avatar
  • 2,078
13 votes
Accepted

JS Widget: two custom Widgets extended same parent Widget Magento 2

Magento 2 has a lesser known feature called a require-js mixin that's useful for extending a js module from multiple places. Your requirejs-config.js should look like: var config = { 'config': {...
user avatar
  • 8,819
11 votes

Magento2 not reading my requirejs-config.js

The problem is that you did not enable developer mode. As a result, the files cache is in the pub/static folder.
user avatar
  • 20.3k
11 votes

jquery not defined error in magento 2

Try this require([ 'jquery', 'jquery/ui'], function($){ $(document).ready(function($) { console.log('running'); // your script });});
user avatar
  • 1,705

Only top scored, non community-wiki answers of a minimum length are eligible