Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

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.

33
votes
5answers
45k 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 ...
31
votes
2answers
38k 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 ...
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 ...
16
votes
5answers
23k 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 ...
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: '...
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/...
15
votes
1answer
8k views

How Does Magento 2 Apply KnockoutJS Bindings

Per a very cursory reading of the KnockoutJS documentation, initializing a very basic Knockout view looks like the following // This is a simple *viewmodel* - JavaScript that defines the data and ...
15
votes
2answers
5k views

How Are the Things Magento 2 calls “mixins” Implemented?

Magento 2's RequireJS based object systems contains a feature called "mixins". A Magento 2 mixin isn't what a software engineer would normally think of as a mixin/trait. Instead, a Magento 2 mixin ...
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: { ...
13
votes
1answer
7k 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 ...
13
votes
1answer
374 views

Conditional RequireJs configuration (Load requirejs-config.js programmatically?)

I would like to replace a RequireJs component only on certain conditions (for example, based on configuration). Is there any way to programmatically prevent loading of my module's requirejs-config.js ...
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" ) ...
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 ...
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 ...
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 ...
10
votes
2answers
2k views

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

Precondition I have 2 custom widgets extending same parent widget. Parent widget: Magento_ConfigurableProduct/js/configurable First Custom Widget: Vendor_AModule/js/configurable Second Custom Widget:...
9
votes
2answers
29k 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){ ...
9
votes
3answers
1k views

How/Where does Magento Convert a RequireJS module Name into a URL?

In Magento 2, you can use RequireJS to include a javascript module with code that looks something like this. #File: app/code/Package/Name/view/frontend/requirejs-config.js var config = { map: { ...
8
votes
3answers
21k 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 ...
8
votes
1answer
1k 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: { ...
8
votes
3answers
2k views

Magento 2 - How to apply Slick Slider to Recently Viewed Widget

I have created a code but slider is not showing up in recently viewed products. Here is my code - I have downloaded slick js and css from the following link http://kenwheeler.github.io/slick/ Then ...
8
votes
1answer
255 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
22k 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 ...
7
votes
2answers
1k 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....
7
votes
2answers
2k views

Magento 2 : How to Detect Checkout Step Change

I am trying to figure out the best method of detecting a step change in Magento 2's checkout. For example going from shipping details to payment, or vice versa. I have done some digging and in ...
7
votes
1answer
2k views

$(…).swMegamenu is not a function [closed]

I'm using Smartwave Porto theme for my Magento 2 website, when I load my website for the first time in browser console it shows no error at all, but every time I refresh the browser page by pressing ...
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/...
7
votes
1answer
151 views

In magento 2 what is $F in js.phtml file

Please open file "vendor\magento\module-catalog\view\adminhtml\templates\catalog\product\attribute\js.phtml". Go to the function updateRequriedOptions(Line Number 258) function ...
7
votes
1answer
302 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 ...
7
votes
1answer
1k views

how to load or add js before require js in magento 2

I am trying to override default_head_blocks.xml like below vendor\magento\module-theme\view\frontend\layout\default_head_blocks.xml <?xml version="1.0"?> <!-- /** * Copyright © 2016 Magento....
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 ...
6
votes
2answers
1k 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 ...
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 ...
6
votes
2answers
3k views

How to wait until text/x-magento-init has loaded the options

It seems to me that text/x-magento-init returns options async: <script type="text/x-magento-init"> { "*": { "component": " <?php echo "test" ?> " } ...
6
votes
1answer
510 views

Does magento2 use r.js optimization for require.js when deploying static files

I see that javascript contributes a lot to my magento2 page weight (1 mb). I wonder if it could be optimized with r.js when deploying static content or magento2 already uses an optimization tool. ...
6
votes
4answers
2k views

Magento2 :owl carousel and other custom extension js not working on first time page load

I am using owl carousel on my magento 2 website. I have created a custom module for that. While I am loading my website first time owl carousel slider is not appearing,. When I move to other page ...
6
votes
2answers
389 views

QuickView not working after load product Using infinite scroll Magento 2

I am using Weltpixel Quick View extension and it is working fine.But there is an issue when products loads using infinite scroll.After loads products using infinite scroll , quick view stops working....
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 ...
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: { ...
5
votes
3answers
723 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'));...
5
votes
2answers
655 views

How to trigger self.openFullScreen() function into my custom jQuery in Product details page

If we click on product image in the product details page, gallery full screen is coming to see the images in full screen. I am trying to get the same functionality when click on my string Quick view ...
5
votes
2answers
396 views

How to use Custom Module Js to RequireJS

I add my custom Module to JS to requirejs-config.js File var config = { paths: { 'Test/jquery':"Test_Header/js/jquery.min" , 'Test/popup':"Test_Header/js/jquery....
5
votes
1answer
2k views

Magento2 - How to use Magento_Catalog/js/price-box to format price in template?

I want to format my price in template, and I find some place told about Magento_Catalog/js/price-box, But I don't know how to use it, Anyone can help me show me how to do.
5
votes
0answers
459 views

How to apply custom validation in Magento 2 checkout Shipping Address form?

I want to apply some custom validation on shipping address form of Magento 2 Checkout. Normally i do it with JQuery but don't know how to apply it in Magento 2. The validation i want to implement are ...
5
votes
1answer
1k views

how to extend default javascript

I try to extend standard magento javascript configuration but I just get nothing. I'm following this: http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/custom_js.html and this: ...
4
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'], ...
4
votes
1answer
509 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: { ...
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
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 ...
4
votes
1answer
2k views

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

Whilst researching Magento 2's implementation of Knockout JS I keep coming across this._super();. What does this do?