We’re rewarding the question askers & reputations are being recalculated! Read more.
93

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 theme active (blank). No files generated in the pub/static folder (remove the pub/static/frontend folder) Actions: Copied the op-checkout-method.js file from ...


65

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: define([ "jquery" ], function($) { "use strict"; // Here your custom code... console.log('Hola'); }); In short: we declare dependencies at the start,...


37

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 custom KnockoutJS binding named scope. When Magento's Knockout instance encounters a scope: binding like this <li class="greet welcome" data-bind="scope: '...


28

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. <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js Step 2: Create requirejs-config.js file under <Vendor>/<Module_Name>/view/<...


26

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 doesn't work delete the requirejs-config.js and run the following commands: php bin/magento cache:clean php bin/magento cache:flush php bin/magento setup:upgrade ...


24

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:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Vendor_ModuleName" setup_version="1.0.0"> <sequence> <...


21

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 you're define a map configuration, you're actually defining a prefix for mappings. i.e. Not only will this map: { '*': { editTrigger: 'mage/edit-...


20

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 different component or do both. Note: to maintain clarity in this answer, a "component" is a Javascript object that is returned by RequireJS, has a specific ...


19

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 default_head_blocks.xml in app/design/frontend/Vendor/Theme/Magento_Theme/layout/: Example Content: <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"...


19

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/validation-mixin': true } } } } and Vendor_Module/view/frontend/web/js/validation-mixin.js: define([ 'jquery' ], function ($) { "...


18

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/jquery.flexslider-min', 'picturefill': 'Vendor_Modulejs/picturefill.min', 'easing': 'Vendor_Modulejs/jquery.easing.1.3', ...


18

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 ability of any RequireJS plugin to completely take over the loading process of certain files. This allows to modify the export value of a module before it will be ...


16

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 Require Js: using template to call our script. We will create new template with Magento\Framework\View\Element\Template its block class. If we want to load js ...


15

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 respectively for both Magento_Theme and the root of my theme at <Vendor>/<theme> and now my RequireJS config is merged into the main requirejs-...


15

Replace in customer module in the file authentication-popup.js: autocomplete: window.checkout.autocomplete with: autocomplete: ((window.checkout && window.checkout.autocomplete) ? window.checkout.autocomplete : null), Once updated run php bin/magento setup:static-content:deploy Update The issue may be fixed in newer versions: https://github....


14

You need create requirejs-config.js in you module with var config = { config: { mixins: { 'Magento_Checkout/js/model/step-navigator': { 'You_Module/js/step-navigator/pluggin': true } } } }; And js/step-navigator/pluggin.js file with content like define(function () { 'use strict'; ...


12

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-config.js would be something like var config = { map: { '*': { priceBox:'namespace_modulename/js/custompricebox', } } };...


12

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, Magento opted to process them by itself. This is done upon initialization of Javascript components in the mage/utils/template.js file. Specifically, the ...


12

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': { 'mixins': { 'Magento_ConfigurableProduct/js/configurable': { 'Vendor_AModule/js/configurable': true } }...


12

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).hashchange(_.bind(stepNavigator.handleHash, stepNavigator)); This causes the stepNavigator.handleHash function to execute whenever the step changes because changing ...


11

The problem is that you did not enable developer mode. As a result, the files cache is in the pub/static folder.


11

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!


11

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]}); So in your case it should be: data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": "2", "multipleCollapsible": true}}' ...


11

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 caller; if that method does not exists in the parent UI component, then the method tries to find it higher in the inheritance chain. The below example would ...


11

You can use this feature of the RequiredJS 'domReady!' like the native Magento's modules use: PHTML <script>// <![CDATA[ require([ 'jquery', 'domReady!' ], function ($) { // Your Code }); // ]]> </script> Or JS define(['jquery','domReady!'], function($) { // Your ...


11

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 the UI component "namespace". In your example, you set the value to a string, which resolves to a property of the UiComponent that is the export source. The ...


11

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 not a function If you suffer the same, do this: create a requirejs-config.js in the root of the child theme app/design/frontend/Smartwave/porto_child and put ...


10

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 the config. So, to take the Magento_Theme module for an example here, if you add a require-config.js under <theme_base_dir>/Magento_Theme dir, the config ...


10

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


9

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-cart.js You have to changes text which you want to from this file. Let me know if you have any query.


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