1

app/design/frontend/Venustheme/fasony/Magento_Checkout/templates/cart/shipping.phtml`

Contains this code:

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php /** @var $block \Magento\Checkout\Block\Cart\Shipping */ ?>

<div id="block-shipping" class="block shipping" data-mage-init='{"collapsible":{"openedState": "active", "saveState": true}}'>
    <div class="title" data-role="title">
        <strong id="block-shipping-heading" role="heading" aria-level="2">
            <?php /* @escapeNotVerified */ echo $block->getQuote()->isVirtual() ? __('Estimate Tax') : __('Estimate Shipping and Tax') ?>
        </strong>
    </div>
    <div id="block-summary" data-bind="scope:'block-summary'" class="content" data-role="content" aria-labelledby="block-shipping-heading">
        <!-- ko template: getTemplate() --><!-- /ko -->
        <script type="text/x-magento-init">
            {
                "#block-summary": {
                    "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
                }
            }
        </script>
        <script>
            window.checkoutConfig = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getCheckoutConfig()); ?>;
            window.customerData = window.checkoutConfig.customerData;
            window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;
            require([
                'mage/url',
                'Magento_Ui/js/block-loader'
            ], function(url, blockLoader) {
                blockLoader("<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>");
                return url.setBaseUrl('<?php /* @escapeNotVerified */ echo $block->getBaseUrl();?>');
            })
        </script>
    </div>
</div>

What I want to know about is what is $block->getJsLayout(), what was the path for this layout ?

 <!-- ko template: getTemplate() --><!-- /ko -->
            <script type="text/x-magento-init">
                {
                    "#block-summary": {
                        "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
                    }
                }
            </script>
1

If we tried to view the Page Source, we will see a JSON layout.

Now, let's start to find where it comes.

vendor/magento/framework/View/Element/AbstractBlock.php

public function __construct(\Magento\Framework\View\Element\Context $context, array $data = []){
    ......
    if (isset($data['jsLayout'])) {
            $this->jsLayout = $data['jsLayout'];
            unset($data['jsLayout']);
    }
    .....
}  


/**
 * Retrieve serialized JS layout configuration ready to use in template
 *
 * @return string
 */
public function getJsLayout()
{
    return json_encode($this->jsLayout);
}

As we can see, the $jsLayout variable will be passed via $data array. It just applies the Dependence Injection concept to pass jsLayout to $data array. Now, take a look the layout xml. For example,

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

       <arguments>
                <argument name="jsLayout" xsi:type="array">
       ......

Sum up, the getJsLayout() will get the data from xml layout.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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