Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [knockoutjs]

Denotes questions related to Knockout use in Magento2

6
votes
0answers
1k views

Magento 2 : Validate form fields that are loaded with Knockout on blur-event

I have a form that is generated through a .phtml file, and in this form various fields are loaded with KnockOut (using the uiComponent javascript-object). .phtml: <form action="#" class="form ...
3
votes
0answers
124 views

Magento 2 : Data binding in Payment Method Selection

I want to display a custom field in "cash on delivery" payment method. I have created a custom module for this. But the field displays in all payment methods. Here is my code html <div class="...
3
votes
0answers
685 views

mageInit KO binding not working for a custom jQuery widget

I can't get the mageInit binding to work on a custom jQuery widget which I have created. I have used it in my KO template like: <div data-bind="mageInit: {'mywidget':{'configuration-value':true}"&...
3
votes
0answers
78 views

Magento 2 Shipping method additional section reload

I want to display a custom message in shipping method section. The message is displayed based on the country and cart weight. I have created a custom block in shipping method section. Now it is ...
3
votes
0answers
115 views

How to call KO js functions outside the template

Is it possible to access variable addressConverter from custom js file. Filename: Magento_Checkout/js/action/create-shipping-address.js /** * Copyright © 2013-2017 Magento, Inc. All rights ...
3
votes
0answers
66 views

Magento 2: Call extension on new checkout tab

To create the new tab on the checkout page I used this link and it is working How to add new steps or tab to the checkout page in Magento2 I want to display this extension on new created tab magento2-...
3
votes
0answers
329 views

When to use mixins and when to use map?

I'm following magento 2 official documentation to create my checkout step. I'm very new to knockoutjs, requirejs, js components which are massively used in magento 2, specially in checkout. I'm ...
3
votes
0answers
373 views

magento 2 : knockout value render not working under script template

I want to render textname value using knockout under <script> template. Here is the script .phtml file <div id="test_id" data-bind="scope: 'test-scope'"> <span data-bind="text:...
3
votes
0answers
216 views

Magento 2 : Can We Convert Price Into Ceil Price

I have setup multi store view with multiple currency. Everything is working as expected. Now, I got requirement to convert all prices into ceil. (e.g, SR20.02 = SR21). For this task, I have ...
3
votes
0answers
258 views

No Way to Clear/delete a Selected Image using Media Browser on category edit page

With reference to this Q&A there's another question. How do I clear the image selected using the Media Browser on category edit page in the admin Panel? Here's what I tried: in app/code/...
3
votes
0answers
841 views

magento 2 knockout js / require js subscribe to another files parameter

What I need to do is subscribe to another file / object via knockout js and require js. For example I have in File1.js: define( [ '/path/to/some/component', 'ko' ], function (Component, ko) ...
3
votes
0answers
891 views

How to bind custom field to billing address Magento 2

The Question: How to override/customize/add billing address bindings? The Context: I've added some custom inputs to Shipping page in Checkout page. As shown below. These fields are there to replace ...
3
votes
0answers
1k views

(Magento2) knockout.js:3012 Uncaught ReferenceError: Unable to process binding

On page loading the following error occurs. knockout.js:3012 Uncaught ReferenceError: Unable to process binding "attr: function (){return { id:'cart-item-'+item_id+'-...
3
votes
0answers
208 views

Magento 2: Admin grid table - add new row on the fly?

I created a custom UI grid table in admin. And I have a form on the same page to add new item to my custom database table(with ajax). After I added new item I need it to immediately appear in this ...
2
votes
0answers
12 views

Magento 2: i need update order summary when click custom option payment method checkmo

need to know is how to update the order summary like reloading the component when we do something like choosing a select payment terms My code: view/frontend/web/js/payment/method-renderer/...
2
votes
0answers
38 views

Force quote_address instead of customer address when browser is refreshed Magento 2

I am having hard time understanding how below code is getting shipping address data for display on checkout/#payment page. It displays correct address when we go from shipping to payment page but ...
2
votes
0answers
40 views

store value in a variable via knockout loop in html

I am new to KO, in my html file I am printing a value like this - <!-- ko foreach: { data: JSON.parse($parent.options), as: 'option' } --> <!-- ko if: option.label === 'AAA' || option....
2
votes
0answers
83 views

Disable payment option in checkout when specific shipment is used via js only

I've disabled alost all payment modules when in store pickup i set as shippemnt. I'm using for this plugin for Magento\Payment\Model\Method\AbstractMethod and is working fine. Only one module payu/...
2
votes
0answers
109 views

How to update shipping methods on change of custom dropdown on cart page

I have created a custom dropdown above country dropdown on cart page. Now I want to update shipping methods list. I followed Devdocs to show custom field on address form (cart page). All in all I ...
2
votes
0answers
150 views

Magento 2 afterRender ko binding loses customer scope

I have a custom block rendered in header which displays the customer's available credit limit. <div data-bind="scope: 'customer'"> <div class="store-credit-limit" data-bind="style: { ...
2
votes
0answers
21 views

Trigger code on every popup

I wrote a specific code but it should run only when a popup is on. Not only a specific popup but all the popups on the site. How can I achieve it?
2
votes
0answers
45 views

How can I set Comment box as Required field In Checkout Page Magento 2

I have purchased one extension for Delivery date and comment box. Now I want to set Comment Box Mandatory, I have tried I think it uses Knockout JS so I am unable to set it mandatory. Any Help. My ...
2
votes
0answers
489 views

Magento 2 Knockout Shipping Method checked in shipping.html

I am looking for solution On checkout page where all shipping methods are loaded. File path is vendor/magento/module-checkout/view/frontend/web/template/shipping.html From above file we can see the ...
2
votes
0answers
905 views

Update Options of a Select Element Dynamically using Knockout Js

I am looking for updating a custom Select Option at Checkout. <select name="city" id="city" data-bind=" options: availableCities, optionsText: 'name', optionsCaption: 'Select City', ...
2
votes
0answers
115 views

minicart ko in magento2

Js file qtyOptions: ko.observableArray([]), initialize: function () { this._super(); for (var i = 1; i <= 4; i++) { this.qtyOptions.push(i); } return this; template file &...
2
votes
0answers
331 views

KO templates are not loading in Magento 2.1 application

I have an application which is running in cluster environment(2 nodes). Application is working properly in individual nodes but when I try to access it from common url none of the knockout templates ...
2
votes
0answers
284 views

Knockout JS custom scope binding

The Magento 2 documentation here states that you can use the custom Knockout JS scope binding in the standard format: <div data-bind="scope: 'name.of.component'"></div> But also in the ...
2
votes
0answers
149 views

Add input type file in html template using knockoutjs

I have created custom module in which I have created front-end template form using knockout js. I want to add input-type file . I want to save file in folder and store it's name in database on form ...
2
votes
0answers
452 views

Magento 2 Datepicker in checkout using knockout js

I need a datepicker for every product item that i have in checkout. Below is my code for js file: /** * Copyright © 2013-2017 Magento, Inc. All rights reserved. * See COPYING.txt for license details. ...
2
votes
0answers
184 views

Binding ui components to observables in magento 2

I'm developing a custom step in magento2 checkout. I'm adding new fields dynamically by injecting appropriate XML in a plugin. New fields are ui components, children of a group (called ...
2
votes
0answers
563 views

Magento2 - After moving billing address form is not shown

I have moved the billing address after the region customer-email with XML like this: <?xml version="1.0"?> <!-- /** * Copyright © 2016 Mageside. All rights reserved. * See COPYING.txt for ...
2
votes
0answers
163 views

Magento 2: Pre-populate some name and address fields using KnockoutJS

I would like to update the content of the firstname and surname fields on the checkout. The UI input fields already have the value data-bind (see below) which I'd like to target in my js/view file and ...
2
votes
0answers
160 views

How to fire jQuery event when all shipping methods are loaded in Magento2 checkout page?

I want to fire some jQuery event when all shipping methods are completely loaded on checkout page. Which function of which file is to be used? please help.
2
votes
0answers
327 views

Magento 2.1.2 - Product Backend EAV Attribute Field Enabled or Disabled Depends on Product Status

I have added an EAV attribute named disabled_date. I would like to attach an observer to the attribute field on product page where it is disabled if product status is enabled (1) and enabled if ...
2
votes
0answers
95 views

On Cart page, Estimate Shipping and Tax section not updating shipping rates on change of state and zipcode

My cart page only fetches shipping rates first time on the initial page load. After that changes in state and zip-code is not updating the shipping rates section. Can someone point out what can be ...
2
votes
0answers
1k views

Magento 2: How to debug on Checkout Pages when having KnockOut JS & Web Template

http://localhost/magento2/checkout/ vendor\magento\module-paypal\Model\Hostedpro\Request.php public function setPaymentMethod($paymentMethod) { $this->paymentMethod = $paymentMethod; ...
2
votes
0answers
158 views

Magento 2 trigger price change using Knockout JS in “Edit / Create Configurations”

How we can trigger the "price change" using Knockout JS in "Edit / Create Configurations" under the product creation module ? I can see that the values are coming from the "dynamic-rows-configurable....
2
votes
0answers
521 views

When to use Underscore.js vs Knockout.js for JS templating in M2?

I see that core M2 uses both Underscore.js and Knockout.js, although it looks like M2 core has extended base Knockout and added some new functionality to it. If I am building something that binds ...
2
votes
0answers
108 views

Use knockout.js in catalog page in magento 2

We are developing an extension for configurable products which provides the following functionality on product page. On the product view page of the configurable product, when the customer finishes ...
2
votes
0answers
3k views

Swatch customization issues

well we have heavily customized Magento 2 website. The swatch customizing is done in: app\code\My_Package\CustomSwatches\view\frontend\web\js\SwatchRenderer.js by overriding: vendor\magento\module-...
1
vote
0answers
24 views

Pass data from Helper Data to Knockout JS file Magento 2

How i can pass helper data to Knockout JS to show it on my html file. Actually i am working on Checkout page and i want to show the name of product owner on checkout summary. Any help would be ...
1
vote
0answers
13 views

UI Components - pass ids selection to listing selection

How do i pass a selection of ids to an insert-listing component to preselect certain rows. I have a dynamic rows component with entries related to the current product I'm editing. When click on a ...
1
vote
0answers
18 views

Address list at billing step

Hello Magento community this is my first question so go easy on me, I will try to be as accurate as possible but I am a noob front-end with Magento. What I am trying to achieve is: when user buys ...
1
vote
0answers
50 views

Magento 2:External js at checkout loading issue

I am trying to create digital signature at checkout page(just before place order button) in my custom module. I have tried with below code: app/code/Company/Signature/etc/module.xml <?xml ...
1
vote
0answers
21 views

Magento 2 : How to load payment methods in shipping step?

I need to show payment methods in shipping step in Magento 2.3 checkout, I have added done changes to file checkout_index_index.xml, and also I have added html code to shipping.html file. But I still ...
1
vote
0answers
29 views

Knockout binding js to template

I try render input field in my custom form element like <render args="ui/form/element/input"/> but then i get some js errors because elem userChanges and others dont exist(see https://github....
1
vote
0answers
17 views

Magento 2 Knokout.js remove element define in differen template file

I want to remove html element from template file using knockout.js code. I have write my code in shipping.js which is getting called on checkout page. In shipping.js under i have defined my variable ...
1
vote
0answers
33 views

Magento 2.3 checkout page hang up due to knockoutjs or underscore

After Magento 2.2.4 upgraded to Magento 2.3.0 checkout page is not working. Checkout page hang up browser and showing browser warning to stop it. When clicking on stop it is showing some jquery ...
1
vote
0answers
57 views

Magento 2 : add google map in checkout

I want to add google map in Magento 2 checkout page. Added API url and key to phtml using below code <referenceContainer name="after.body.start"> <block class="Test\Vendor\Block\...
1
vote
0answers
39 views

How to use javascript in ko template in magento 2?

I have a custom module which will overrride vendor\magento\module-checkout\view\frontend\web\template\shipping-address\shipping-method-item.html, here is the code <!-- /** * Copyright © Magento, ...