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,
app\code\Magemonkeys\PopupCart\view\frontend\layout folder and add the below code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <?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 app\code\Magemonkeys\PopupCart\view\frontend\templates folder and add the below code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <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.
