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:
- Create file requirejs-config.js under app\code\Vendor\Module\view\frontend
123456789var config = {config: {mixins: {'Magento_Checkout/js/view/minicart': {'Vendor_Module/js/checkout/view/minicart': true}}}}; - Create file minicart.js under app\code\Vendor\Module\view\frontend\web\js\checkout\view
12345678910111213141516171819202122232425262728<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> - Run the below commands:12php bin/magento setup:static-content:deploy -fphp 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.
Get Weekly Updates
Never miss Magento tips, tricks, tutorials, and news.
Thank you for subscribing.
Something went wrong.