Questions tagged [knockoutjs]

Denotes questions related to Knockout use in Magento2

Filter by
Sorted by
Tagged with
4
votes
2answers
1k views

How to add knockout js binding to custom template

We want to add proceed to checkout button on product detail page. We will show this checkout button when cart have items otherwise we will remove this. See this : http://www.awesomescreenshot....
5
votes
1answer
440 views

How to override Checkout sidebar and set custom customer attribute in it with address()?

I have created Custom attribute for Customer and override sidebar and Add Static Label but how to add my custom attribute value in its address() ? I have not added that attribute as customer_address ...
1
vote
1answer
510 views

How does a Magento 2 Grid Cell get it's value?

Looking at the customer grid in Magento 2's backend, it's not 100% clear to me how Magento's javascript code populates values in grid cells. For example, it appears the view model constructor for ...
2
votes
0answers
1k views

Magento 2: How to debug on Checkout Pages when having KnockOut JS & Web Template

http://localhost/magento2/checkout/ vendor\magento\module-paypal\Model\Hostedpro\Request.php public function setPaymentMethod($paymentMethod) { $this->paymentMethod = $paymentMethod; ...
2
votes
0answers
166 views

Magento 2 trigger price change using Knockout JS in “Edit / Create Configurations”

How we can trigger the "price change" using Knockout JS in "Edit / Create Configurations" under the product creation module ? I can see that the values are coming from the "dynamic-rows-configurable....
3
votes
3answers
804 views

Cannot read property `scopeLabel` of undefined on Product Detail Page

I'm using luma theme. Nothing haven't been changed I only installed latest version from Magento connect. Added test category and product. This problem is only on product detail page. Other pages works ...
4
votes
1answer
992 views

Magento 2.1. How to display select box instead of box in checkout shipping address?

As checkout page layout is mostly build in knockout.js and I have zero knowledge of knockout.js. I want to show shipping address in select box <select> instead of Box (ref to image - section 1) ...
3
votes
1answer
3k views

Magento 2: How to add an afterRender option to a template rendered by a LayoutProcessPlugin

I want to add an afterRender callback to the delivery_time_slot element. However I am not sure how to do this using the LayoutProcessorPlugin.php. Is this added through the LayoutProcessorPluging.php ...
0
votes
1answer
2k views

Magento2 how to create custom module to Show related products in minicart

Can anybody guide me how can I add the related products ti recently added item to cart in minicart in Magento2 I know that the magento2 minicart content is loaded by the Js layout. I have created ...
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 ...
3
votes
1answer
3k views

Magento 2 - Is there a way to have Magento refresh the quote data in checkout on the frontend?

Background I am working on a module that replaces the shipping address, shipping method, and payment steps during checkout with an external iframe solution. This is basically a replacement for ...
1
vote
1answer
332 views

Magento 2 change knockout js template order

How to change Magento 2 knockout js template order. I want to change these blocks order for order summary table: http://prntscr.com/ca9nbc Moving orders items block above summary table.
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 ...
11
votes
3answers
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 ...
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
4k 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
539 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
373 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
662 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
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, ...
2
votes
1answer
530 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
1k 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
374 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
886 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
817 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
2answers
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
5k 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
1k 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
361 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
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/...
3
votes
1answer
224 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 ...
3
votes
0answers
210 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
914 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 ...
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 ...