How to Show Popup After “Add to cart” Action in Magento 2
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
- 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. - Create requirejs-config.js file in app\code\Vendor\Module\view\frontend and use the below code.
12345678910var config ={map:{'*':{'Magento_Catalog/js/catalog-add-to-cart': 'Vendor_Module/js/catalog-add-to-cart'}}}; - Find ajaxSubmit: function and add below code after self.enableAddToCartButton(form);
Pass a popup title as per your requirement.1234567891011121314151617181920//popup modal codevar 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');
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!
If you have any doubts regarding this post, just mention them in the Comments section below.
I would be happy to help.
Feel free to share the solution with Magento Community via social media.
Thank You
30 Comments
Hello! I have used this method to crate a popup after add to cart. However, it only work on product page. If I add a product to cart on Homepage or category page it doesn’t work. Can you help me to understand me why?
Hey,
Please check category page file ‘catalog-add-to-cart.js’ was loaded or not,
if loaded than check which function will be called on category page and put code to that function.
this is working good awesome one ,thank for u popup , but i need the product information like name , image and price could u pls me to get it
Hello Sai,
You can get the product details using jQuery or in the catalog-add-to-cart.js file where you can
find the product related information.
Thank You
Hello Sir I have created a custom observer to restrict the product if some of the product is available and i want to show pop up and show error in the popup so how can we do this can you please guide me?
Hello Bhaumik,
You can try by adding the code on “Add to Cart” button as this requirement requires further customization.
Thank You
Hello, Thank you this code, kinldy give step by step add this code, files, i mean more clarifications, when click add to cart or selct button, we need name, price, id also
Hello Jothibasu,
Please be informed that the above code is already provided as step by step.
In order to get the product detail, you need to inspect and simply get the value using jQuery.
Thank You
I want to show the image in popup. How can we achieve that?
Hello Shalini,
You can add image tag <img> in popup modal in the below line
$(‘<div class=”add-to-cart-modal-popup”/>’).html($(‘.page-title span’).text() + ‘ has been added to cart.</span>’).modal({……
Like
$(‘<div class=”add-to-cart-modal-popup”/>’).html($(‘<img src=”path” alt=”image”>’).modal({……
Thank You
its not showing the product name
Hello Harris,
We just have taken one example where one needs to show popup after “add to cart” action.
So, the above code is only for the popup not for the product name.
You can get the product name based on the product id and SKU from the catalog-add-to-cart.js. or right-click on the product name from the category page and select inspect element.
You can see a class name – “product-item-name”. Use that class name instead of $(‘.page-title span’).text() in the above code.
Thank You
Hi Sanya,
When I replace:
$(‘.page-title span’).text() with $(‘.product-item-name span’).text()
It shows me all the item names on the page. Do you have any idea how i can fix this?
Thanks in advance.
Hey Nick,
To display single product name in popup you will have to do as mentioned in blog.
if during add to cart any error generate for ex requested qty not exist then that popup should not be display
How to identify if after add to cart any error generate in js file? Can you have any idea?
Hello Aron,
We’ve added the code of popup in the catalog-add-to-cart.js file success: function (res) { ….. }.
So, if the item gets added to cart then the popup gets displayed.
If any error gets arrived then you can check using:
error: function (res) { … }
Thank You
hi
how to open popup before add to cart product?
Hello Milan,
You need to call popup.modal(‘openModal’); in the window load event after adding phtml file using catalog product view XML!
Thank You
Hi and thanks for taking the time to post this, it’s very useful.
Do you know if it’s possible to access the updated new basket total at that point (products total) to display it with the message?
Hello Anon,
Get the value using the object of total ‘Magento_Checkout/js/model/totals’ in JS
var subtotal = parseFloat(totals.totals()[‘subtotal’]);
OR
Just get the value/text of span of subtotal using JS
jQuery(‘.block-minicart .subtotal .price-container .price-wrapper span.price’).text();
Thank You
Hi Sanjay, thanks for the reply. I had thought about using JQuery and have used it elsewhere for grabbing mini-cart values but I was hoping there might be something native in Magento without needing to use JQuery. That gives me a good pointer so thank you 🙂
Hello Anon,
I’m glad that this solution is being helpful
Thank You
Hi! thank you for this code! I just want to add that the modal should be closed automatically after 5seconds per example ! Can you help please!
Hello,
Please add the below code in the js file after popup.modal(‘openModal’); line:
Thanks
Excellent post !
I am looking for something similar but with some feature.
Is it possible to redirect to an exteranl website after clicking Add to cart button ? That is replace ‘Add to cart’ button with ‘Proceed’ and upon clicking Proceed button we have some custom product attribute which is to be pushed to an external website.
Hello,
Thanks for the appreciation!
Yes, it is possible to redirect external URL after clicking add to cart button.
Just add this code in place of popup modal code:
location.href = extenal_url;
OR
window.location.href = extenal_url
Thank you.
This is awesome and I have it working but I am having one issue, when adding an item to the cart from the product category page, the popup text that tells the customer what has been added to the cart “______ has been added to cart.” is showing the category title and not the product name. How do we get it to show the Product Name?
Hello,
Thank you for the appreciation.
You can get the product name based on the product id and SKU from the catalog-add-to-cart.js. or right-click on the product name from the category page and select inspect element.
You can see a class name – “product-item-name”. Use that class name instead of $(‘.page-title span’).text() in the above code.
Thank you again!
Hi Sanjay,
Thanks for this amazing solution! This really helps for the user experience of my webshop. I only got one problem. When I use this part of the code it shows me a whole list of all the product names that are on the catalog page. How can I specify only the product that is added to the cart.
Hope you can help me out.
Thanks this is great!
Hey Nick,
You can get the product name based on the product id and SKU from the catalog-add-to-cart.js. or right-click on the product name from the category page and select inspect element.
You can see a class name – “product-item-name”. Use that class name instead of $(‘.page-title span’).text() in the above code. Also you can get only one item name base on current selection of add to cart button’s parent element.