Questions tagged [knockoutjs]

Denotes questions related to Knockout use in Magento2

331 questions with no upvoted or accepted answers
Filter by
Sorted by
Tagged with
8
votes
1answer
2k 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
0answers
2k 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
2k 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 ...
5
votes
1answer
2k views

Why 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 ...
5
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+'-...
5
votes
1answer
100 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 ...
4
votes
0answers
157 views

Using Custom JS for magento 2 KO datepicker in checkout page error required field

I tried to add a custom datepicker with custom js in my Magento 2 checkout for delivery date, the custom js datepicker is showing and when i click the date it fills the value, but when i click next to ...
4
votes
1answer
638 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/...
4
votes
0answers
88 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-...
4
votes
0answers
370 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 ...
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
0answers
234 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 ...
3
votes
0answers
27 views

Magento2 Holepunch Cache for Pricing

I have a Magento 2 website which has been set up to allow customers to have their own pricing. However, as a result of this the FPC (for category and product pages) is now being generated uniquely for ...
3
votes
0answers
144 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) { '...
3
votes
1answer
695 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
1answer
135 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. <...
3
votes
0answers
472 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
2k 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
199 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
157 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
573 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
395 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
785 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
1k 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
1k 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
434 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. ...
2
votes
0answers
33 views

knockout data-bind issue on the Frontend Magento 2

I have added file-uploader component in the review form. I have used below code to add browse button in the form. <div class="upload-wrapper" data-bind="scope: 'uploader'"> ...
2
votes
0answers
20 views

Magento 2: How to bind an element in phtml with minicart js model function?

I want to print the items count in somewhere else, so i create a new phtml like this: <?php /** @var $block \Magento\Checkout\Block\Cart\Sidebar */ ?> <div class="test-cart" data-...
2
votes
0answers
14 views

Magento 2.3.4: Not able to search admin grids

Recently upgraded from 2.3.1 to 2.3.4-p2 and now we're not able to use the keyword search above admin grids like Catalog > Products, Sales > Orders, etc. We can still use the filter boxes, but ...
2
votes
0answers
71 views

Use knockoutjs in Ui component of Admin form

I have created a form using UI component on Admin side. If i want to add a .phtml then i can add the file this way. <htmlContent name="driven_form_design"> <block class="Magento\Backend\...
2
votes
1answer
74 views

Multiple form in admin form Magento 2

I'm using magento 2.3.4, I have a database structure like this: //event |event_id | name | +---------+-------+ | 1 | Art | | 2 | Expo3 | // score | event_id | judge | score |...
2
votes
0answers
118 views

Magento 2.3 - Always show reviews on pageload

I use the tab-view on the product page for mobile devices, but I show all the tabs open at once on the desktop view. This causes a problem with the reviews. The form for adding a review is shown, but ...
2
votes
0answers
222 views

How to update data input on checkout page in magento2 (knockout.js)

On the checkout page in Magento 2 After search data by finder code, it auto fill customers data. But when I click the "Next" button. It will show "This is a required field." In this post https://...
2
votes
1answer
274 views

How to get Order Id after place order in javascript?

I am defining placeOrder method in my payment method, here is my code: placeOrder: function (data, event) { var self = this; if (event) { event.preventDefault(); } if (this....
2
votes
0answers
33 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 ...
2
votes
0answers
43 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
85 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
218 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 ...
2
votes
0answers
198 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
254 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
535 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
0answers
347 views

Magento 2 Knockout Js Customer Name update issue after changing customer name

I am having strange issue. In header, along with Welcome message i am showing Customer full name. For that i am using knockout.js concept. <?php if($block->customerLoggedIn()): ?> <li ...
2
votes
1answer
942 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
430 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
22 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
320 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
87 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
126 views

Magento2 : knock out js

I would like to changes in checkout page address fields, how to remove the fields or update, the code is knockout js. How to modify this. <div class="address-information address-info-3-columns"&...
2
votes
1answer
178 views

How do I edit KO template in magento 2

I wish to edit /var/www/html/xxx/vendor/magento/module-checkout/view/frontend/web/template/payment-methods/list.html Exactly in below line, Because which is the responsible file to render the ...
2
votes
0answers
935 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 ...

1
2 3 4 5
7