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

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


5

Finally I've done as follows: Copy all content of this url insaid you custom module /Custom/Module/view/frontend/web/js/vue.js Configure requirejs-config.js /Custom/Module/view/frontend/requirejs-config.js var config = { map: { '*': { vue: 'Custom_Module/js/vue'> } } }; And to ...


5

We need to re-bind js component by knockout applyBindings function on ajax response. ko.applyBindings(new removeproduct(), $('#cart-item-table')[0]); While removeproduct is viewModel Vendor_Module/js/removeproduct and cart-item-table is the element which I need to re-bind knockout events.


5

By default, Magento 2 provides the Modal popup functionality. Please check below code to open modal popup <div> <button id="click-here">Click Here</button> </div> <div id="popup-modal-main" style="display:none;"> <h1> Content for Popup </h1> </div> <script> require( [ '...


4

In Magento 2.1.* target _blank is not working Following file is responsible to render action in admin UI component Grid vendor/magento/module-ui/view/base/web/templates/grid/cells/actions.html Change: attr="href: $action().href" to attr="target: $col.getTarget($action()), href: $action().href" For action dropdown change: attr="href: $action()....


4

Add an external JS in the following way : Try this, Add your custom js in the following path. app/design/frontend/Vendor/theme-name/web/js/nameofjs.js then you need to add requirejs-config.js to the following path. app/design/frontend/Vendor/theme-name/requirejs-config.js then add the following code in it var config = { paths: { ...


4

Instead of defined use require Like this: require([ 'jquery', "jquery/ui" ], function($){ 'use strict'; $('a[href^="#"]').on('click', function(event) { var target = $(this.getAttribute('href')); if( target.length ) { event.preventDefault(); $('html, body').stop().animate({ scrollTop: ...


4

You should call the translate function like below require(['jquery', 'jquery/ui', 'mage/translate'],function($){ $(classRefund).html($.mage.__('Pending')); }); According to your script if ($.inArray(status, array) !== -1) { var text = $.mage.__('Go'); $(this).find('.col.actions').append("<span class='a123'><a href=...


4

In your .phtml please add following code. <script type="text/x-magento-init"> { "*": { "Magepow_Ajaxcart/js/view/minicartaddons": { "maxpriceShipping": <?= /* @escapeNotVerified */ $maxpriceShipping ?> } } } And in your JS file please add below code to get maxpriceShipping define([ 'ko', '...


4

PWAs/Service workers do require an SSL certificate/HTTPS. You need HTTPS During development you'll be able to use service worker through localhost, but to deploy it on a site you'll need to have HTTPS setup on your server. Using service worker you can hijack connections, fabricate, and filter responses. Powerful stuff. While you would use ...


3

Assuming that this is a JavaScript Component in the Magento sense of the word, you can basically "insert" it into any HTML element. Let's say you want to put your chat inside a div you can do something like <div id="chatbox"> data-mage-init='{"chatComponent":{}}' </div> Setting up the block So in your block you would write a function ...


3

Create app/code/SR/MagentoStackExchange/view/frontend/requirejs-config.js var config = { config: { mixins: { 'Magento_Theme/js/view/messages': { 'SR_MagentoStackExchange/js/view/messages-mixin': true } } } }; Create app/code/SR/MagentoStackExchange/view/frontend/web/js/view/messages-mixin.js ...


3

app/design/frontend/Vendor/theme-name/Magento_Checkout/web/js/custom.js your js functions goes here exemple : define(['jquery'], function($){ "use strict"; return function hello() { alert('Bonjour Amir'); } }); app/design/frontend/Vendor/theme-name/requirejs-config.js var config = { map: { '*': { ...


3

Replace your form code with below <field name="open_amount" formElement="checkbox"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="component" xsi:type="string">[Vendor]_[Module]/js/mycheckbox</item> <item name="source" xsi:...


3

You can use jQuery events like below method will work <script> require(['jquery', 'jquery/ui'],function($){ jQuery('#nbrbox').on('input', function(){ var nbrbox = document.getElementById('nbrbox').value; var qtybox = parseFloat(document.getElementById('qtybox').textContent); var qtysquare =(Math.round(nbrbox*...


3

My problem was solved when I add bind section to my script file. I did this 2 steps : 1 - Disable button and prevent double submitting : $('form').submit(function () { $(this).find(':submit').attr('disabled', 'disabled'); }); 2 - Enable submit button if validation error occurred : $("form").bind("invalid-form.validate", function () { $(this)....


3

I find the problem : app/code/Vendor/ZipCode/viez/frontend/web/js/ajax.js var ajaxurl = url.build('zipcode/zipcode');


3

As Sumit has fixed but not explained, you are writing the switch statement incorrectly. Rather than use || you should write a new case. Try replacing your switch with this: switch(data['ZipCode']){ case '11222': case '11249': case '11211': html=fullchoice break; default: html=nochoice } This is 'vanilla' JS and ...


3

Your Js module should return function, to obtain configuration from .phtml; And also register your requireJs module by using define([], function(){}); So should be like: define([ "jquery", 'mage/template', "mage/mage" ], function ($, mageTemplate, alert){ return function(config) { $('#check-button').click(function(){ ...


3

Well, I think there are two ways. Create your own sort option in a module using a plugin. Something like this: Magento 2 How to add custom sort by option. Look at Luca S's answer. I think this person has a general idea of how to do it. Use Position option but modified: http://magento2x.com/magento-sort-newest-products-solution/. Hopefully this will Help ...


3

Override in Theme To override list.html file copy from vendor/magento/module-checkout/view/frontend/web/template/payment-methods/list.html to app/design/frontend/<Vendor>/<Yourtheme>/Magento_Checkout/web/template//payment-methods/list.html Run below command to see the changed php bin/magento setup:upgrade php bin/magento setup:static-...


3

Try Below way.. You can do it with layout <referenceContainer name="before.body.end"> <block class="\Magento\Framework\View\Element\Template" template="You_Module::js.phtml" name="module_js"/> </referenceContainer> and in js.phtml <scrip src="example.com/jp2/test.js" /> Or <reference name="before_body_end">...


2

Found the issue, main problem was that the guide in the devdocs has some mistakes in it. To fix this I had to find in my build.js "jquery/jquery-migrate": ["jquery" in the shim section and replace it with "jquery/jquery-migrate": ["jquery", "jquery/jquery.cookie"] so just adding jquery.cookie to the deps fixed it


2

You can remove all tr which is having style="display: none;" by following jQuery code: jQuery( document ).ready(function() { jQuery( "tr" ).each(function( index ) { if (jQuery( this ).css('display') == 'none'){ jQuery(this).remove(); } }); }); Description: Above code will check for style="display: none; for each tr ...


2

There is a easier version using deps. Dependencies in the requirejs-config.js will load your file when loading requirejs itself (everywhere in the shop). Here is an example of how your requirejs-config.js should look: var config = { // When load 'requirejs' always load the following files also deps: [ 'common-js' ], // Library file ...


2

You can follow steps given below to resolve the issue. step 1) Please move the custom.js file To app/design/frontend/Vendor/customtheme/Magento_Theme/web/js step 2) Update your requirejs-config.js as given below var config = { map: { '*': { custom:'Magento_Theme/js/custom' } } }; step 3) Please update js.phtml located under /app/...


2

Magento 2 has "head.additional" block, where you can set your variables globally. Add below code in app\code\Name\Module\view\frontend\templates\globalvar/globalvariable.phtml ?php $globalConfig = []; $globalConfig['FirstVariable'] = 'My first value'; $globalConfig['SecondVariable'] = 'My second value'; ?> <script> window.globalConfigData = <?...


2

This is just my opinion. It should not be used as a reference in no way. There is no silver bullet solution here. As you already stated, this is a fast and cheap way to get your page to look ok. Indeed it's cleaner to have the css and js in separate files not in the content. But clean is not cheap nor fast. I guess it's a matter of priorities here. The ...


2

Please update your menu.js file as: _toggleMobileMode: function () { $(this.element).off('mouseenter mouseleave'); this._on({ "click a.ui-corner-all": function (event) { event.preventDefault(); var target = $(event.target).closest(".ui-menu-item"); if (!...


2

In Maggento 2 the concept of requirejs is restricting you to add the an external js which is not bound into any module. So what you can do is simply create a custom module follow this & define your js there into that module at below location Magento_root/app/code/Vendor/Module/view/frontend/web/js/file.js It should contains the code as follows ...


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