PART 1.2.6 – Knockout basics

Resources:

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

Chrome plugin Knockout context debugger https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof?hl=en

How to modify the checkout in M2 http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_overview.html

Post by Inchoo http://inchoo.net/magento-2/knockout-js-in-magento-2/

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)

XML

Example on how to disable a component. 

module-checkout/view/frontend/layout/checkout_index_index.xml 

Disable component

<referenceBlock name=“checkout.root”>

    <arguments>

        <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>

                            </item>

                        </item>

                    </item>

                </item>

            </item>

        </argument>

    </arguments>

</referenceBlock>


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).

Advertisements