How to Create a Magento 2 Mini Cart?

Debugging Methods

The hardest part of working with an html-template is that it doesn’t contain any information about UI-element that is used by the Knockout library for this template.

Phtml-templates also won’t provide you with this information. You don’t need to analyze configuration files to reveal it. All you need is to set a breakpoint in the template, enable the debugger and check the block that hides under the variable $this.

Setting a breakpoint in the html-template isn’t a suitable method since the Knockout library fills templates with information. In this case, the breakpoint won’t work.

I’ll share with you some other debugging methods, which don’t require exhausting Magento configuration and files examining.

Debugging Method #1

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

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’)”>
The block <if> inside the div-element <div class=”block-content”> is a Magento invention. It equals the Knockout command <!– ko if: getCartParam(‘summary_count’) –>

We need to find the UI-element that calls the getCartParam method. It’s time to insert the console.log command into the data-bind attribute.

We rewrite the code line 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. As a result, we see the next info in a browser console while the page load:

• 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 fills the html-template with data. This UI-element calls the getCartParam (‘summary_count’) method.

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

Debugging Method #2

We know about the UI-element and we need to check the returning result of the getCartParam method.

We need a link to the UI-element to do it. All of UI-elements links are stored in the registry. Run the reg = requirejs(‘uiRegistry’); command in your browser.

After the debugging info analysis on the UI-element, we see the 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’)

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

Extra information

As we saw in the example of using the <if args=”getCartParam(‘summary_count’)”> element, 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’) –>

Nevertheless, Magento elements look better on an IDE screen because they are more contrast than standard Knockout elements.

If you need more info about Magento 2 and Knockout integration check Alan Storm’s article.

Magento 2 Mini Cart Configuration in the Admin Panel

If you want to customize your mini cart, check its configuration in the admin panel first. You may find out that you don’t need extra features.

To configure your mini cart go tap Stores on the admin sidebarar> Configuration> Sales> Checkout> expand Shopping Cart Sidebar.

Here you can set Number of Items to Display Scrollbar and Maximum Number of Items to Display.

 

For example, if you set a value 4 for both fields, you get this:

Mobecls team provides a wide range of eCommerce development services, starting from SEO and design to custom eCommerce development. Our 10+ years of Magento expertise allow us to provide unique eCommerce solutions taking into account industry and business specifics. If you want to take your business to the next level, we’re ready to help!