Working on mini cart in Magento 2

I had to do light mini cart customizations to make it match the requirements. The challenge was that mini cart in Magento 2 is based on HTML-template loaded and filled by the js-library Knockout. For a newbie that doesn’t have enough experience in working with Magento 2, this task is quite complicated.

Magento 2 mini cart issues

Due to the js-library Knockout, there is an option of using html-templates instead of phtml-templates. Unfortunately, the visibility of the html-templates is worth than the visibility of phtml-templates. For example, this is the way that the part of the minicart.phtml template that displays mini cart block on the screen looks like:

<div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

The situation becomes more complicated when you reveal that there is no function getTemplate() in the js-scripts of the module Magento_Checkout.

First, you have to determine what UI-element will be using by Knockout for the DIV element. It is obvious here: scope with the name of the required UI-element is specified directly in the data-bind attribute. If there is no data-bind attribute, you have to inspect Magento configuration files to determine the UI-element. You also can use debugging methods for this purpose (they will be described below).

So, we know now that the function getTemplate() is called from the UI-element with the name minicart_content. The next step is to open source code of the page and find the script that describes the UI-element minicart_content and its child elements.

<script type="text/x-magento-init">
    {
        "[data-block='minicart']": {
            "Magento_Ui/js/core/app": {"components":{"minicart_content":{"children":{"subtotal.container":{"children":{"subtotal":{"children":{"subtotal.totals":
{"config":{"display_cart_subtotal_incl_tax":0,"display_cart_subtotal_excl_tax":1,"template":"Magento_Tax\/checkout\/minicart\/subtotal\/totals"},"children":
{"subtotal.totals.msrp":{"component":"Magento_Msrp\/js\/view\/checkout\/minicart\/subtotal\/totals","config":
{"displayArea":"minicart-subtotal-hidden","template":"Magento_Msrp\/checkout\/minicart\/subtotal\/totals"}}},
"component":"Magento_Tax\/js\/view\/checkout\/minicart\/subtotal\/totals"}},"component":"uiComponent","config":
{"template":"Magento_Checkout\/minicart\/subtotal"}}},"component":"uiComponent","config":{"displayArea":"subtotalContainer"}},"item.renderer":
{"component":"uiComponent","config":{"displayArea":"defaultRenderer","template":"Magento_Checkout\/minicart\/item\/default"},"children":{"item.image":
{"component":"Magento_Catalog\/js\/view\/image","config":{"template":"Magento_Catalog\/product\/image","displayArea":"itemImage"}},
"checkout.cart.item.price.sidebar":{"component":"uiComponent","config":
{"template":"Magento_Checkout\/minicart\/item\/price","displayArea":"priceSidebar"}}}},"extra_info":{"component":"uiComponent","config":
{"displayArea":"extraInfo"}},"promotion":{"component":"uiComponent","config":{"displayArea":"promotion"}}},"config":{"itemRenderer":
{"default":"defaultRenderer","simple":"defaultRenderer","virtual":"defaultRenderer"},"template":"Magento_Checkout\/minicart\/content"},"component":
"Magento_Checkout\/js\/view\/minicart"}},"types":[]}        },
        "*": {
            "Magento_Ui/js/block-loader": "http://et.magenmagic.com/static/version1500468461/frontend/Magenmagic/ettage/en_US/images/loader-1.gif" 
        }
    }
</script>

There is the html-template description which will be returned when the function getTemplate() is called:

"template":"Magento_Checkout\/minicart\/content" 

In this case, it means that the required template is in the file vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html

Debugging methods

The hardest part of working on html-template is that they do not contain the information about UI-element that is used by the Knockout library for this template.

This information is also absent in phtml-templates but you won’t need to analyze configuration files to reveal it. All you’ll need is to set a breakpoint in the template, enable the debugger and check what block is hidden under the variable $this.

Setting a breakpoint in the html-template isn’t a suitable method because the Knockout library fills the template with the information. The breakpoint won’t work in this case.

