Questions tagged [knockoutjs]

Denotes questions related to Knockout use in Magento2

Filter by
Sorted by
Tagged with
13
votes
2answers
16k 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 ...
27
votes
2answers
15k 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
4answers
6k 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 ...
12
votes
2answers
20k 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
7k 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 ...
8
votes
1answer
4k 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
15k 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 ...
5
votes
4answers
8k 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
3
votes
2answers
5k 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
6k 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([ '...
1
vote
3answers
5k 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
1answer
376 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
13k 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 ...
33
votes
2answers
22k 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/...
18
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
6k 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, ...
8
votes
3answers
13k 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
1answer
7k 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....
8
votes
1answer
4k 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 ...
7
votes
2answers
13k 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 &...
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'...
2
votes
2answers
2k 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/...
1
vote
1answer
7k 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
3k 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-...
8
votes
4answers
15k 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
13k 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 ...
4
votes
2answers
4k 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 <...
3
votes
1answer
335 views

Add custom knockout component to checkout sidebar in Magento 2

I'd like to know what is the best approach to add a custom knockout component to the checkout sidebar in Magento 2, an example assuming we already have a custom module would be great UPDATE: As I ...
2
votes
1answer
1k 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
1answer
7k views

Magento 2: New Checkout step – Shipping Method prices not showing

I would like to add a new Checkout step to the Checkout page but would like to place it between the customer's shipping details (name, address, email) and the shipping methods radio buttons. To do ...
4
votes
1answer
4k 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
0answers
430 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
0answers
100 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
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
1answer
2k 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
0answers
52 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
296 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
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
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/...
24
votes
3answers
18k 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 ...
18
votes
3answers
11k 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' =>...
7
votes
2answers
4k 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"> &...
13
votes
1answer
4k 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 ...
11
votes
2answers
8k 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, ...
4
votes
2answers
5k 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
2answers
2k 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
564 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 ...
15
votes
3answers
11k 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 ...