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

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="...
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/...
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 ...
17
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' =>...
16
votes
1answer
9k views

How Does Magento 2 Apply KnockoutJS Bindings

Per a very cursory reading of the KnockoutJS documentation, initializing a very basic Knockout view looks like the following // This is a simple *viewmodel* - JavaScript that defines the data and ...
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/...
15
votes
1answer
2k views

Magento 2 new grid system template

I've been poking around in the new backend grid system of Magento on the Merchant beta 1.0.0 version. First of all I must say I'm impressed. Now you can select what columns to see, you can reorder ...
14
votes
3answers
3k views

checkout page refresh issue

First of all I want to give some screen shots to understand my issue. Now I want to add related code here. etc/frontend/di.xml <?xml version="1.0"?> <config xmlns:xsi="http://www....
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 ...
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/...
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 ...
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 ...
11
votes
1answer
795 views

How can I trigger code to run after knockoutjs render in adminhtml

UPDATE: You can access the viewmodels directly. If you need to trigger code to run after a render, use MutationObserver. I'll post my code as soon as I have a good working example. Original Question:...
10
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, ...
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 ...
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 ...
10
votes
3answers
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
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 ...
9
votes
2answers
2k views

Overriding template files in own theme, loaded through JS (Knockout.js)

Since the official Magento 2.0 forums aren't of any help, i'll post my question here as well. We're in the process of building our own theme based on the Magento Blank theme and we would like to ...
8
votes
2answers
657 views

Translating custom strings into theme knockout templates

I know that this issue has been dealt with several times in this forum Magento2 localisation Javascript Magento 2 - translating problem in JS templates Magento2 translating Javascript (KO) template ...
8
votes
1answer
263 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 ...
8
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: '...
7
votes
3answers
6k views

Magento 2 : Run/Execute Javascript after KnockoutJS has rendered all elements

I am trying to run custom Javascript code after the page is loaded completely with all the form elements/fields. I am trying this on Magento2 Admin while adding new product. For example: I ...
7
votes
2answers
2k views

Magento 2 : How to Detect Checkout Step Change

I am trying to figure out the best method of detecting a step change in Magento 2's checkout. For example going from shipping details to payment, or vice versa. I have done some digging and in ...
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 ...
7
votes
2answers
4k views

Magento 2 Knockout JS How to bind data from response of ajax call

I want to bind image source to following div. <div class="head_label"><img class="bank_photo" data-bind="attr:{src: bankImage}"></div> Following is my ajax call and their is my ...
7
votes
2answers
3k views

Magento 2 knockout js in checkout page

I want to customize checkout page but i am confused about calling template with knockout js. In Magento/Checkout/view/frontend/templates/onepage.phtml there is a script like this: <!-- ko template:...
7
votes
3answers
2k views

How to send data from html template to controller magento 2

My controller is calling but how to send data and retrieve data? My template: <!-- ko --> <tr class="totals fee excl"> <th class="mark" colspan="1" scope="row" data-bind="text: ...
7
votes
1answer
1k views

How to Disable previous checkout step when goes to next step in magento2

We have successfully added a new step in checkout page for magento2. Please find a code for custom JS for that step: Location of File: app/code/Vendor/CheckoutStep/view/frontend/web/js/view/...
7
votes
1answer
1k 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
1answer
2k 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, ...
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 ...
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 ...
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/...
6
votes
1answer
586 views

Magento 2 uiComponent view model

I have a uiComponent defined define( ['jquery', 'ko', 'uiComponent', 'Magento_Ui/js/modal/modal', 'domReady!'], function($, ko, Component, modal) { 'use strict'; return ...
6
votes
0answers
1k 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
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-...
5
votes
3answers
12k views

Magento2 : How to bind custom Knockout Method to a data-bind?

I need the product URL for each product in the checkouts cart. Therefore I want to edit vendor/magento/module-checkout/view/web/templates/summary/item/details.html and add my custom method there, ...
5
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 ...
5
votes
1answer
3k views

How do I load JavaScript function inside KnockoutJS html?

I am making changes to my Magento 2 cart. I want to run a particular JavaScript function once the registration.html file is loaded My file: /app/design/frontend/mytheme/default/Magento_Checkout/...
5
votes
1answer
2k views

Magento 2 Knockout JS - What does this._super() do?

Whilst researching Magento 2's implementation of Knockout JS I keep coming across this._super();. What does this do?
5
votes
1answer
3k views

How is product data passed from a Block to knockout template?

I'm investigating loading some product images via knockout templates. While looking for an example from the core I saw the minicart has this behaviour but right now I don't fully understand how the ...
5
votes
2answers
502 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"> &...
5
votes
1answer
639 views

Multiple knockout uiComponents should not share the same data / seperate view instances

I am initializing the same uiElement multiple times on the same page (on checkout_cart_index / one per cart item) <div class="configuration-check" data-mage-init= ' ...
5
votes
3answers
1k views

Magento 2: How can I get the parent UI Element?

I have a UI Element that has children. Is it possible for one UI Element to get the instantiated parent element? I know there is a property called parentName, but that simply returns a string. ...
5
votes
3answers
4k views

How do I stop Billing Address being set as shipping by default?

I just want the My billing and shipping address are the same checkbox to be unchecked by default and let the customer see the form to enter a new billing address. I think the answer lies within this ...
5
votes
1answer
251 views

Magento2 : Issues in default Enterprise Edition RMA extension

I am facing some issues in Magento2 EE default RMA extension. In create new return under "Return item information". 1) Form is not getting validated: reason to order, item condition, resolution ...
5
votes
2answers
2k views

How does the knockout-js part work

I still haven't figured how Magento 2 structures the knockout js part. For example how does the process work (step by step) of fetching the cart summary number. You can find this in app/code/Magento/...
5
votes
2answers
2k views

Magento 2: Checkout page sidebar summary – display item size

In Magento_2_Installation/vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html, data-bindings (via the knockout js files) places the name and qty of the item to be ...
5
votes
1answer
130 views

Magento 2 : How to concat a string variable to option value in knockout template which already bind to i18n string?

I've knockout template which contains the following line: <option value='industrial' data-bind="i18n: 'Industrial'"></option> anyone knows how to add variable to 'Industrial' eg. <...