3

What would be the best way to create a modal after adding a product to cart (Showing "continue shopping" or "checkout")?

I though about using just JS with event. But, I don't know how to concile this the AJAX result.

0

1 Answer 1

15

You can show ajax popup by extending catalog-add-to-cart.js file of Magento-Catalog module.

Steps to do :

1 - Copy catalog-add-to-cart.js from '\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

2 - find ajaxSubmit: function and place below code snippet after self.enableAddToCartButton(form);

Code snippet :

//popup code start
                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-popup',
                    //title: $.mage.__("No Title"),
                    buttons: [
                        {
                            text: 'Continue Shopping',
                            click: function () {
                                this.closeModal();
                            }
                        },
                        {
                            text: 'Proceed to Checkout',
                            click: function () {
                                window.location = window.checkout.checkoutUrl
                            }
                        }
                    ]
                });
                popup.modal('openModal');
                //popup code end

And you are done. deploy-statcic content, flush cache etc

9
  • Your answer is almost the same than this one : magento.stackexchange.com/questions/150794/… But yours is easier to implement and is perfectly working. Big thanks ! Commented Sep 11, 2018 at 8:37
  • Thanks you got the my answer.. now i am trying to override JS
    – Mahendra
    Commented Mar 14, 2019 at 6:17
  • @SatishVishwakarma, good happy to know if that works for you too, happy coding. Commented Mar 14, 2019 at 6:31
  • @NaveedAsim, How can we use modal pop up if product is added to cart from custom page from ajax request by passing product id. Commented Aug 20, 2019 at 7:39
  • Hello @NaveedAsim, this override work on Magento 2.3.3 ? On you're customisation, if i want to show picture of product and the price, how i can do it ? should I override controller of module-catalog ?
    – devmagento
    Commented Dec 16, 2019 at 16:09

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