The Stack Overflow podcast is back! Listen to an interview with our new CEO.

Questions tagged [knockoutjs]

Denotes questions related to Knockout use in Magento2

Filter by
Sorted by
Tagged with
10
votes
2answers
10k 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
13k 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
13k 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
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 ...
7
votes
3answers
4k 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 ...
11
votes
4answers
8k 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
1answer
2k 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
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. ...
10
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, ...
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([ '...
4
votes
1answer
2k 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 ...
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 ...
29
votes
2answers
13k 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
5k 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
1k 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/...
6
votes
3answers
7k 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 ...
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
2answers
6k 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 &...
3
votes
1answer
3k 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
4k 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?
7
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
9k 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
3answers
4k 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
2answers
3k 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
290 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 ...
2
votes
0answers
57 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
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 ...
1
vote
1answer
442 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-...
0
votes
1answer
910 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
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
154 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 ...
19
votes
3answers
13k 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
7k 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 ...
8
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
3answers
9k 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-...
6
votes
1answer
5k 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
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 ...
10
votes
3answers
6k 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 ...
8
votes
1answer
272 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 ...
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
450 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.
3
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
2answers
2k 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/...
2
votes
3answers
7k 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) ...
2
votes
1answer
2k 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 ...
1
vote
1answer
1k 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
2answers
2k 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" ...