Questions tagged [knockoutjs]

Denotes questions related to Knockout use in Magento2

Filter by
Sorted by
Tagged with
0
votes
1answer
56 views

Magento 2: Where does M2 create its aliases? uiComponent, in particular?

In the Knockout/JS files, uiComponent's object is passed to the extending objects in numerous files. I'd like to have a look in the uiComponent file but I'm not sure where Magento creates its aliases ...
4
votes
1answer
8k views

Magento 2: Add custom binding to an element on the shipping.html knockout template

I want to extend the module-checkout/view/frontend/web/template/shipping.html so that I can add a new custom binding to the shipping method options so that on init I can trigger another action. I have ...
0
votes
1answer
5k 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 ...
1
vote
5answers
3k views

Minicart 2.1 Minicart doesn't show products added to the cart

I'm working on a Magento 2.1 shop with a custom theme. When I use the blank theme, everything works just fine. The moment I enable my own theme, but without overwriting the minicart templates I have ...
2
votes
0answers
563 views

When to use Underscore.js vs Knockout.js for JS templating in M2?

I see that core M2 uses both Underscore.js and Knockout.js, although it looks like M2 core has extended base Knockout and added some new functionality to it. If I am building something that binds ...
0
votes
1answer
390 views

How to add KnockoutJS Plugin to Magento2?

Goal: Add pager.js. pager.js is a JavaScript library based on KnockoutJS and jQuery that provides the possibility of creating single page applications in a declarative fashion - nesting subpages ...
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 ...
1
vote
0answers
1k views

Magento 2 checkout Shipping Prices missing

I am trying to get the shipping price to display on my checkout. It's accessed via knockout.js in the template Magento_Checkout/web/template/shipping.html (this is the standard shipped with Magento) ...
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 ...
0
votes
1answer
694 views

Magento 2 - Add a message to a ko template that is created through a LayoutProcessorPlugin

I need to add message "Need it by today? Anything is possible, it's just a phone call away" in a KO template. However, this template is created through the afterProcess method LayoutProcessPlugin.php ...
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 ...
2
votes
1answer
2k views

.trigger('contentUpdated') just for an element of the page

Say you load via ajax another product on the product page. There are some mage scripts that do not run and you need to run elem.trigger('contentUpdated') to make magento evaluate the <script type=...
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, ...
2
votes
1answer
550 views

Magento 2: AJAX / PHP files Knockout uses for Checkout

Anyone know what PHP files, or the AJAX scripts, Knockout uses to pull the product data from the database? Basically, I'm trying to work out how Knockout knows how much product X and product Y are. ...
3
votes
0answers
2k views

(Magento2) knockout.js:3012 Uncaught ReferenceError: Unable to process binding

On page loading the following error occurs. knockout.js:3012 Uncaught ReferenceError: Unable to process binding "attr: function (){return { id:'cart-item-'+item_id+'-...
1
vote
1answer
381 views

Magento 2 Knockout JS data binding issue

My Magento 2 check out page looks like this, seems it does not bind the knockout JS data. When I check the JavaScript console, there are no errors or issues. What could be the reason for that?
2
votes
1answer
928 views

How can i overwrite the summary block in magento2

I am trying to override the checkout - summary block. I want add custom text after product name. I am not able to find way it is calling and fetching data. I know it Knockout JS but i am not able to ...
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 ...
1
vote
0answers
835 views

Magento2- In Checkout Page Not Display Payment Instruction

