Questions tagged [knockoutjs]

Denotes questions related to Knockout use in Magento2

Filter by
Sorted by
Tagged with
12
votes
2answers
12k views

How to use Knockout JS within Magento 2

My problem: I am attempting to write a small Knockout JS app within Magento 2, I'm struggling to initialise the app as when I use ko.applyBindings(AppViewModel, document.getElementById("koTest")); it ...
24
votes
2answers
14k views

Magento2 translating Javascript (KO) template text

I am trying to add a translation for the text <!-- ko i18n: 'Store credit available' --><!-- /ko --> present in vendor/magento/module-customer-balance/view/frontend/web/template/payment/...
12
votes
2answers
17k views

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

I want to customize my minicart in Magento 2. I need to add 3 attributes: SKU, Manufacturer, and Manufacturer part number. These are existing attributes. I see where to add the output values but not ...
10
votes
2answers
6k views

Getting the product SKU in the header mini-cart

I want to be able to display the product SKU in the mini-cart of a Magento 2 site. But I'm not sure how to use KnockoutJS to pull in additional product information. The template that is being called ...
9
votes
3answers
5k views

Hide messages after certain interval

How to hide notification messages like success message after adding product to cart or any error messages or notices after few seconds after they appear on the the frontend using knockout js. Example ...
8
votes
1answer
3k views

Magento2 - How can I display a product attribute value in Order Summary block?

I am trying to display a product attribute value instead of the product name. I have found the tempplate where it is displayed: vendor/magento/module-checkout/view/frontend/web/template/summary/item/...
16
votes
4answers
12k views

Add custom product attribute to checkout summary Magento 2

I am trying to add a custom product attribute to the list of items on the summary section in the checkout in Magento 2. The template file is at Magento_Checkout/web/template/summary/item/details.html ...
3
votes
2answers
4k views

How to extend js class/method of checkout model class in magento 2

Basically I need to some method overwrite/extend of following Js class. magento/module-checkout/view/frontend/web/js/model/step-navigator.js Overwrite of this class through requirejs working fine. ...
2
votes
2answers
5k views

Magento 2 & JQuery.UI.Autocomplete

