Magento 2 – Render Minicart in Custom Layout

blocksmagento2magento2.0.8mini-carttemplate

I am working on header customization, I completely remove luma header and make a new one. I can render minicart in custom layout like

<referenceContainer name="page.wrapper">
        <block class="Vendor\Module\Block\Template" name="vendor.menu.template" template="Vendor_Module::template.phtml" before="header.container">

            <block class="Magento\Checkout\Block\Cart\Sidebar" name="ch-minicart" as="chminicart" template="Vendor_Module::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>
            </block>

        </block>
</referenceContainer>

In Vendor_Module::template.phtml

..........................
..........................

<li class="chminicart">
    <?php echo $this->getChildHtml(); ?>
</li>

..........................
..........................

but it works partially, it does not show items in minicart window

enter image description here

One thing is clear the problem in Vendor_Module::minicart.phtml but the same thing worked in luma extended header so I am confused.

Best Answer

I changed minicart block name as ch-minicart, but in app/code/Magento/Checkout/view/frontend/layout/checkout_cart_sidebar_item_renderers.xml it still depend block name minicart so we need to change block name as a new one.

I can override that layout like

app/design/frontend/Vendor/Theme/Magento_Checkout/layout/checkout_cart_sidebar_item_renderers.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. 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="ch-minicart">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="minicart_content" xsi:type="array">
                            <item name="config" xsi:type="array">
                                <item name="itemRenderer" xsi:type="array">
                                    <item name="default" xsi:type="string">defaultRenderer</item>
                                    <item name="simple" xsi:type="string">defaultRenderer</item>
                                    <item name="virtual" xsi:type="string">defaultRenderer</item>
                                </item>
                            </item>
                            <item name="children" xsi:type="array">
                                <item name="item.renderer" xsi:type="array">
                                    <item name="component" xsi:type="string">uiComponent</item>
                                    <item name="config" xsi:type="array">
                                        <item name="displayArea" xsi:type="string">defaultRenderer</item>
                                        <item name="template" xsi:type="string">Magento_Checkout/minicart/item/default</item>
                                    </item>
                                    <item name="children" xsi:type="array">
                                        <item name="item.image" xsi:type="array">
                                            <item name="component" xsi:type="string">Magento_Catalog/js/view/image</item>
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">Magento_Catalog/product/image</item>
                                                <item name="displayArea" xsi:type="string">itemImage</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

now it is working properly.

Related Topic