46

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


43

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 populate data in this file a new language package has to be created for the project. So instead of adding the CSV at the theme level like app/design/<area&...


43

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":{ "types":{...}, "components":{...}, } } } </script> This bit of code in the page means Magento will ...


34

General usage of "script type" When using <script type="...."> the browser interprets only what it knows (like text/javascript for example). Anything else is ignored. Basically using a custom type you are adding information to the page without displaying it and without the browser interpreting it and you can later use that information as you want. ...


29

Open Magento/Checkout/view/frontend/layout/checkout_index_index.xml file. look at following line <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping</item> So Magento/Checkout/view/frontend/web/js/view/shipping.js this is your js file. Open it. Look template: 'Magento_Checkout/shipping' this is the template file for this JS. ...


29

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 values. This is the module directory: | registration.php | +---etc | | module.xml | | catalog_attributes.xml | | | \---frontend | di....


29

You need to call the function into js from the template. require.toUrl('images/icon-paypal.png');


26

Simple method where you DO NOT need to use html templates Thanks to Vinai Kopp I've finally got an answer to this, it is much simpler than my previous hacky workaround (I was cleaning nodes). All you need to do is define 'ko' as a dependency and add your code inside a return function. Below is a simple example that renders out some text passed in via JSON. ...


23

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.subscribe(function () { var type = quote.shippingAddress().getType(); if (processors[type]) { processors[type].getRates(quote....


21

Just found a way to override that function using 'mixins'. On requirejs-config.js file I had to add: config: { mixins: { 'Magento_Checkout/js/view/shipping': { 'Mynamespace_Mymodule/js/view/shipping': true } } } Create a file Mynamespace/Mymodule/view/frontend/web/...


21

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: Registration.php : app\code\Sejal\Flavor\registration.php di.xml : app\code\Sejal\Flavor\etc\di.xml module.xml : app\code\Sejal\Flavor\etc\module.xml ...


19

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, type: 'POST', dataType: 'json', global: false, contentType: "application/json; charset=utf-8", data: myJSON, success: function (data) {...


18

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>


18

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" xsi:type="boolean">false</item> </item> </item> and it worked for me. After many attempts I came to this conclusion: the Knockout ...


17

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


17

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 you inspect the window variable in the dev-console of your browser, you will see that the checkout and checkoutConfig objects are available on checkout-pages. ...


17

You should write a below code for else condition <!-- ko if: isFreeShipping() --> //My Code goes here <!-- /ko --> <!-- ko ifnot: isFreeShipping() --> //My Code goes here <!-- /ko -->


17

Debugging <div data-bind="text: ko.computed(function() { debugger; })"></div> Print Data <div data-bind="text: ko.toJSON(method.method_code)"></div> Docs from Magento: https://devdocs.magento.com/guides/v2.4/ui_comp_guide/troubleshoot/ui_comp_troubleshoot_js.html


16

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


16

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


16

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/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <!-- pass custom variable to checkout page --> &...


15

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 of custom tags and attributes This custom parsing is done by the Magento_Ui/js/lib/knockout/template/renderer RequireJS module. This module's source code sets ...


15

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' => 'int', 'backend' => '\Foo\Bar\Model\Attribute\Backend\YourAttribute', 'frontend' => '', 'label' => 'XXXX', 'input' => 'text', '...


14

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/module-checkout/view/frontend/layout/default.xml <block class="Magento\Checkout\Block\Cart\Sidebar" name="minicart" as="minicart" after="logo" template="cart/...


14

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; Widget name used as attribute name for storage widget instance in widget DOM elements. $.data( element, this.widgetName, this ); After extending by magento core ...


14

Try following way: Vendor/Module/view/frontend/requirejs-config.js var config = { "map": { "*": { "Magento_Theme/js/view/messages": "Vendor_Module/js/view/messages", } } } Vendor/Module/view/frontend/web/js/view/messages.js define([ 'jquery', 'uiComponent', 'underscore', 'Magento_Customer/js/customer-...


14

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("product_form.product_form.product-details.quantity_and_stock_status_qty.qty", function (element) { element.disable() }) }) This answer is correct, ...


14

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


13

Magento 2 uses the Knockout.js framework to dynamically build some parts of it's frontend. It provides a great way to create interactive frontend data bound components within your Magento 2 store. Knockout.js eases working with dynamic javascript user interfaces by making use of the Model-View-ViewModel (MVVM) pattern. Features of Knockout.js Observables ...


12

As far as I know, the header minicart will get the data from customer data vendor/magento/module-checkout/view/frontend/web/js/view/minicart.js define([ 'uiComponent', 'Magento_Customer/js/customer-data', 'jquery', 'ko', 'sidebar' ], function (Component, customerData, $, ko) { 'use strict'; ...... this.cart = customerData....


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