Our Work

Add Static Content to minicart in Magento 2

Updated 2 months 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

Looking for Magento Developer?

Please Contact us if you have any Magento Implementation requirements. Hire dedicated Magento developers or Magento Development services from KTree. KTree is Best offshore Magento E-commerce development company with extensive experience in E-commerce development and Magento Plugins.

Request For Quote