Our Work
200+ Enterprises across globally trust KTree for their Web & Mobile application Development needs.See What We Do
Updated today
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 module which is extended from magento_checkout module.Please refer this article for Module Creation.
https://ktree.com/create-magento-2-module-custom.html
app/code/KTree/Custom/view/frontend/requirejs-config.js
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)
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 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>
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