By using below codes, you can display a mini cart in the custom popup, and you can also set your popup design as per your requirement.
Step 1: create default.xml file inside,
appcodeMagemonkeysPopupCartviewfrontendlayout 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 step should be about creating custompopupcart.phtml file inside appcodeMagemonkeysPopupCartviewfrontendtemplates 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: The final step is to refresh the Cache.
