5

Yesterday I was working with header minicart because I need to add some CMS block and some text but when I open app/design/frontend/package_name/theme_name/Magento_Checkout/templates/cart/minicart.phtml and I look into this file I didn't get anything but after that I got that minicart block is render using knockout.js.

Below is Minicart.phtml file.

<div data-block="minicart" class="minicart-wrapper">
<a class="action showcart" href="<?php /* @escapeNotVerified */ echo $block->getShoppingCartUrl(); ?>"
   data-bind="scope: 'minicart_content'">
    <span class="text"><?php /* @escapeNotVerified */ echo __('My Cart'); ?></span>
    <span class="counter qty empty"
          data-bind="css: { empty: !!getCartParam('summary_count') == false }, blockLoader: isLoading">
        <span class="counter-number"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
        <span class="counter-label">
        <!-- ko if: getCartParam('summary_count') -->
            <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
            <!-- ko i18n: 'items' --><!-- /ko -->
        <!-- /ko -->
        </span>
    </span>
</a>
<?php if ($block->getIsNeedToDisplaySideBar()): ?>
    <div class="block block-minicart empty"
         data-role="dropdownDialog"
         data-mage-init='{"dropdownDialog":{
            "appendTo":"[data-block=minicart]",
            "triggerTarget":".showcart",
            "timeout": "2000",
            "closeOnMouseLeave": false,
            "closeOnEscape": true,
            "triggerClass":"active",
            "parentClass":"active",
            "buttons":[]}}'>
        <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
            <!-- ko template: getTemplate() --><!-- /ko -->
        </div>
        <?php echo $block->getChildHtml('minicart.addons'); ?>
    </div>
<?php endif ?>
<script>
    window.checkout = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getConfig()); ?>;
</script>
<script type="text/x-magento-init">
{
    "[data-block='minicart']": {
        "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
    },
    "*": {
        "Magento_Ui/js/block-loader": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
    }
}
</script>

So I want to know How this minicart block (knockout.js) is work with magento2? I want to know code flow of knockout.js in Magento2.

And if I want to create custom module with knockout.js in Magento2 How can I do it?

  • 1
    Hi possibly this link will be useful for you. As knockout js concept is bit tricky to understand and explain. mage2.pro/t/topic/905 – Rushvi Jul 15 '16 at 11:20
2

The use of Knockout.js in Magento 2 is very complicated. Not something where one post here can make it clear.

But i would start here:

http://alanstorm.com/magento_2_javascript_init_scripts

And read his other two posts on the subject. It will at least give you an idea on what files are being used, what is easily worked with and what might not be possible given the current state of documenting on a Magento 2 site.

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.