There are the others debugging methods that will help to specify the UI-element that will be used without exhausting Magento configuration files analyzing.

The debugging method #1

The first method is inserting a console.log command into the attribute data-bind.

Let’s take a look at it in html-template vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html:

<div class="block-content">

   <button type="button"

           id="btn-minicart-close"

           class="action close"

           data-action="close"

           data-bind="attr: { title: $t('Close') }">

       <span translate="'Close'"/>

   </button>


   <if args="getCartParam('summary_count')">

       <div class="items-total">

Here is the block <if args=”getCartParam(‘summary_count’)”>
inside the div-element <div class=”block-content”>. The block <if> is the Magento invention. It is equal to the Knockout command <!– ko if: getCartParam(‘summary_count’) –>

We need to know the UI-element that calls the method getCartParam. Here is the point when we need inserting the command console.log into the attribute data-bind.

We rewrite the code fragment in the following way:

<div class="block-content" data-bind="uniqueName: console.log($data)">

   <button type="button"

           id="btn-minicart-close"

           class="action close"

           data-action="close"

           data-bind="attr: { title: $t('Close') }">

       <span translate="'Close'"/>

   </button>


   <if args="getCartParam('summary_count')">

       <div class="items-total">

We change only the first line but due to this when the page is loading we can see the following info in a browser console:

• UiClass {_super: undefined, ignoreTmpls: {…}, _requesetd: {…}, containers: Array(0), exports: {…}, …}

  • component:"Magento_Checkout/js/view/minicart"

  • containers:[]

  • dataScope:""

  • elems:ƒ observable()

  • exports:{}

  • extendProvider:true

  • hasUnique:undefined

  • ignoreTmpls:{templates: true, childDefaults: true}

  • imports:{}

  • index:"minicart_content"

  • initChildCount:4

  • itemRenderer:{default: "defaultRenderer", simple: "defaultRenderer", virtual: "defaultRenderer"}

  • links:{}

  • listens:{}

  • maps:{imports: {…}, exports: {…}}

  • modules:{storage: "localStorage"}

  • name:"minicart_content"

  • ns:"minicart_content"

  • parentName:""

  • parentScope:""

  • provider:""

  • regions:{subtotalContainer: ƒ, defaultRenderer: ƒ, extraInfo: ƒ, promotion: ƒ, sign-in-popup: ƒ}

  • registerNodes:true

  • source:undefined

  • statefull:{}

  • storage:ƒ ()

  • storageConfig:{provider: "localStorage", namespace: "minicart_content", path: "localStorage:minicart_content"}

  • template:"Magento_Checkout/minicart/content"

  • tracks:{}

  • _elems:(4) [UiClass, UiClass, UiClass, UiClass]

  • _requesetd:{localStorage: ƒ}

  • _super:undefined

__proto__:UiClass

Now we have the detailed info on UI-element that is using for filling the html-template with the data. This UI-element calls the method getCartParam(‘summary_count’).

At last, we need to check the result that the method’s calling returns.

The debugging method #2

We have the info on UI-element, and we need to check the returning result of the method getCartParam.

The link to the UI-element required for this. All of UI-elements links stored at the registry. Run the command in your browser: reg = requirejs(‘uiRegistry’);

After analyzing the debugging info on UI-element, we see the following line: index:“minicart_content“

We can easily get the link to the UI-element in the registry using this index. Run the command in your browser: longDesiredReference = reg.get(‘minicart_content’)

We can test the calling of any method of the UI-element in a browser after this, including the method getCartParam: longDesiredReference.getCartParam(‘summary_count’)

Extra information

As we saw in the example of using the element <if args=”getCartParam(‘summary_count’)”>, Magento developers decided to extend the capabilities of calling Knockout library with the new elements.

Using these elements isn’t a necessity, you can use standard Knockout elements like <!– ko if: getCartParam(‘summary_count’) –>
But Magento elements look better on an IDE screen because they are more contrast than standard Knockout elements.

More information about Magento 2 and Knockout integration you can get in the Alan Storm’s article.