Skip to main content
86 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: ...
Andrea's user avatar
  • 1,849
51 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 ...
Alana Storm's user avatar
  • 44.4k
36 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 ...
Max's user avatar
  • 1,854
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:...
Bartłomiej Szubert's user avatar
27 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 ...
bassplayer7's user avatar
  • 2,216
26 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 ...
Rafael Corrêa Gomes's user avatar
24 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/...
Giel Berkers's user avatar
  • 12.3k
21 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 ...
Ben Crook's user avatar
  • 15.7k
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....
Nagaraju Kasa's user avatar
19 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)....
Aaron Allen's user avatar
  • 9,009
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 ...
Denis Rul's user avatar
  • 196
17 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 ...
Khoa TruongDinh's user avatar
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....
Daniel Ifrim's user avatar
  • 3,404
15 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-...
Suresh Chikani's user avatar
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 ...
Vinai's user avatar
  • 14k
14 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': {...
Aaron Allen's user avatar
  • 9,009
14 votes

TypeError: target.extend is not a function

You should use a wrapper for extending this plugin. Documentation: https://developer.adobe.com/commerce/frontend-core/javascript/mixins#extend-js-object Related question: https://magento.stackexchange....
Quisse's user avatar
  • 860
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, ...
bassplayer7's user avatar
  • 2,216
11 votes

jquery not defined error in magento 2

Try this require([ 'jquery', 'jquery/ui'], function($){ $(document).ready(function($) { console.log('running'); // your script });});
Saphal Jha's user avatar
  • 1,883
11 votes
Accepted

How to add a jQuery plugin in theme?

copy js file jquery.touchSwipe.min.js into your custom theme web/js folder. app/design/frontend/Vendor/themename/web/js/jquery.touchSwipe.min.js Now you have to use inside your template file, just ...
Rakesh Jesadiya's user avatar
11 votes

Uncaught ReferenceError: config is not defined magento 2

You probably have a requirejs-config.js file somewhere in your codebase that is empty. Magento includes every requirejs-config.js file it finds, but it does expect it to contain a config object. In ...
Peter Jaap Blaakmeer's user avatar
11 votes
Accepted

$(...).swMegamenu is not a function

Uncaught TypeError: $(...).swMegamenu is not a function Uncaught TypeError: $(...).stellar is not a function Uncaught TypeError: $(...).owlCarousel is not a function Uncaught TypeError: $.widget is ...
Kishan Patadia's user avatar
10 votes
Accepted

Changing "Add to cart" button text in Magento 2.1.0 ( Overriding js file )

You have to override js file from path vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js To app/design/frontend/YourTheme/Packadge/Magento_Catalog/web/js/catalog-add-to-...
Suresh Chikani's user avatar
10 votes
Accepted

How to call multiple Knockout templates within one component

Yes, you should be able to use as many template bindings as you want. You could do this with a string identifier for the template URN <!-- ko template: "Package_Namespace/template-name" --><...
Alana Storm's user avatar
  • 44.4k
10 votes
Accepted

Magento 2 / Require JS is trying to load a file from a TweenLite CDN script

The underlying problem here are dependencies. Since you load the CSS Plugin prior before TweenLite, the CSS Plugin will try to load TweenLite for you. It does this by detecting if RequireJS is ...
Giel Berkers's user avatar
  • 12.3k
10 votes
Accepted

Magento 2 custom module override knockout template

Yes you can override a knockout template in a custom module, just did it, in your module create a requirejs-config.js file and place it in your module: app/code/Namespace/Module/view/frontend/...
SantiBM's user avatar
  • 1,370
10 votes

window.on 'load', function not useable with require JS loaded file

Your window is already loaded so that event is not triggered again. If you want to be sure that your require JS code gets executed when the DOM is ready, use domReady!: define([ 'jquery', '...
Giel Berkers's user avatar
  • 12.3k
9 votes
Accepted

My js file is not loaded in Magento 2

The Way you are including custom js in requirejs-config-js is correct , but you must need to load this js in your template(.phtml) file. Add below code in your .phtml template file : <script ...
Manthan Dave's user avatar
  • 9,866
9 votes
Accepted

What are the "source" Items in UI Component Files

Went to "the source" (groan) for this one and it looks like these <item name="source"/> nodes are, indeed, redundant. Or, the Magento engineer currently in charge of them thinks they're ...
Alana Storm's user avatar
  • 44.4k
9 votes
Accepted

How to add js libraries that require Jquery to magento 2 using requireJs

I can think of two solutions that should help resolve the issue: domReady! Require JS ships with a dom ready plugin, this will ensure your carousel is only loaded when the dom has loaded. To do this ...
Ben Crook's user avatar
  • 15.7k

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