JS File path : Test\Demo\view\frontend\web\js\view\payment\method-renderer\Webpay-method.js define( [ 'jquery', 'Magento_Checkout/js/view/payment/default', 'Magento_Checkout/js/action/...
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" ...
3
votes
3answers
2k views

Change Header Minicart container effect from dropdown to slide(right to left) in magento2

After added any product to cart we can see that item in minicart header. So when we click on minicart then it's show product with dropdown effect. I want to change this dropdown effect to slider from ...
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 ...
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....
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: '...
1
vote
1answer
6k views

how to pass dynamic values in knockout js template file?

Please look at https://github.com/sivajik34/Delivery-Signature-Magento2. app/code/Kensium/DeliverySign/view/frontend/web/template/checkout/shipping/delivery-signature.html <div data-bind="visible:...
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/...
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 ...
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 ...
2
votes
1answer
2k views

Passing data from a ui form component to included insertListing item

Is it possible to pass data available in a UI component in the form of a dataScope item: <field name="question"> <argument name="data" xsi:type="array"> <item name="config"...
3
votes
1answer
395 views

How Can I Resolve a RequireJS Alias in Magento 2?

From a Disqus comment on my website When I look at this file: vendor/magento/module-catalog/view/base/templates/product/price/tier_prices.phtml I see something like this <script type="text/...
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/...
3
votes
1answer
234 views

Is it possible / what is the recommended approach to add a new custom binding to knockout in Magento 2?

I understand Magento 2 registers a number of custom knockout bindings in the Magento_Ui module, specifically through the initialize script in: vendor/magento/module-ui/view/base/web/js/lib/ko/...
2
votes
3answers
3k views

Magento 2 - Compare Products Not Showing In Sidebar

On a new site build, I'm trying to figure out why the compare products information is not showing up in the sidebar for the category page or the customer account page. It a new M2 install with a ...
4
votes
0answers
216 views

Magento 2: Admin grid table - add new row on the fly?

I created a custom UI grid table in admin. And I have a form on the same page to add new item to my custom database table(with ajax). After I added new item I need it to immediately appear in this ...
0
votes
1answer
948 views

How to reload admin grid table with js?

Is there any way to reload custom admin ui grid with ajax? Just like it reloads when you for example sorting by clicking a column name. I just need this grid table to be updated with new data. Is ...
17
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 ...
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 ...
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/...
2
votes
2answers
970 views

Magento2 - Changes to Order Summary block are not appearing

When I edit the Order Summary block, I do not see my changes. I even modified the vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.phtml template directly for testing ...
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'...
11
votes
1answer
898 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:...
0
votes
1answer
130 views

How to add a span tag to template in the onepage checkout?

I need to add a span-Tag next to the radio-Buttons in the payment template of the checkout. And my question is HOW DO I DO THAT? I can't find any template that matchs. There are several templates for ...
2
votes
1answer
1k views

Extend a default Ui component in adminhtml

Is there any good example code on how to work with RequireJS and knockoutJS (built into magento2) for adding additional functionality to fields in the admin side? I'm looking for Magento docs and ...
1
vote
1answer
208 views

Magento2 Custom Template KnockoutJS

I have set up a custom template and all working fine apart from KO templating is not working in the custom theme so things lick the checkoutpage is not rendering. I have the following set: - One page ...
1
vote
1answer
650 views

How does Magento 2 process ko statements and how to use them?

In Magento 2 templates I've found some ko statements such as <form class="form form-shipping-address" id="co-shipping-form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}"> <...
2
votes
0answers
111 views

Use knockout.js in catalog page in magento 2

We are developing an extension for configurable products which provides the following functionality on product page. On the product view page of the configurable product, when the customer finishes ...
7
votes
1answer
3k 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, ...
3
votes
1answer
1k views

How to add an IMG in knockout html template

I am trying to show an image in the knockout template but I could not. This is what I have: <img data-bind="attr: {'src': getImage()}, src: getImage()" /> <p data-bind="html: ...
0
votes
0answers
113 views

how to delete an input field in knockoutjs template in magento2

On checkout page, there is a company field that I need to remove from the shipping address form. Furthermore, I need to change the city and region fields to make them dependent dropdowns. I have ...
2
votes
0answers
3k views

Swatch customization issues

well we have heavily customized Magento 2 website. The swatch customizing is done in: app\code\My_Package\CustomSwatches\view\frontend\web\js\SwatchRenderer.js by overriding: vendor\magento\module-...