I would like to use JQuery.UI.Autocomplete component in my module for Magento 2. Also, I am using KO.js for the user interface of my application. So, I have added a custom binding for KO: define([ '...
4
votes
1answer
3k views

Use a dropdown select for the shipping address on the Onepage Checkout

In Magento 2, I would like to be able to select the shipping address with a dropdown, similar to how you can if you choose to change the billing address. This is how it currently works: I would like ...
3
votes
1answer
93 views

How to bind an event handler to 'street[0]' input on the checkout page?

I've been trying to ensure an alert displays on a user typing in PO BOX number in the street address field on the checkout page, saying we don't ship to PO BOX. My jQuery code doesn't seem to bind a ...
12
votes
2answers
12k views

magento2 knockoutjs custom template binding

I'm trying to understand knockoutjs in magento2.especially custom template binding.I'm not able to get idea flow of rendering this. Can any one have idea how it works? atleast Where can I find ...
32
votes
2answers
18k views

In Magento2 what is <script type=“text/x-magento-init”>?

I am new to Magento2 and our organisation has just get the EE licence. I have installed it on my local machine and the default template spits out the following mixed in with HMTL: <script type="...
18
votes
2answers
2k views

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

As near as I can tell, when you view a Grid in Magento's backend, the following "loaded over XHR" KnockoutJS template is what starts rendering things File: vendor/magento//module-ui/view/base/web/...
17
votes
3answers
7k views

What are the “source” Items in UI Component Files

In Magento 2's UI Form Component configuration files, you'll often see a item attribute with the same of source -- <item name="source" xsi:type="string">block</item> below. #File: vendor/...
11
votes
4answers
5k views

How to specify skin image path in Knockout HTML template?

I'm trying to add an icon image in the Magento_Paypal/web/template/payment/paypal-express.html template. The icon is located in web/images. I would like to use the equivalent of the following code, ...
7
votes
3answers
10k views

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

How can we override Magento/Checkout/view/frontend/web/js/view/shipping.js file? I need to add some custom code to selectShippingMethod function so i can hide/show a block if a specific shipping ...
7
votes
2answers
10k views

Knockout If-else condition inside html file in Magento 2

I am customizing the shopping cart page, Here I worked knockout js and html code file. I successfully wrote If statement by below code. <!-- ko if: isFreeShipping() --> //My Code goes here &...
7
votes
1answer
3k views

How does Magento 2's initObservable function work?

How does Magento 2's initObservable function work? The more detail the better as I feel not many people understand the KO implementation and with the checkout being built with it I think it's ...
5
votes
1answer
2k views

Magento 2 : How can I upload files of dynamically added file input fields in the admin

Short story: I have a form in my admin in which I can dynamically add multiple file upload fields in the admin. This mechanism is built with Knockout. But when I submit the form the files are not ...
3
votes
1answer
4k views

How to overwrite lib template file - Magento 2

How can the HTML files from the library be overwritten? I need to overwrite this template: lib/web/mage/gallery/gallery.html I have tried placing the file in my own theme in the below locations, I'...
1
vote
1answer
5k views

Magento 2: how to send ajax request in knockout js?

We have one button on checkout page to find address from our API. We want to send one ajax request to that API to get some data. How do we send ajax request from knockout js?
5
votes
3answers
6k views

Best Way Of Getting Base URL Inside KnockoutJS .html File

How can I get the base URL inside a KnockoutJS HTML file? See file below: app/design/frontend/<Vendor>/<Theme>/Magento_Checkout/web/template/<Filename>.html
4
votes
1answer
5k views

Magento 2: Pass data in checkout

I found that all knockout JS config data are coming from window.checkoutConfig. Then I check onepage.phtml and found that they used this code to store data in window.checkoutConfig window....
4
votes
2answers
11k views

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

For my custom module i'm making a ajax call. during this ajax call a additional call ../customer/section/load/?sections=messages&update_section_id=true&_=1485355389960 getting triggered. Not ...
3
votes
2answers
3k views

Magento 2: How to remove Tooltips from checkout page?

I tried to remove tooltip in several ways but anything worked. What's the XML code needed to do this and in which xml file do i have to make the change? Here is one of my attempts <...
2
votes
1answer
790 views

Magento 2 : From where (PHP) is the checkout billing address options drop down being populated?

From where is the checkout billing address options drop down being populated? How can I control the options? EDIT: Found root/vendor/magento/module-checkout/view/frontend/web/js/view/billing-...
1
vote
3answers
4k views

Remove Shipping Estimate Block From Cart Summary

I am having trouble removing the block-shipping from the cart summary in Magento2. This block allows users to obtain a shipping estimate on the cart page. The rest of the summary contents should ...
1
vote
2answers
4k views

Magento 2 How to bind knockout event on ajax html response

I have created custom functionality on item form on cart page like increment/decrement qty, remove product with a custom popup, custom move to wishlist by knockout js. For knockout events, I created ...
3
votes
0answers
378 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/...
2
votes
1answer
1k views

Validation Error with jQuery-UI Autocomplete and KnockoutJs - Magento 2

The Problem: I've implemented jQuery-ui Autocomplete with Knockout Js in Checkout Page but some input fields that are binded to my Component throw a validation error ("Required Field") when i update ...
2
votes
2answers
3k views

Magento 2 - Add step on checkout

I'm trying to add a new step to the normal workflow of magento 2 checkout, I follow the tutorial on magento dev page (http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html) but ...
2
votes
0answers
83 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 ...
1
vote
2answers
561 views

Changing Address list to dropdown select on checkout

I have this code on Magento_NegotiableQuote/web/js/view/shipping-address/list.js define([ 'jquery', 'ko', 'underscore', 'mageUtils', 'uiLayout', 'Magento_Checkout/js/view/...
0
votes
0answers
39 views

Magento 2:Add another new Custom mini-cart?

I want to add new Minicart like shown in the following screenshot, using KnockOut Js, Give me some logic how can I cater to this problem
0
votes
1answer
3k views

Magento 2: Override checkout/onepage template of Luma theme

I have created a custom theme, let say Namespace/customtheme based on Magento/Luma theme and copied onepage.phtml template of Magento_Checkout module in custom theme. After overriding onepage.phtml, ...
0
votes
1answer
231 views

Adding link to the Checkout button in magento2

I need to add external link to the "New Address" button in checkout. Found the button html is loading from this file. vendor\magento\module-checkout\view\frontend\web\template\shipping.html How ...
0
votes
1answer
1k views

Magento2 - How can I display a product attribute value in Order Summary block?

I am trying to display a product attribute value - SKU in Order Summary block. I have found the template where it is displayed: vendor/magento/module-checkout/view/frontend/web/template/summary/item/...
22
votes
3answers
15k views

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

Many Magento backend pages contain the following in their source code <!-- ko template: getTemplate() --><!-- /ko --> I understand (or think I do?) that <!-- ko template is a ...
17
votes
3answers
9k views

Magento 2 add custom product attribute validation from install script

[ 'type' => 'int', 'backend' => '', 'frontend' => '', 'label' => 'XXXX', 'input' => 'text', 'frontend_class' => 'validate-greater-than-zero', 'source' => '', 'global' =>...
6
votes
2answers
2k views

How to debug in ko template in magento 2?

Here is the code in \vendor\magento\module-checkout\view\frontend\web\template\shipping-address\custom-method-item-template.html <tbody collapsible="as: '$collapsible_' + method.method_code"> &...
12
votes
1answer
3k views

How to share Knockout JS observables between UI Components

I understand how to use imports: {} and exports: {} to share a UI components properties, such as: defaults: { exports: { shouldShowMessage: '${$.component}' } } Which returns the ...
1
vote
1answer
345 views

How to add Cancel/Ok button within Minicart and remove popup

I want to remove the delete button that is in below screenshot And add to button Cancel/Ok within minicart, not in popup like magneto by default functionality. just want to add button on mincart not ...
13
votes
3answers
8k views

Magento 2: Move place order button from payment to sidebar on checkout page?

I want to move the place order button from the payment to sidebar on checkout page. Anyone can give me a suggestion? Edit: Is this even possible (with the answer/approach provided)? From my ...
9
votes
1answer
2k views

Magento 2: What Populates “elems” in a UI Component

The top level KnockoutJS template of listing UI Component looks like this <!-- File: vendor/magento//module-ui/view/base/web/templates/collection.html --> <each args="data: elems, as: '...
6
votes
1answer
6k views

Magento 2 add custom data to checkout

I am trying to add some additonal data under checkout items summary (right sidebar). I am not figuring out how to get dynamic data from maybe Block (or other way). Here it is what I have already ...
4
votes
3answers
9k views

How to change the order of the billing address fields on checkout page in Magento 2?

I want to change the ordering of Address fields for both shipping address and billing address on checkout page I have changed the order of shipping Address and is working fine (thanks to this answer) ...
4
votes
1answer
3k views

Magento 2 what is use of knockout.js?

I am new to Magento 2. Need help to understand the concept of the knockout.js. Why Magento 2 has used knockout.js? I did try to understand it and did check this useful articles: How knockout.js ...
3
votes
2answers
4k views

How to initialize a block loader on an element which is being loaded by knockout.js in Magento 2?

I'm trying to implement a "block loader" animation on the cart summary element on the cart page while the cart totals are loading. The template file which loads this is Magento_Checkout/templates/...
1
vote
2answers
155 views

Magento 2 knockout js translation is not working

I'm using Magento 2.3.4 I'm looking at the translation issue for the last few days but I didn't get any answer. I have used mageplaza one step checkout module. Very recently I have upgraded the ...