Our Work

Add Static Content to minicart in Magento 2

Updated 7 days ago

This article will explain how to add static content to minicart. Here you can learn how to edit  core template html files in custom module.

  • Create a module.
  • Create requirejs-config file
  • Edit template file

1.Module

1.1 Create module

Create module which is  extended from magento_checkout module.Please refer this article for Module Creation.
https://ktree.com/create-magento-2-module-custom.html

1.2 Folder structure 


 

1.3 List of changed files other than default files:

  1. app/code/KTree/Custom/view/frontend/requirejs-config.js

  2. app/code/KTree/Custom/view/frontend/web/template/minicart/item/default.html(copy and edit from source file(Magento_Checkout/template/minicart/item/default.html)

2. The way of overriding existing template files in requirejs-config.js

2.1 Create requirejs-config file

  • In Magento2, Magento_Checkout/template/minicart/item/default.html file have logic to show shopping cart items in minicart. So we are going to replace  Magento_Checkout/template/minicart/item/default.html file in our module using RequireJS.
  • By using map configurations we are replacing core file with our custom html file

2.1.1 Map

Map is used to provide a prefix to a module with the different Id. Format of map configuration.


map: {
   '<module name>': {
       '<Id>': '<JS file>'
   }
}

Here is an already exist module js file or you can use ‘*’.
here Id is use to alias JS file. It can be defined in two formats.
1.module specific: In this mapping is defined only for particular module.

Ex: 

map: {
   'module/ktree1': {
       'sample': 'sample1.js'
  }
deps: [
        	'jquery'
     ]
}

Here, if module/ktree1 require (‘sample’) then it returns sample1.js.
2. Globally: It can be used by any module.

map: {
   '*': {
       'sample': 'sample1.js'
   },
deps: [
        'jquery'
    ]
}
  • In this ‘*’ is used for globally, i.e. any module which ask for require(‘sample’), then it returns sample1.js.
  • Deps is used when require configurations is depend on other dependencies i.e jquery should be loaded before simple1.js.

In our example requirejs-config.js file will be like below

File: app/code/KTree/Custom/view/frontend/requirejs-config.js

var config = {
    map: {
      '*': {
        'Magento_Checkout/template/minicart/item/default.html':
            'KTree_Custom/template/minicart/item/default.html'
      }
    }
};

3.Edit template file
 Add your static content to following file
File:app/code/KTree/Custom/view/frontend/web/template/minicart/item/default.html

<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<li class="item product product-item" data-role="product-item">
    <div class="product">
        <!-- ko if: product_has_url -->
        <a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
            <!-- ko foreach: $parent.getRegion('itemImage') -->
                <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
            <!-- /ko -->
        </a>
        <!-- /ko -->
        <!-- ko ifnot: product_has_url -->
        <span class="product-item-photo">
            <!-- ko foreach: $parent.getRegion('itemImage') -->
                <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
            <!-- /ko -->
        </span>
        <!-- /ko -->
        <div class="product-item-details">
            <strong class="product-item-name">
                <!-- ko if: product_has_url -->
                <a data-bind="attr: {href: product_url}, text: product_name"></a>
                <!-- /ko -->
                <!-- ko ifnot: product_has_url -->
                    <!-- ko text: product_name --><!-- /ko -->
<!-- /ko -->
            </strong>
            <!-- ko if: options.length -->
            <div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
                <span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>
                <div data-role="content" class="content">
                    <strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
                    <dl class="product options list">
                        <!-- ko foreach: { data: options, as: 'option' } -->
                        <dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
                        <dd class="values">
                            <!-- ko if: Array.isArray(option.value) -->
                                <span data-bind="html: option.value.join('<br>')"></span>
                            <!-- /ko -->
                            <!-- ko ifnot: Array.isArray(option.value) -->
                                <span data-bind="html: option.value"></span>
                            <!-- /ko -->
                        </dd>
                        <!-- /ko -->
                    </dl>
                </div>
            </div>
            <!-- /ko -->
            <div class="product-item-pricing">
                <!-- ko if: canApplyMsrp -->
                <div class="details-map">
                    <span class="label" data-bind="i18n: 'Price'"></span>
                    <span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
                </div>
                <!-- /ko -->
                <!-- ko ifnot: canApplyMsrp -->
                <!-- ko foreach: $parent.getRegion('priceSidebar') -->
                    <!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
                <div class="details-qty qty">
                    <label class="label" data-bind="i18n: 'Qty', attr: {
                           for: 'cart-item-'+item_id+'-qty'}"></label>
                    <input data-bind="attr: {
                           id: 'cart-item-'+item_id+'-qty',
                           'data-cart-item': item_id,
                           'data-item-qty': qty,
                           'data-cart-item-id': product_sku
                           }, value: qty"
type="number"
                           size="4"
                           class="item-qty cart-item-qty">
                    <button data-bind="attr: {
                           id: 'update-cart-item-'+item_id,
                           'data-cart-item': item_id,
                           title: $t('Update')
                           }"
                            class="update-cart-item"
                            style="display: none">
                        <span data-bind="i18n: 'Update'"></span>
                    </button>
                </div>
            </div>
            <div class="product actions">
                <!-- ko if: is_visible_in_site_visibility -->
                <div class="primary">
                    <a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit">
                        <span data-bind="i18n: 'Edit'"></span>
                    </a>
                </div>
                <!-- /ko -->
                <div class="secondary">
                    <a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
                       class="action delete">
                        <span data-bind="i18n: 'Remove'"></span>
                    </a>
                </div>
            </div>
            <div>
              <span data-bind="i18n: 'pick a store'"></span>
              <!-- <select data-bind="options: availableStores,
                        optionsText: 'storeName',
                        value: selectedStore,
                        optionsCaption: 'select store'"></select> -->
                        <select  class="form-control">
                            <option>store - 1</option>
                            <option>store - 2</option>
                            <option>store - 3</option>
                            <option>store - 4</option>
                            <option>store - 5</option>
                          </select>
            </div>
        </div>
    </div>
</li>
  • The full source code can be downloaded from this Github link Add static content to minicart
  • After completion above steps, please run the "php bin/magento setup:upgrade" command and "php bin/magento setup:static-content:deploy"
  • The final output like below