How to Show Custom Popup on click of “Proceed to Checkout” Button From Minicart in Magento 2

The default Magento 2 redirects a customer to the checkout page when the “Proceed to Checkout” button is clicked as shown below:

However, depending on the business requirements, one may want to show popup on the mini cart when “Proceed to checkout” button is clicked in Magento 2.

The popup may show a custom sales message or further instructions or any offer related details on the mini cart that may be important for the business or customer to know at that stage of the purchase cycle.

Here, I have shared the programmatic solution to show custom popup on click of “Proceed to Checkout” button from minicart in Magento 2.

Method to Show Custom Popup on click of “Proceed to Checkout” Button From Minicart in Magento 2:

1. Create file requirejs-config.js under app\code\Vendor\Module\view\frontend
   
   
   var config = { config: { mixins: { 'Magento_Checkout/js/view/minicart': { 'Vendor_Module/js/checkout/view/minicart': true } } } };

   1 2 3 4 5 6 7 8 9

   var config = {     config: {         mixins: {             'Magento_Checkout/js/view/minicart': {                 'Vendor_Module/js/checkout/view/minicart': true             }         }     } };

2. Create file minicart.js under app\code\Vendor\Module\view\frontend\web\js\checkout\view
   
   
   <pre class="lang:default decode:true">define([ 'jquery', 'Magento_Customer/js/customer-data' ], function ($, customerData) { 'use strict'; return function (Component) { return Component.extend({ /** * @override */ getCartParam: function (name) { var self = this; if (name === 'possible_onepage_checkout') { $('#top-cart-btn-checkout').click(function (event) { var customer = customerData.get('customer'); if (!customer().firstname) { event.preventDefault(); $('.custom-popup').modal('openModal'); /* Here you can put your message or call your popup */ return false; } }); } return this._super(name); }, }); } }); </pre>

   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

   <pre class="lang:default decode:true">define([     'jquery',     'Magento_Customer/js/customer-data' ], function ($, customerData) {     'use strict';     return function (Component) {         return Component.extend({             /**              * @override              */             getCartParam: function (name) {                 var self = this;                 if (name === 'possible_onepage_checkout') {                     $('#top-cart-btn-checkout').click(function (event) {                         var customer = customerData.get('customer');                         if (!customer().firstname) {                             event.preventDefault();                             $('.custom-popup').modal('openModal'); /* Here you can put your message or call your popup */                             return false;                         }                     });                 }                 return this._super(name);             },         });     } }); </pre>

3. Run the below commands:
   
   php bin/magento setup:static-content:deploy -f php bin/magento cache:flush

   1 2	php bin/magento setup:static-content:deploy -f php bin/magento cache:flush

That’s it.

Once you implement the above solution, the frontend shows the custom popup as shown below:

If you need more help regarding this post, feel free to ask in the Comment section below.

I would be happy to help you.

Do consider sharing this post with Magento Community via social media.

Thank you.