How to Show Minicart in Custom Popup In Magento 2

Hey Magento Pals,

Everyone at MageComp wants to wish you the magical and marvelous Year ahead ?

Last, we have learned how you can Show Order Comments On The Invoice. Today, We will learn how you can show minicart in custom popup in Magento 2.

In Magento 2, generally, minicart shows in the header section of Magento, and whenever you click on minicart, it will show summary of your cart, but what if we want to show minicart in another place also, e. g. in popup, then don’t worry we have found solution for that too.

As always, we have developed the codes to achieve that in a matter of time. With the help of the below codes, you can display your minicart in custom popup, and you can set your popup design as per your requirement.

So, Let’s get into that and show how you can achieve that,

Step 1: To do this, create default.xml file inside,

app\code\Vendor\Extension\view\frontend\layout folder and add the below code:

<?xml version="1.0"?>
<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>
        <referenceContainer name="content">
            <block name="custom_minicart" as="custom_minicart" template="Vendor_Extension::custompopupcart.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>
        </referenceContainer>
    </body>
</page>

Step 2: Next, create custompopupcart.phtml file inside app\code\Vendor\Extension\view\frontend\templates folder and add the below code:

<div style="display: none" id="popup-mpdal">
    <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
        <!-- ko template: getTemplate() --><!-- /ko -->
    </div>
</div>
<script>
    window.checkout = <?=  $block->getSerializedConfig() ?>;
</script>
<script type="text/x-magento-init">
    {
        "[data-block='minicart']": {
            "Magento_Ui/js/core/app": <?=  $block->getJsLayout() ?>
        },
        "*": {
            "Magento_Ui/js/block-loader": "<?= $block->getViewFileUrl('images/loader-1.gif') ?>"
        }
    }
    </script>
<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Continue'),
                    click: function () {
                        this.closeModal();
                        $('#popup-mpdal').hide();
                    }
                }]
            };
            $('#popup-mpdal').show();
            var popup = modal(options, $('#popup-mpdal'));
            $("#popup-mpdal").modal("openModal");
        }
    );
</script>

Step 3: After adding these codes, the final step is to refresh the Cache.

So, this was it. Now you are able to show minicart in custom popup also. If you like this article, then share it with your Magento colleague and friends. Also, let us know if you want us to write about the problem you are facing in the comments below.

Lastly, If you found any problem while implementing the codes, then contact our Support Team. We will be happy to help you.

Happy Reading?

Click to rate this post!

[Total: 12 Average: 5]

Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate ?️ Certified Magento Developer?‍?. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.?

Next Top 6 Magento SEO Tips In 2020 (You Can't Miss) »

Previous « Magento Extensions Digest December 2019 (New Release & Updates)

View Comments

Cryptoboy says:

June 18, 2021 at 4:26 pm

@Dhiren Vasoya
its working like a charm, but i cant remove items by pressing the Trash-Icon. Any ideas ?
- magecomp says:
  
  July 14, 2021 at 5:14 pm
  
  Try to check the console log