A good customer experience impacts brand loyalty and customer retention. A merchant can make the customers’ purchase process easier and enhance the on-site experience.
A good customer experience is always more persuasive than any good advertisement.
Hence, I have come up with one such solution to show popup after “add to cart” action in Magento 2 that will make it easy for the customers to proceed to checkout and speed up the conversion process.
In the default Magento 2 store, the customer only gets a small notice that says “You added Product to your shopping cart.” at the top or bottom of the page when he/she clicks on the add to cart button.
Instead of that, offer your customers an immediate visual verification without having to scroll up or down by showing a popup when they add a product to the cart.
An added benefit is that the popup enhances your store’s design and layout!
Hence, show popup on “add to cart” action in your store using the method shown here:
Method to Show Popup After “Add to cart” Action in Magento 2
1. Copy catalog-add-to-cart.js to your theme from
vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js to app/design/frontend/Theme/ThemeName/Magento_Catalog/web/js/catalog-add-to-cart.js
or override catalog-add-to-cart.js to your custom module.
2. Create requirejs-config.js file in app\code\Vendor\Module\view\frontend and use the below code.
var config =
{
map:
{
'*':
{
'Magento_Catalog/js/catalog-add-to-cart': 'Vendor_Module/js/catalog-add-to-cart'
}
}
};
3. Find ajaxSubmit: function and add below code after self.enableAddToCartButton(form);
//popup modal code
var popup = $('<div class="add-to-cart-modal-popup"/>').html($('.page-title span').text() + '<span> has been added to cart.</span>').modal({
modalClass: 'add-to-cart-popup',
title: $.mage.__("Popup Title"),
buttons: [
{
text: 'Continue Shopping',
click: function () {
this.closeModal();
}
},
{
text: 'Proceed to Checkout',
click: function () {
window.location = window.checkout.checkoutUrl
}
}
]
});
popup.modal('openModal');
Pass a popup title as per your requirement.
The popup with “Continue Shopping” and “Proceed to Checkout” button will display like the below image:
Offer your customers a clear overview of the products they have added to the cart by using this method!
That’s all!
Feel free to share the solution with Magento Community via social media.
Thank You
