I want to add popup notify after adding products Magento 2

2018-02-09 18:56:58

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.

Please help me.

Thanks

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 = $('

').html('

HTML Content

').modal({

modalClass: 'changelog',

title: $.mage.__("Model Title"),

buttons: [{

text: 'Continue Shopping',

click: function () {

this.closeModal();

}

}]

});

  • 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 = $('

    ').html('

    HTML Content

    ').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";

    $

    2018-02-09 19:09:47
  • In product page you can obtain it with this code.

    In vendor/magento/module-catalog/view/frontend/templates/product/view/js/addtocart.phtml add at the end the modal 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="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 »",

    2018-02-09 19:39:40