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

10
votes
2answers
9k 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
12k 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/...
10
votes
2answers
5k 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 ...
6
votes
3answers
3k 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 ...
9
votes
2answers
12k 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 ...
6
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 instead of the product name. I have found the tempplate where it is displayed: vendor/magento/module-checkout/view/frontend/web/template/summary/item/...
3
votes
2answers
3k 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. ...
11
votes
4answers
4k 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, ...
0
votes
2answers
3k 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([ '...
12
votes
2answers
11k 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 ...
27
votes
2answers
12k 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="...
16
votes
3answers
4k 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/...
12
votes
2answers
955 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/...
11
votes
3answers
7k 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 ...
6
votes
3answers
6k 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 ...
1
vote
1answer
3k 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?
8
votes
1answer
2k 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 ...
4
votes
2answers
4k 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 &...
2
votes
2answers
7k 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 ...
1
vote
2answers
2k 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 ...
3
votes
0answers
256 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
2answers
2k 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 ...
1
vote
2answers
3k 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
1
vote
1answer
897 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 ...
0
votes
1answer
59 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
799 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/...
0
votes
1answer
2k 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, ...
18
votes
3answers
11k 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 ...
16
votes
3answers
6k 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' =>...
11
votes
1answer
2k 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 ...
7
votes
1answer
1k 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: '...
5
votes
1answer
1k 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 ...
5
votes
1answer
4k 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
1answer
2k 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 ...
10
votes
2answers
5k 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
262 views

What does the Magento_Ui/js/lib/knockout/extender/bound-nodes RequireJS Module Do?

The Knockout.js bootstrap module in Magento 2 includes the following module via a define dependency. Magento_Ui/js/lib/knockout/extender/bound-nodes Technically speaking, this module creates ...
4
votes
1answer
3k 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....
3
votes
4answers
2k views

Magento2 TypeError: cart is not a function

I ran into a issue where i could add products to cart and i got success message too but the minicart is not updating with the added items. I got below error in console, I have upgraded the magento to ...
3
votes
1answer
342 views

Working around knockout without need to compile

How can we work with knockout without having to compile the Magento every time? I have disabled all cache and set Magento on developer mode but still, it needs to compile and clear cache.
1
vote
2answers
965 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 ...
1
vote
2answers
3k views

Magento2 customer account navigation wishlist Items how to display in phtml

In app\code\Magento\Wishlist\view\frontend\layout\default.xmlfile,I find the block <referenceBlock name="top.links"> <block class="Magento\Wishlist\Block\Link" name="wish-list-link" ...
1
vote
1answer
918 views

How to access other UI components

I would like to exchange data and / or call methods of another UI component. How can I access another UI component in Magento 2 knockout JS ?
1
vote
1answer
1k views

Hide element(s) if input is empty

On the store view frontend, how would I be best to go about hiding/showing an element based upon an inputs value? I've been considering an attempt to extend collapsible.js, but am not sure if this is ...
0
votes
2answers
2k views

Datepicker Options in Knockout JS Binding is not working

In my HTML frontend form, I have included a date picker using Knockout JS data binding. But the date picker options is not loading. I want my date format should be like "02-Dec-1991". I gave my HTML ...
5
votes
1answer
1k views

Magento 2: How to display Product Available QTY on checkout Order Summary

I would like to know if there is any way, to show the Product(Added to cart) Available Qty in checkout page under Product's name in Order Summary Section in Magento 2. As per my knowledge so far, I ...
5
votes
3answers
8k views

What Programmatically Triggers Magento 2's Shipping Rates to Update

When you're filling out the Shipping Address form in Magento 2, periodically Magento will make an ajax request for the URL http://magento.example.com/rest/default/V1/guest-carts/[hash]/estimate-...
4
votes
2answers
217 views

Magento 2.2.4 = How to add new link 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 I want to add a link name as "Create an ...
3
votes
1answer
951 views

Magento 2 custom module override knockout template

How can we override a knockout template in a custom module? I know how we can do this in our own theme but I need this in a module. For example I like to override this file: vendor/magento/module-...
3
votes
0answers
117 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="...
2
votes
1answer
1k views

Magento 2.1 Minicart Knockout TypeError

I'm working on a Magento 2.1 project with the Navas theme. I can add products to the cart, but the minicart doesn't show any products.. I can only visit the cartpage by going directly to the page, a ...