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?
@Dhiren Vasoya
its working like a charm, but i cant remove items by pressing the Trash-Icon. Any ideas ?
Try to check the console log