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: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
    "#checkout": {
        "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>

What is the meaning of this script?

  • Welcome to Magento StackExchange :). What exactly you want to achieve? Please explain in question
    – Jackson
    Commented Dec 13, 2016 at 3:55
  • Hi @AnkitShah i want to know where is html file that called by knockout js
    – user48215
    Commented Dec 13, 2016 at 3:58
  • magento\vendor\magento\module-checkout\view\frontend\requirejs-config.js
    – Jackson
    Commented Dec 13, 2016 at 4:04
  • @AnkitShah I am not understand, that file contains js file.
    – user48215
    Commented Dec 13, 2016 at 4:16
  • U r finding <?php /* @escapeNotVerified */ echo $block->getJsLayout();?> where this is coming from? magento\vendor\magento\module-checkout\Block\Onepage.php public function getJsLayout()
    – Jackson
    Commented Dec 13, 2016 at 6:44

2 Answers 2



The template it calls is magento/module-checkout/view/frontend/web/template/onepage.html.

My research is below.

What does this script do?

"#checkout": {
    "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>

This informs Magento to call the JS layout if the #checkout element exists on the page.

<!-- ko template: getTemplate() --><!-- /ko -->

The above code tells Magento to render a template, now how does it know which template to render? If you look at the parent div you'll see this code:


This is informing Magento that the nested code is in relation of the checkout (it does more than this but I'm not going too far into it).

Find the template

The template can be defined within the text/x-magento-init tag, but Magento don't usually do it this way as you can see. Magento usually do it via the XML method, which is what this line does:


This gets the components configuration from the XML, so let's take a look at that.

If you search vendor/magento/module-checkout/view/frontend/layout for onepage.phtml it should return magento/module-checkout/view/frontend/layout/checkout_index_index.xml. So let's look in here for the config.

Nested within checkout.root you will see a lot of <argument> tags, if you look at this line - <item name="checkout" xsi:type="array"> this relates to the scope we saw earlier. Within this there is a line that defines a template:

<item name="template" xsi:type="string">Magento_Checkout/onepage</item>

So this means the getTemplate() call is returning:


As you can tell by the XML file UI components can be pretty overwhelming, there is also a lot more that I've left out it could go on forever and I don't have a good understanding of all aspects yet. But hopefully this points you in the right direction.


To call a JS component on a HTML element without direct access to the element or with no relation to a certain element, Magento use the tag.

See http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_init.html for more details

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.