Questions tagged [requirejs]

Denotes questions related to require JS. RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments.

31
votes
2answers
41k views

Extending / Overriding JS in Magento 2

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 ...
37
votes
5answers
47k views

How To add JS file in frontend for all pages

I've read 3 pages of Google Results on how to load a JS file for all pages and still am not able to do it. I've got a few doubts, hope somebody can clear them out. Do I need to create a module ...
9
votes
2answers
30k views

How to load custom module js file in magento 2?

I have created banner slider module for magento 2. I have called JS file using following ways and its working fine. In block class I created following function public function getBaseJs($fileName){ ...
11
votes
3answers
11k views

JS errors Magento 2

I've been trying to finish something and publish it online this entire weekend, it's some how broken and I have no idea why so I hope someone can help me out. I've tried adding custom jQuery into my ...
15
votes
1answer
7k views

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

I need to extend Magento_Catalog/js/price-box.js. I have used the 'mixins' feature, but it's not working for price-box.js. requirejs-config.js: var config = { config: { mixins: { ...
5
votes
1answer
8k views

Magento 2 add custom validation rule

I'm going crazy here trying to add a custom validation rule to Magento 2. It's impossible to find any useful information about it. The things I have are as follow: 1) requirejs-config.js file with ...
18
votes
4answers
17k views

Magento 2: requirejs-config.js in themes?

Is it possible to include a requirejs-config.js file (or otherwise configure RequireJS) via a Magento theme? Or is the capability reserved for Magento modules? The dev docs information on theme ...
0
votes
2answers
4k views

Adding JS to the checkout

How to add custom JS to just the checkout page? I found this tutorial, but as far as I can tell it will add JS to the entire site.
3
votes
2answers
3k views

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

Basically I need to some method overwrite/extend of following Js class. magento/module-checkout/view/frontend/web/js/model/step-navigator.js Overwrite of this class through requirejs working fine. ...
8
votes
4answers
22k views

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

I know how to use require-config.js in custom theme, but I would like to use custom javascript file (myfile.js) on all pages. In which directory should I add require-config.js and how to use it, so ...
2
votes
2answers
5k views

Magento2: Add external JS globally

I'm trying to add external js in my module which will be applicable on all pages on frontend. This is the process I've followed: 1. Code in my layout file app/code/Lapisbard/General/view/frontend/...
5
votes
3answers
1k views

Custom javascript not working

I'm trying to inject a scroll to anchor javascript globally in Magento 2. More specifically this script: $('a[href^="#"]').on('click', function(event) { var target = $(this.getAttribute('href'));...
4
votes
2answers
7k views

How to include custom JS files in magento 2 custom module

