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:
...
- 1,849
50
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 ...
- 44.3k
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 ...
- 713
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 ...
- 1,834
32
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:...
- 2,622
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. <...
- 3,857
29
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 ...
- 44.3k
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 ...
- 2,176
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
...
23
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/...
- 12.2k
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/...
- 42.1k
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....
- 5,826
20
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 ...
- 15.6k
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)....
- 8,969
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 ...
- 745
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 ...
- 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 ...
- 31.9k
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-...
- 20.7k
15
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]});
...
- 15.6k
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....
- 3,384
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-...
- 15.8k
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 ...
- 14k
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 ...
- 6,302
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': {...
- 8,969
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....
- 850
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-...
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, ...
- 2,176
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.
- 20.7k
11
votes
jquery not defined error in magento 2
Try this
require([ 'jquery', 'jquery/ui'], function($){
$(document).ready(function($) {
console.log('running');
// your script
});});
- 1,813
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 ...
- 42.1k
Only top scored, non community-wiki answers of a minimum length are eligible