Magento 2 - How to override knockoutjs template?

Question

I try to override the following template from my own module

vendor\magento\module-checkout\view\frontend\web\template\minicart\item\default.html

but I don't find the file where I can override it, I searched the whole module-checkout folder for the place where the default.hmtl is added, but can't find it.

Is it possible to override the file?

Chirag Rajput · Answer 1 · 2020-08-11T09:18:33.297

1

You can override this by adding this folder to your theme:

Magento_Checkout/web/template/minicart

In this folder you can create the default.html file. After a change made in this file make sure you flush your browser cache to see the changes.

OR

After changes in default.html file, we have to deploy static file using command php bin/magento setup:static-content:deploy

Reference : Magento 2: How to override mini-cart default template html file?

edited Aug 11 '20 at 09:18

answered Aug 11 '20 at 09:07

Chirag Rajput

1,530
10
23

I tried to figure out how to override it in my module though, not theme. And whats the content.html file? Do you mean default.phtml? – Black Aug 11 '20 at 09:10
@Black, yes "default.html" – Chirag Rajput Aug 11 '20 at 09:18

Himanshu · Answer 2 · 2020-08-11T11:04:54.077

1

cretae requirejs-config.js

Copy default.html vendor\magento\module-checkout\view\frontend\web\template\minicart\item\default.html
past app/code/Vendor/Module/view\frontend\web\template\minicart\item\default.html

app/code/Vendor/Module/view/frontend/requirejs-config.js

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

edited Aug 11 '20 at 11:04

answered Aug 11 '20 at 09:18

Himanshu

978
8
12

Does not work for me – Black Aug 11 '20 at 09:55
override checkout_cart_sidebar_item_renderers.xml – Himanshu Aug 11 '20 at 10:40
Thats a duplicate of my answer now. – Black Aug 11 '20 at 11:01

score 1 · Answer 3 · answered Aug 27 '22 at 09:05

/**
 * @author Moazzam ALi
 * Created by PhpStorm
 * User: moazzam
 * Date: 30/7/22
 * Time: 12:27 AM
 */
var config = {
    map: {
        '*': {
            "Taxjar_SalesTax/template/suggested_address_template.html":
                "Vendor_Module/template/suggested_address_template.html"
        }
    }
};

Black · Accepted Answer · 2020-08-11T11:02:09.540

I searched for minicart/item and now I found:

vendor\magento\module-checkout\view\frontend\layout\checkout_cart_sidebar_item_renderers.xml

I override it like this:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="minicart">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="minicart_content" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="item.renderer" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                        <item name="template" xsi:type="string">Vendor_Module/minicart/item/default</item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Magento 2 - How to override knockoutjs template?

4 Answers4