PART 1.2.6 – Knockout basics


Knockout in Magento 2, Fundamentals Part 1 (by Stefan Ström) 

Chrome plugin Knockout context debugger

How to modify the checkout in M2

Post by Inchoo

Where are knockout used in M2?

Mostly for checkout related functionality:

  • Header cart (minicart)
  • Checkout

Knockout templates

The knockout templates are located in web/template

An example:

module-checkout/view/frontend/web/template/form/element/email.html (e-mail input field in the checkout)


Example on how to disable a component. 


Disable component

<referenceBlock name=“checkout.root”>


        <argument name=“jsLayout” xsi:type=“array”>

            <item name=“components” xsi:type=“array”>

                <item name=“checkout” xsi:type=“array”>

                    <item name=“children” xsi:type=“array”>

                        <item name=“authentication” xsi:type=“array”>

                            <item name=“config” xsi:type=“array”>

                                <item name=“componentDisabled” xsi:type=“boolean”>true</item>









Customizing knockout template inside theme

Overriding a knockout template is not that different from overriding a template file. 

Example of overriding the shipping template in the checkout:

Original file: module-checkout/view/frontend/web/template/shipping.html

Theme version: <theme_location>/Magento_Checkout/web/template/shipping.html 


Exercise 9.0

Move the ‘Go to checkout’ button to the bottom of the mini cart (below view and edit cart).