How can I show Add to Cart success message ("You added 'Product name' to your shopping cart.") in a popup in Magento 2?


Copy catalog-add-to-cart.js from core '\module-catalog\view\frontend\web\js/catalog-add-to-cart.js and place into your theme folder \Package/theme/Magento_Catalog/web/js/catalog-add-to-cart.js

Now find ajaxSubmit function and add below code after self.enableAddToCartButton(form);

var popup = $('<div class="add-to-cart-dialog"/>').html($('.page-title span').text() + '<span> has been added to cart.</span>').modal({ //get product name from product view page only
                    modalClass: 'add-to-cart-success-popup'

Reference for more modal options: https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_modal.html

| improve this answer | |

copy and paste the catalog-add-to-cart.js file from vendor\Magento\Catalog\view\frontend\Web\js to app\design\frontend\[NameSpace]\[Theme]\Magento_Catalog\web\js\catalog-add-to-cart.js

with in that you have to modify ajaxSubmit function like below.

 ajaxSubmit: function(form) {
        var self = this;

            url: form.attr('action'),
            data: form.serialize(),
            type: 'post',
            dataType: 'json',
            beforeSend: function() {
                if (self.isLoaderEnabled()) {
            success: function(res) {
                if (self.isLoaderEnabled()) {

                if (res.backUrl) {
                    window.location = res.backUrl;
                if (res.messages) {
                if (res.minicart) {
                if (res.product && res.product.statusText) {
                alert("You added Product name to your shopping cart.");

In success I have added below alert message.

alert("You added Product name to your shopping cart.");

After that fallow below steps.

1) Remove the Magento_Catalog folder from pub\static\frontend\[NameSpace]\[Theme]\en_US\

2) Run the php bin/magento setup:static-content:deploy --theme NameSpace/Theme.

3) Open New browser and try to add product to cart above alert message will popup.

Like that you can customize it your way.

| improve this answer | |
  • How can you replace "Product name" with the actual name of the product added? – Jason Oct 15 '17 at 4:31
  • @Jason Can you create a thread and describe briefly and tag me. – Bojjaiah Oct 16 '17 at 5:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.