Skip to main content
New
Stack Overflow Jobs powered by Indeed: A job site that puts thousands of tech jobs at your fingertips (U.S. only). Search jobs
51 votes
Accepted

How Does Magento 2 Apply KnockoutJS Bindings

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 ...
Alana Storm's user avatar
  • 44.4k
48 votes
Accepted

Magento 2: How/Where is the `getTemplate` Knockout Function Bound?

The PHP code for a UI component renders a javascript initialization that looks like this <script type="text/x-magento-init"> { "*": { "Magento_Ui/js/core/app":{ ...
Alana Storm's user avatar
  • 44.4k
43 votes
Accepted

Magento2 translating Javascript (KO) template text

So I was finally able to figure out the problem. Seems that the JS template translation are read from js-translation.json which is generated during setup:static-content:deploy execution. In order to ...
Atish Goswami's user avatar
33 votes
Accepted

I want to customize my minicart in Magento 2. I need to add 3 attributes

You can create a module to do this. It will use a plugin to add the attributes to the data array which is read by the knockout js template. Then we need to override the template to display these ...
Aaron Allen's user avatar
  • 9,009
29 votes
Accepted

How to specify skin image path in Knockout HTML template?

You need to call the function into js from the template. require.toUrl('images/icon-paypal.png');
Sunil Patel's user avatar
  • 2,107
27 votes
Accepted

What Programmatically Triggers Magento 2's Shipping Rates to Update

in vendor/magento/module-checkout/view/frontend/web/js/model/shipping-rate-service.js:21 there is a subscribe to the shipping address observerable quote.shippingAddress. quote.shippingAddress....
Martijn Schot's user avatar
26 votes

How to prevent customer/section/load ajax call when ever i'm making my custom ajax call in M2?

I had same problem and solution is very simple. Set the global event false in your jQuery request. Magento will not be able to intercept your request in that case. example: $.ajax({ url: webUrl,...
Surendra Mishra's user avatar
22 votes

Add custom product attribute to checkout summary Magento 2

You will have to create a plugin for that. I wanted to add product flavor to order summary. This is the way I created a plugin and achieved what I wanted. Vendor = Sejal Files you need to create: ...
Sejal Shah's user avatar
  • 2,141
22 votes
Accepted

Magento 2: Pass data in checkout

You have to just override getConfig() function of checkout module. app/code/Packagename/Checkout/etc/frontend/di.xml <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/...
Rakesh Jesadiya's user avatar
21 votes
Accepted

Magento2 - Override Magento/Checkout/view/frontend/web/js/view/shipping.js

Just found a way to override that function using 'mixins'. On requirejs-config.js file I had to add: var config = { config: { mixins: { 'Magento_Checkout/js/...
St0iK's user avatar
  • 753
21 votes
Accepted

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

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 ...
Ben Crook's user avatar
  • 15.7k
21 votes
Accepted

Knockout If-else condition inside html file in Magento 2

You should write a below code for else condition <!-- ko if: isFreeShipping() --> //My Code goes here <!-- /ko --> <!-- ko ifnot: isFreeShipping() --> //My Code goes here &...
Suresh Chikani's user avatar
20 votes

Magento 2 add custom product attribute validation from install script

One of the solution is to add a backend model to your attribute which is used to format / validate your attribute value before save and/or after load. Add a backend class : [ 'type' => '...
Matthéo Geoffray's user avatar
20 votes
Accepted

Magento 2: How to remove Tooltips from checkout page?

I really really don't know if it's the Magento right way but I tried this: <item name="telephone" xsi:type="array"> <item name="config" xsi:type="array"> <item name="tooltip" ...
Loreena's user avatar
  • 630
20 votes
Accepted

How to debug in ko template in magento 2?

Debugging <div data-bind="text: ko.computed(function() { debugger; })"></div> Print Data <div data-bind="text: ko.toJSON(method.method_code)"></div> Docs ...
Khoa TruongDinh's user avatar
19 votes
Accepted

Magento 2 : How to Detect Checkout Step Change

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)....
Aaron Allen's user avatar
  • 9,009
19 votes

Best Way Of Getting Base URL Inside KnockoutJS .html File

I managed to do this in app/design/frontend/<Vendor>/<Theme>/Magento_OfflinePayments/web/template/<Filename>.html, but the solution should work in the Magento_Checkout as well. When ...
simonthesorcerer's user avatar
18 votes

Magento 2: How/Where is the `getTemplate` Knockout Function Bound?

The binding for any of the knockout JS templates happens in the .xml files of the module. Using the Checkout module as an example you can find the config for the content template in vendor/magento/...
circlesix's user avatar
  • 4,293
18 votes
Accepted

How do I load JavaScript function inside KnockoutJS html?

If you need to work with DOM elements, rendered by knockout from this template, you can use afterRender binding. <div data-bind="afterRender: function() {alert('yes');}"></div>
Max's user avatar
  • 4,054
17 votes
Accepted

Magento 2: What's an `<each/>` Tag?

As Raphael hinted at, it turns out that when Magento downloads its KnockoutJS templates via an XHR (i.e. ajax) request, it also passes them through some custom parsing routines that look for a number ...
Alana Storm's user avatar
  • 44.4k
17 votes
Accepted

Magento2 : checkbox change function in knockout js

Yes, i found a solution for checkbox change event. I have added this checkbox on shipping method section so the html checkbox available on this path. /view/frontend/web/template/checkout/shipping/...
Dhrumin's user avatar
  • 861
16 votes
Accepted

How does Magento 2's initObservable function work?

The initObservable method sets up variable tracking, as described in this article. In short: this lets you make an property a Knockout observable property by listing it as a tracks default. Knockout ...
Alana Storm's user avatar
  • 44.4k
16 votes
Accepted

Magento 2 : Run/Execute Javascript after KnockoutJS has rendered all elements

Because Magento use async rendering it not possible to make what you ask. But you can work with js UI component to disable field require(['uiRegistry'], function (uiRegistry) { uiRegistry.get("...
KAndy's user avatar
  • 20.9k
15 votes

Hide messages after certain interval

Try following way: Vendor/Module/view/frontend/requirejs-config.js var config = { "map": { "*": { "Magento_Theme/js/view/messages": "Vendor_Module/js/view/messages", }...
Sohel Rana's user avatar
  • 35.9k
15 votes

How to access other UI components

List all components var registry = require('uiRegistry'); registry.filter(function(value, key) { console.log(key); // console.log(value); }); Get a specific one registry.get( 'checkout....
Alex's user avatar
  • 13.8k
15 votes
Accepted

How to share Knockout JS observables between UI Components

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 ...
Vinai's user avatar
  • 14k
14 votes
Accepted

Magento 2 & JQuery.UI.Autocomplete

jQuery ui menu extended in magento core library lib/web/mage/menu.js as mage.menu. jQuery generate widgetName for any component name = name.split( "." )[ 1 ]; fullName = namespace + "-" + name; ...
Max's user avatar
  • 4,054
14 votes
Accepted

Magento 2, why data-mage-init validation not working when I use knockout component

If you want to use validation in UI component you need to use data-bind="mageInit: {'validation': {}}" instead of data-mage-init='{"validation":{}}'. So you form tag should looks like this: <...
Frodigo's user avatar
  • 156
14 votes

Magento 2.4.3 - Checkout JS knockout error - renderReCaptcha

This is a known core bug. Please see here: https://github.com/magento/magento2/issues/33741 The fix itself: https://github.com/magento/security-package/pull/302/files
Roman Snitko's user avatar
13 votes
Accepted

Magento 2 add custom product attribute validation from install script

With the help of Matthéo Geoffray, this is what I did to apply frontend validation for custom attributes. [ 'type' => 'int', 'backend' => '', 'frontend' => '', 'label' => '...
Amit Singh's user avatar
  • 1,775

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