Magento – Magento 2 override minicart.phtml in custom module

knockoutjsmagento2mini-carttemplate

I'm trying to override minicart.phtml file from Magento2\vendor\magento\module-checkout\view\frontend\templates\cart\minicart.phtml to my custom module

Magento2\vendor\XXXX\YYYY\view\frontend\templates\cart\minicart.phtml

I copied everything from default.xml from Magento2\vendor\magento\module-checkout\view\frontend\layout\default.xml to my custom module layout Magento2\vendor\XXXX\YYYY\view\frontend\layout\default.xml with my custom template file path. Below is the layout file with Updated template path,

<?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">
    <update handle="checkout_cart_sidebar_item_renderers"/>
    <update handle="checkout_cart_sidebar_item_price_renderers"/>
    <update handle="checkout_cart_sidebar_total_renderers"/>
    <body>
        <referenceBlock name="head.components">
            <block class="Magento\Framework\View\Element\Js\Components" name="checkout_page_head_components" template="Magento_Checkout::js/components.phtml"/>
        </referenceBlock>
        <referenceContainer name="header-wrapper">
            <block class="Magento\Checkout\Block\Cart\Sidebar" name="minicart" as="minicart" after="logo" template="XXXXXX_YYYYYY::cart/minicart.phtml">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="types" xsi:type="array"/>
                        <item name="components" xsi:type="array">
                            <item name="minicart_content" xsi:type="array">
                                <item name="component" xsi:type="string">Magento_Checkout/js/view/minicart</item>
                                <item name="config" xsi:type="array">
                                    <item name="template" xsi:type="string">Magento_Checkout/minicart/content</item>
                                </item>
                                <item name="children" xsi:type="array">
                                    <item name="subtotal.container" xsi:type="array">
                                        <item name="component" xsi:type="string">uiComponent</item>
                                        <item name="config" xsi:type="array">
                                            <item name="displayArea" xsi:type="string">subtotalContainer</item>
                                        </item>
                                        <item name="children" xsi:type="array">
                                            <item name="subtotal" xsi:type="array">
                                                <item name="component" xsi:type="string">uiComponent</item>
                                                <item name="config" xsi:type="array">
                                                    <item name="template" xsi:type="string">Magento_Checkout/minicart/subtotal</item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                    <item name="extra_info" xsi:type="array">
                                        <item name="component" xsi:type="string">uiComponent</item>
                                        <item name="config" xsi:type="array">
                                            <item name="displayArea" xsi:type="string">extraInfo</item>
                                        </item>
                                    </item>
                                    <item name="promotion" xsi:type="array">
                                        <item name="component" xsi:type="string">uiComponent</item>
                                        <item name="config" xsi:type="array">
                                            <item name="displayArea" xsi:type="string">promotion</item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
                <container name="minicart.addons" label="Mini-cart promotion block"/>
            </block>
        </referenceContainer>
    </body>
</page>

Here you can see my updated template path,

<block class="Magento\Checkout\Block\Cart\Sidebar" name="minicart" as="minicart" after="logo" template="XXXXXX_YYYYYY::cart/minicart.phtml">

Then I cleared cache, upgrade, static content deploy .. Then I'm getting below error in store front.

Uncaught TypeError: Unable to process binding "if: function(){return getCartParam('summary_count') }"
Message: Unable to process binding "foreach: function(){return { data:getCartItems(),as:'item'} }"
Message: Unable to process binding "foreach: function(){return $parent.getRegion($parent.getItemRenderer(item.product_type)) }"
Message: Cannot read property 'simple' of undefined
    at UiClass.getItemRenderer (minicart.js:139)
    at foreach (eval at createBindingsStringEvaluator (knockout.js:2624), <anonymous>:3:93)

I put some logs in minicart.phtml and its loading . It's seems like minicart js is not loading properly…Any idea .?

Update:1

I put some logs in minicart.js and it's loading. So I think it might have problem with content.html. I'm using Magento 2.2.5 with default Luma theme

Best Answer

You can also try below method to override minicart.phtml

Go to :

\vendor\magento\module-checkout\view\frontend\templates\cart\

and copy minicart.phtml file

After keep that file here

\Your_Vendor\Your_Theme\Magento_Checkout\templates\cart\

Clear cache and check...

Related Solutions

Magento 2 – How to Rewrite TierPrice Block

Suppose package:Learning and module: Custom

Module.xml looks like

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Learning_Custom" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

And then create a layout xml following path -> app/code/Learning/Custom/view/frontend/layout/catalog_product_prices.xml

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/layout_generic.xsd">
    <referenceBlock name="render.product.prices">
        <arguments>
            <argument name="default" xsi:type="array">
                <item name="prices" xsi:type="array">
                    <item name="tier_price" xsi:type="array">
                        <item name="render_template" xsi:type="string">Learning_Custom::product/price/tier_prices.phtml
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</layout>

Create template inside your module or copy base template file inside your module path should be -> app/code/Learning/Custom/view/frontend/templates/product/price/tier_prices.phtml

Magento 2 – How is Product Data Passed from Block to Knockout Template?

Well I spent a lot of hours looking how templates and other stuffs are related with knockout.js, i will try to explain how subtotal price format is displayed to order summary at checkout module, but is same to other things too. My current version is Magento ver. 2.0.4.

First if you navigate to the corresponding layout file for checkout at

vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml

you will see at line 392 inside cart_items block the subtotal block like this:

As you can see , Magento calls a js template to display subtotal of product right after product details.

If you navigate to

vendor/magento/module-checkout/view/frontend/web/js/view/summary/subtotal.js

you will see at line 15 is called subtotal template , and a function called getValue(),

 getValue: function () {
    return this.getFormattedPrice(this.getPureValue());
  }

which later i saw it is called in subtotal template , which is located to

vendor/magento/module-checkout/view/frontend/web/template/summary/subtotal.html

with this code:

Subtotal.js file uses

Magento_Checkout/view/frontend/web/js/view/summary/abstract-total.js getFormattedPrice()

function, while this file uses

Magento_Checkout/view/frontend/web/js/model/quote.js getPriceFormat()

function read about require.js dependencies , which returns a price format, and here i saw that this variable is populated like this,

var priceFormat = window.checkoutConfig.priceFormat;

So where does window.checkoutConfig.priceFormat comes from?

Magento 2 did this:

If you navigate to

/vendor/magento/module-checkout/view/frontend/templates/onepage.phtml

at line 26 is initialized window.checkoutConfig with $block->getCheckoutConfig(), which function is at

/vendor/magento/module-checkout/Block/Onepage.php

line 89, here it takes all config providers and returns them.

Where are config providers defined?

They are defined at

vendor/magento/module-checkout/etc/frontend/di.xml

at line 46, at sends us to

Magento\Checkout\Model\DefaultConfigProvider.php

which has getConfig() function, at line 254 you can see getConfig() function and at line 271 is priceFormat populated like this:

 $output['priceFormat'] = $this->localeFormat->getPriceFormat(
            null,
            $this->checkoutSession->getQuote()->getQuoteCurrencyCode()
        );

This means priceFormat is declared at populated here at getConfig() function, so you can later use it with window.checkouConfig.priceFormat.