I am well aware of a RequireJS feature of Magento 2. I used it quite well for some JS scripts. require(['jquery', 'ajaxform', ''], function (jQuery) { // JS code }); But now I have a ...
14
votes
1answer
8k views

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

I'm creating an extension that replaces the default configurable options label 'Choose an Option...' with the attribute name, for example 'Choose a Color...'. How can I extend (not override!) the ...
7
votes
1answer
2k views

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

In many of Magento 2's UI Element view model constructors, the defaults array will have an imports or exports property. return Collection.extend({ defaults: { //... imports: { ...
16
votes
3answers
4k views

What are the “source” Items in UI Component Files

In Magento 2's UI Form Component configuration files, you'll often see a item attribute with the same of source -- <item name="source" xsi:type="string">block</item> below. #File: vendor/...
16
votes
5answers
25k views

Magento2 not reading my requirejs-config.js

Hi I'm new to Magento2 and trying to figure out how RequireJS works in Magento. Here is my situation: I have following module: app/code/Mymodule/Test/view/frontend/requirejs-config.js Here is the ...
12
votes
7answers
8k views

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

I have changed "Add to cart" text to "I want this" by overriding "vendor\magento\module-catalog\view\frontend\templates\product\list.phtml". But, when I click on "I want this" (i.e. "Add to cart" ) ...
7
votes
2answers
2k views

Add jQuery Datatables in magento 2

I am trying to use the jquery DataTables in magento-2 frontend using the requirejs. I can see the datables.min.js file in the net panel, but somehow it give the following error. My reuirejs-config....
1
vote
2answers
1k views

get requirejs-config.js to load declared cdn's for jquery

I have been trying to get the requirejs-config.js to load, but as of yet it will not.. I have followed http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html and put the ...
7
votes
1answer
305 views

Replacing Core module javascript magento 2

I am replacing the core search module js by custom module using following code. var config = { map: { '*': { 'quickSearch':'All_Search/form-mini' } } }; when i ...
4
votes
2answers
5k views

Magento2 adding 3rd party jQuery files to module

I am trying to add in some 3rd party jQuery code to my Magento2 module. I want to have my own custom js file that will use the 3rd party code. Before I was adding the code into the header instead of ...
2
votes
2answers
3k views

Magento 2 : Javascript in phtml file not loaded

I've just created a phtml file with CSS, HTML and Javascript code in it. The Javascript does not get executed even tho I said <script type="text/javascript">. What should I do? I also want to ...
16
votes
1answer
2k views

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

In Magento 2's RequireJS implementation, many core modules use a configuration something like this map: { '*': { editTrigger: 'mage/edit-trigger', addClass: '...
6
votes
2answers
25k views

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

I have experience with Magento 1, and there adding a custom javascript file was very straightforward and logical. But when it comes to Magento 2, I can't figure out how to add a new js file, where I ...
6
votes
2answers
2k views

Dependecy error Magento 2 ('sectionLoadUrl' error)

I've asked a similar question before, but because of some research, it would not have been relevant anymore. So here a more comprehensive explanation of my problem. My scenario I want the cart page ...
11
votes
1answer
2k views

How to share Knockout JS observables between UI Components

I understand how to use imports: {} and exports: {} to share a UI components properties, such as: defaults: { exports: { shouldShowMessage: '${$.component}' } } Which returns the ...
6
votes
1answer
2k views

Magento 2 - updating UI library javascript

How can i override default Mage 2 UI js functions? For example: I have setup accordion layered navigation to show/hide the filters in the sidebar (like the one in Luma theme). Default collapsible.js ...
2
votes
2answers
10k views

Magento 2: How to defaultly open “content 2” tab?

I am using accordion for tab open and close.How to open default "content 2" tab? <div class="block filter" id="layered-filter-block" data-mage-init='{"collapsible":{"openedState": "active", "...
6
votes
6answers
6k views

Why is js breaking with requirejs in templates on Magento 2 and how to fix?

I am using a custom theme called Porto for Magento 2. I have found an issue where when I load the page with dev tools enabled and having disable cache checked, a number of js errors pop up. Most of ...
3
votes
1answer
5k views

Magento 2: How to add popup on button click in admin?

Can you explain how to add popup(modal window) on button click in the adminhtml? I already create some phtml <div id="messages"> <div class="messages"> <?php foreach ($this->...
1
vote
1answer
813 views

Magento2.1.3 Deploy Version error

I am using Magento latest version Magneto2.1.3 when I run this command and check admin/frontend I face Js missing issue in console.. Command Run :: php bin/magento setup:static-content:deploy Issue :...
10
votes
1answer
5k views

Requirejs shim option not working

I'm developing a module for Magento2 and I'm using requirejs to load custom javascript that depend on jquery. I'm using the shim option in requirejs-config.js to set this dependency between the custom ...
5
votes
2answers
6k views

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

I am having a bit of strange behaviour with Magento 2 require. What I trying to do is to use glide.js to load carousel image. I create custom.js and here is my code. require(['jquery', 'lib/glide'], ...
5
votes
2answers
2k views

My js file is not loaded in Magento 2

My steps: 1) Load my file slider.js to: app/design/frontend/Vendorname/default/web/js. 2) Create requirejs-config.js to: app/design/frontend/Vendorname/default var config = { paths: { ...
4
votes
2answers
2k views

How to pass phtml variable in js file in magento2 [duplicate]

This is my phtml file .... <?php $currentCategory = $block->getCurrentCategory(); //echo $currentCategory; ?> I want to set $currentCategory value in js file and display in alert ......
4
votes
1answer
3k views

Magento 2: Get System->Config value in JS file

I have a JS file that is loaded through require-js.config. I need to get access to a store->configurations value inside my JS file. Does anyone know of a way to accomplish that?
3
votes
1answer
6k views

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

I'd like to execute my JS after the DOM ready using RequiredJS instead of this: $(window).load()
3
votes
2answers
3k views

Magento 2 override module-ui from custom theme

Is there any option to override magento-ui vendor/magento/module-ui/view/base/web/templates templates from a theme? Other module's templates overriding works fine: var config = { map: { ...
3
votes
1answer
454 views

Magento 2 admin ui grid callbacks

Is there any callbacks for admin ui grid ? For example, I need to call some js function after grid was fully loaded.
8
votes
1answer
264 views

What does the Magento_Ui/js/lib/knockout/extender/bound-nodes RequireJS Module Do?

The Knockout.js bootstrap module in Magento 2 includes the following module via a define dependency. Magento_Ui/js/lib/knockout/extender/bound-nodes Technically speaking, this module creates ...
7
votes
2answers
4k views

Override Magento 2 JS file via requirejs-config.js not working

I'm trying to override the file vendor/magento/module-catalog/view/base/web/js/price-box.js in my theme using requirejs-config.js unsuccessfully. Location of my requirejs-config.js: app/design/...
3
votes
2answers
3k views

Magento 2: Mismatched anonymous define() module

I passed a variable from phtml to js it's working fine but it shows "Mismatched anonymous define() module" error in console. Phtml File: <?php $myVar = "This is my value" ?> <script type="...
3
votes
0answers
2k views

Require Js Error: Mismatched anonymous define() module: function Magento 2

I am facing Error: Mismatched anonymous define() module: function ($) { 'use strict'; require.js on line 166 error in my custom extension when i am trying to load external js. Below is my code. ...
3
votes
1answer
531 views

Sigil Strings in Magento 2's RequireJS Files

I've noticed strange-to-me "sigil strings" strewn throughout Magento 2's RequireJS modules. Here's one example. return Element.extend({ defaults: { clientConfig: { urls: { ...
3
votes
0answers
158 views

What does the “initUnique” Method setup in uiElement Objects?

In Magento 2's uiElement objects, one of the initialization methods is named initUnique initialize: function () { this._super() .initObservable() .initModules() ....
2
votes
4answers
2k views

Magento 2: How to override core js module price-bundle.js

I am attempting to override the _onQtyFieldChanged event in the mage.priceBundle widget in the module-bundle/view/base/web/js/price-bundle.js file. I am referencing the Magento dev docs (http://...
1
vote
1answer
1k views

Hide element(s) if input is empty

On the store view frontend, how would I be best to go about hiding/showing an element based upon an inputs value? I've been considering an attempt to extend collapsible.js, but am not sure if this is ...
1
vote
1answer
442 views

Magento 2: colorbox jquery not working

I am working on magento 2 and i want to open popup in my product detail page. But i have found problem with jquery issue and its not come every time. Here is my requirejs-config.js var config = { ...
3
votes
1answer
1k views

Magento 2 custom module override knockout template

How can we override a knockout template in a custom module? I know how we can do this in our own theme but I need this in a module. For example I like to override this file: vendor/magento/module-...