0

i want to add a new pop-in after clicking on "Add To Cart" button which contains the same information and the same design of the usual minicart on the top right , i know there is some tuto like this, but they use the already exist minicart , but me i want to add new to make my change there and not affect to exist minicart

can any one help me please ?

i want a new pop up like this to change it as i wich enter image description here

3
  • you want modal popup or show simple message ? Oct 15, 2021 at 11:24
  • and will display before addtocart or after addtocart? please do mention proper requirement in question Oct 15, 2021 at 11:25
  • @GohilRajesh i want to display it after click on "add to cart" , see please the capture above , i want it with all informations and design to make my custom change on it , to not affect the old minicart
    – magNif
    Oct 15, 2021 at 11:28

1 Answer 1

0

Copy catalog-add-to-cart.js to your theme from vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js

to app/design/frontend/Theme/ThemeName/Magento_Catalog/web/js/catalog-add-to-cart.js

or override catalog-add-to-cart.js to your custom module. Create requirejs-config.js file in app\code\Vendor\Module\view\frontend and use the below code.

var config =
    {
        map:
        {
           '*':
               {
                'Magento_Catalog/js/catalog-add-to-cart': 'Vendor_Module/js/catalog-add-to-cart'
               }
        }
    };

Find ajaxSubmit: function and add below code after self.enableAddToCartButton(form);

//popup modal code

var popup = $('<div class="add-to-cart-modal-popup"/>').html($('.page-title span').text() + '<span> has been added to cart.</span>').modal({
    modalClass: 'add-to-cart-popup',
    title: $.mage.__("Popup Title"),
    buttons: [
        {
            text: 'Continue Shopping',
            click: function () {
                this.closeModal();
            }
        },
        {
            text: 'Proceed to Checkout',
            click: function () {
                window.location = window.checkout.checkoutUrl
            }
        }
    ]
});
popup.modal('openModal');

//popup modal code

var popup = $('<div class="add-to-cart-modal-popup"/>').html($('.page-title span').text() + '<span> has been added to cart.</span>').modal({
    modalClass: 'add-to-cart-popup',
    title: $.mage.__("Popup Title"),
    buttons: [
        {
            text: 'Continue Shopping',
            click: function () {
                this.closeModal();
            }
        },
        {
            text: 'Proceed to Checkout',
            click: function () {
                window.location = window.checkout.checkoutUrl
            }
        }
    ]
});
popup.modal('openModal');

Pass a popup title as per your requirement.

The popup with “Continue Shopping” and “Proceed to Checkout” button will display

That’s all!

4
  • it's simple popup code. if you want same as minicart you can bind same data in your popup with Knockout or jQuery Oct 15, 2021 at 11:32
  • that's what i want really , can you please show me how to do it, to have the same as minicart , i am new on Magento on the same place on window
    – magNif
    Oct 15, 2021 at 11:37
  • You can open minicart too..or you want custom popup only? Oct 15, 2021 at 18:01
  • yes open just custom minicart , it's better than popup
    – magNif
    Oct 18, 2021 at 10:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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