How to override minicart in magento2 (Only two steps) - Magento Source24

How to override minicart in magento2 (Only two steps) - Magento Source24

Hello Friends In this Blog Post I'm Share with you to How to override minicart in magento2 

follow bellow steps to override minicart in magento2 

👉 Step1: Create a requirejs-config.js file in app\code\VendorName\ModuleName\view\frontend\requirejs-config.js

var config = {

    map: {

        '*': {

          'Magento_Checkout/template/minicart/item/default.html': 

              'Dww_Quote/template/minicart/item/default.html'

        }

  }

};

👉Step2: create a default.html file in app\code\VendorName\ModuleName\view\frontend\web\template\minicart\item\default.html

// write your code here

this is defalut code : Magento_Checkout\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}, html: $parent.getProductNameUnsanitizedHtml(product_name)"></a>

                <!-- /ko -->

                <!-- ko ifnot: product_has_url -->

                    <span data-bind="html: $parent.getProductNameUnsanitizedHtml(product_name)"></span>

                <!-- /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: $parents[1].getOptionValueUnsanitizedHtml(option.value.join('<br/>'))"></span>

                            <!-- /ko -->

                            <!-- ko if: (!Array.isArray(option.value) && ['file', 'html'].includes(option.option_type)) -->

                                <span data-bind="html: $parents[1].getOptionValueUnsanitizedHtml(option.value)"></span>

                            <!-- /ko -->

                            <!-- ko if: (!Array.isArray(option.value) && !['file', 'html'].includes(option.option_type)) -->

                            <span data-bind="text: 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>

    </div>

    <div class="message notice" if="$data.message">

        <div data-bind="text: $data.message"></div>

    </div>

</li>