Questions tagged [knockoutjs]

Denotes questions related to Knockout use in Magento2

239 questions with no upvoted or accepted answers
Filter by
Sorted by
Tagged with
7
votes
1answer
1k views

how to load or add js before require js in magento 2

I am trying to override default_head_blocks.xml like below vendor\magento\module-theme\view\frontend\layout\default_head_blocks.xml <?xml version="1.0"?> <!-- /** * Copyright © 2016 Magento....
7
votes
1answer
3k views

Magento 2 Add to cart frontend event listener

I am trying to find good solution to execute custom javascript when product is successfully added to cart. Also this custom javascript need information about product that was added to cart (sku, qty, ...
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 ...
5
votes
2answers
166 views

Magento 2 : How to debug knockoutjs getRegion() bindings

Shipping address is displayed using below knockout js code. I am having a hard time finding the back-end code that's setting data for getRegion('ship-to') function even though I could see the UI JS ...
5
votes
1answer
1k views

Magento 2: shipping methods not updated on changing of checkout fields

In the past when I fill one of the checkout fields then shipping method section under the checkout page refreshed and then updated like this: But now shipping method not updated by calling ajax (or ...
4
votes
1answer
824 views

Uncaught TypeError: Cannot read property 'apply' of undefined at Function.ko.observableArray.fn.(anonymous function) [as push]

I have created a custom attribute(multiselect) for product with the same filter type as category selection on Magento 2. Attribute selection is working fine when creating a new product however it is ...
4
votes
1answer
1k views

Magento 2.1. How to display select box instead of box in checkout shipping address?

As checkout page layout is mostly build in knockout.js and I have zero knowledge of knockout.js. I want to show shipping address in select box <select> instead of Box (ref to image - section 1) ...
4
votes
1answer
68 views

Magento 2, I Want to add or hide custom steps on checkout page

I have created 1 custom tab on the checkout page and it's working fine I follow below link to add the tab on cart page. Magento 2 - Add step on checkout Then after I have added a Create an account ...
3
votes
1answer
85 views

Magento 2 : 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....
3
votes
0answers
166 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
870 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
94 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
133 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
67 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
2answers
608 views

Magento 2 - Add success message with knockout

I need add an errorMessage or successMessage on checkout/cart after an jquery validation. I tried require file 'Magento_Ui/js/model/messageList' for this but not have success. My code: define( [ ...
3
votes
0answers
392 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
400 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
244 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
278 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
1answer
688 views

Custom Checkout Step Fields not in Post Data

I have created a new checkout step with 4 form fields. The step is called additional-order-info. I created the step and the form with the help of the devdocs for Magento 2(.1). I have also created ...
3
votes
0answers
906 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
966 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
1answer
352 views

How to add a custom data-bind function to a minicart item in Magento 2

I'm trying to add some functionality to the minicart product items. On product list and view I was able to add this throught requirejs/knockout. Now, I can't find how to work with the minicart item. ...
3
votes
0answers
2k 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
211 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
29 views

How to use ko.observable on change of data and run a js function Magento 2

How can I run a js function on change of data, So I have heard of knockoutjs ko.observable define([ 'uiComponent', 'ko', 'Magento_Checkout/js/model/totals' ], function (Component, ko, totals) { '...
2
votes
0answers
18 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
46 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
132 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
194 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
1answer
167 views

How to return value from knouckout js Ajax call

I have a knouckout js to return data to html template. But I can't able to return values from ajax call done function. My knouckout js like below, define( [ 'jquery', 'mage/url', ...
2
votes
1answer
257 views

Knockout js child components

I am making a custom module before adding a product on cart with 3 options : The upload option should display an upload form like : My initial idea was to make two knockout components : ...
2
votes
0answers
211 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
294 views

Injecting and calling custom knockout component in another component

I am using 2 components for multi-select and select input fields. Multiselect component - define([ 'underscore', 'uiRegistry', 'Magento_Ui/js/form/element/multiselect', 'Magento_Ui/...
2
votes
1answer
71 views

Magento 2.2.5 custom js not working when I call it from phtml file using uiComponent

I have created admin form using uiComponent. I have called phtml file using <htmlContent name="html_content"> in xml file. I tired to call custom.js using below code but its not working. <...
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
203 views

How do I show and hide cart items in the order summary sidebar of the magento 2 checkout?

I would like to display cart items in the order summary sidebar during the shipping stage with no show/hide toggle functionality. Then on reaching payment methods stage display the cart items in the ...
2
votes
0answers
61 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
569 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
992 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
143 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
1answer
1k views

Magento 2 UiRegistry can't get component element

this my checkout_index_index.xml <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/...
2
votes
1answer
710 views

Payment method with custom form in Knockout js

I've created a custom payment method successfully in Magento2. When this custom payment method selected, I need a form to display a text field and submit button that will hit some AJAX Api's using in ...
2
votes
0answers
372 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
334 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
153 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
487 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
191 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
624 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
238 views

Magento 2: Add custom Attribute in mini cart

I added custom discount on shopping cart page. Now I want to add custom discount and grand total on minicart magento 2.How can i do this.