Adding a modal after adding to cart [duplicate]

magento.stackexchange https://magento.stackexchange.com/questions/241684

  •  25-01-2021
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top