101

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 ...


74

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,...


41

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: '...


33

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 ...


30

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> <...


29

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

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-...


23

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"...


21

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 ...


20

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', ...


20

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

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 ...


17

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 ...


17

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 ...


16

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.js >= 8.x npm >= 6.x Magento 2 DevTool Git B) DevTool Installation Clone the repository in your local machine Ex: git clone https://github.com/magento/m2-...


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

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'; ...


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

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 ...


13

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!


13

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', } } };...


13

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 } }...


13

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 ...


13

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 ...


12

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}}' ...


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 ...


11

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


11

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


11

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 create requirejs-config.js file inside your theme template, app/code/Vendor/Module/view/frontend/requirejs-config.js code for js file, var config = { ...


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 ...


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