I want to add popup notify after adding products Magento 2

Question

I wanted to Add notify popup form after adding the products but I couldn't get the file in magento 2. I need someone help who already done this work.

Answer 1

You have to override vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js..

And you can add this below script in your override catalog-add-to-cart.js

 define([
'jquery',
'mage/translate',
'jquery/ui',
'Magento_Ui/js/modal/modal',
], function ($, $t, modal) {
"use strict";
 ...
 ...
 ...
 var popup = $('<div class="themecafe-free-popup"/>').html('<h1>HTML Content</h1>').modal({
                        modalClass: 'changelog',
                        title: $.mage.__("Model Title"),
                        buttons: [{
                                text: 'Continue Shopping',
                                click: function () {
                                    this.closeModal();
                                }
                            }]
                    });
                    popup.modal('openModal');
...
...
...
});

EDIT

define([
 'jquery',
 'mage/translate',
 'jquery/ui',
 'Magento_Ui/js/modal/modal',
], function ($, $t, modal) {
"use strict";
$.widget('mage.catalogAddToCart', {
 .....
    ajaxSubmit: function (form) {
        var self = this;
        $(self.options.minicartSelector).trigger('contentLoading');
        self.disableAddToCartButton(form);
        $.ajax({
            url: form.attr('action'),
            data: form.serialize(),
            type: 'post',
            dataType: 'json',
            beforeSend: function () {
                if (self.isLoaderEnabled()) {
                    $('body').trigger(self.options.processStart);
                }
            },
            success: function (res) {

                if (self.isLoaderEnabled()) {
                    $('body').trigger(self.options.processStop);
                }

                if (res.backUrl) {
                    window.location = res.backUrl;
                    return;
                }
                if (res.messages) {
                    $(self.options.messagesSelector).html(res.messages);
                }
                if (res.minicart) {
                    $(self.options.minicartSelector).replaceWith(res.minicart);
                    $(self.options.minicartSelector).trigger('contentUpdated');
                }
                if (res.product && res.product.statusText) {
                    $(self.options.productStatusSelector)
                            .removeClass('available')
                            .addClass('unavailable')
                            .find('span')
                            .html(res.product.statusText);
                }
                self.enableAddToCartButton(form);
          //popup code start

//for 2 option you can check you value is coming in `res` and get product name
                   var popup = $('<div class="themecafe-free-popup"/>').html($('.page-title span').text()).modal({ //get product name from product view page only
                        modalClass: 'changelog',
                        title: $.mage.__("Model Title"),
                        buttons: [{
                                text: 'Continue Shopping',
                                click: function () {
                                    this.closeModal();
                                }
                            }]
                    });
                    popup.modal('openModal');
               //popup code end
                }
            });
        },
    ....
    });
    return $.mage.catalogAddToCart;
    });

or

Vendor/Module/etc/frontend/di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
  <type name="Magento\Checkout\Controller\Cart\Add">
    <plugin name="name.of.block" type="Vendor\Module\Plugin\Cart\Add" sortOrder="10" />
  </type>
</config>

'Vendor/Module/Plugin/Cart/Add.php'

<?php
namespace Vendor\Module\Plugin\Cart;

use Magento\Framework\App\ObjectManager;

class Add {

  public function afterExecute(\Magento\Checkout\Controller\Cart\Add $subject, $result) {


        //Your customization is here for passing product name


    $subject->getResponse()->representJson(
        $objectManager->get('Magento\Framework\Json\Helper\Data')->jsonEncode($result1)
    );
    return $result;
  }
}

Answer 2

In product page you can obtain it with this code.

In vendor/magento/module-catalog/view/frontend/templates/product/view/addtocart.phtml add at the end the modal div

<div id="addtocart_modal" style="display: none;"></div>

more, add the below attribute to the submit button with class="action primary tocart", so you could pass product name to the modal

data-name="<?php echo $_product->getName() ?>"

Now, in vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js after

self.enableAddToCartButton(form);

add the code to init the modal

var cartUrl = url.build('checkout/cart');
var modal_options = {
    type: 'popup',
    buttons: [
        {
            text: "« Continue shopping",
            class: 'primary btn-lg btn-info addtocart_modal_continue',
            click: function () {
                this.closeModal();
                return false;
            }
        },                        
        {
            text: "Go to cart »",
            class: 'primary btn-lg btn-success addtocart_modal_gotocart',
            click: function () {
                location.href = cartUrl;
                return false;
            }
        }
    ]
};

var popup = $('#addtocart_modal');
var product_name = form.find("button").data("name");

// reset modal content every time
popup.html("");
popup.append("<div>The product " + product_name + " is added to your cart</div>");
popup.modal(modal_options);
popup.modal('openModal');

It's done! If you need this modal also in catalog page or everywhere there is an add to cart button keep this logic and adjust it.

PS: override core files is a bad practice, so take in mind to override the files in your module/theme

Answer 3

First you have to override addtocart.phtml file in this location

app\design\frontend\vendor\module\Magento_Catalog\templates\product\view\addtocart.phtml

And add the following code

<script type="text/javascript">
    require(['jquery'], function ($) {
        var flag = true;
        var flag2 = false;
        $(document).ajaxSuccess(function (event, xhr, settings) {
            $("#customloader").hide();
            if(settings.url.includes("checkout/cart/add/") == true){
                flag2 = false;
                flag = true;
            }
            if(settings.url.includes("checkout/sidebar/removeItem/") == true){
                flag2 = true;
            }
            if (settings.url.indexOf("customer/section/load/?sections=cart") > 0 ){
                if(flag == true && flag2 == false){
                    cartObj = xhr.responseJSON;
                    var carturl="<?php echo $this->getUrl();?>"+"checkout/cart";

                    alert("Total item in cart:-"+cartObj.cart.summary_count+"\n Cart Subtotal:-"+cartObj.cart.subtotal);

                }
            }
        });
    });
</script>