0

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.

  • Where I have add additional code to make this popup. – Shakib Rahman Dec 18 '16 at 7:42
  • Go to this file and see the Ajax Add to Cart vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js. – Khoa TruongDinh Dec 18 '16 at 7:44
  • @ShakibRahman check my answer, it is very easy and clear. – LucScu Mar 4 '18 at 10:55
4

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;
  }
}
  • Thanks a lot. But it didn't work. – Shakib Rahman Dec 19 '16 at 9:22
  • try my updated answer – chirag Dec 19 '16 at 9:27
  • Nothing is working. I don't have any idea how I can solve it. – Shakib Rahman Dec 19 '16 at 17:04
  • Check catalog-add-to-cart is successfully override or not and checm your updated code of js from opening js in browser through console. – chirag Dec 19 '16 at 18:27
  • How can we display product name in pop ? – Jai Feb 17 '17 at 6:12
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: "&laquo; Continue shopping",
            class: 'primary btn-lg btn-info addtocart_modal_continue',
            click: function () {
                this.closeModal();
                return false;
            }
        },                        
        {
            text: "Go to cart &raquo;",
            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

0

you can try the free extension Shopping Cart Notifications Magento 2 by MageWorkshop. I hope that solve your issue in a simple way.

https://mageworkshop.com/shopping-cart-notifications-magento-2.html

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.