Magento – Show Pop Up when click on Add to cart Magento 2

addtocartmagento2popup

Is there any mistake in this code or file structure ?
link i followed

what i did

1)app/code/SomeName/AddCartPopUp/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'SomeName_AddCartPopUp',
    __DIR__
);

2)app/code/SomeName/AddCartPopUp/view/frontend/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column">
    <body>
        <referenceContainer name="content">
  <block class="Magento\Framework\View\Element\Template" name="minicart.autoopen" template="SomeName_AddCartPopUp::minicart_open.phtml"/>
</referenceContainer>
    </body>
</page>

3)app/code/SomeName/AddCartPopUp/view/frontend/template/minicart_open.phtml

 <script type="text/x-magento-init">
    {
         "[data-block='minicart']" : {
            "SomeName_AddCartPopUp/js/view/minicart_open" : {}
         }
    }
    </script>

4)app/code/SomeName/AddCartPopUp/view/frontend/web/js/view/minicart_open.js

define(["jquery/ui","jquery"], function(Component, $){
    return function(config, element){
        var minicart = $(element);
        minicart.on('contentLoading', function () {
            minicart.on('contentUpdated', function () {
                minicart.find('[data-role="dropdownDialog"]').dropdownDialog("open");
            });
        });
    }
});

5)app/code/SomeName/AddCartPopUp/etc/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">

</config>

6)app/code/SomeName/AddCartPopUp/etc/module.xml

  <?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
        <module name="SomeName_AddCartPopUp" setup_version="1.0.0"></module>
            <sequence>
                <module name="Magento_Backend"/>
                 <module name="Magento_Sales"/>
                <module name="Magento_Quote"/>
                <module name="Magento_Checkout"/>>
            </sequence>
    </config>

Best Answer

Adding popup to minicart when click on add to cart button

Edit your extended default.xml

/app/design/frontend/vendor-name/theme-name/Magento_Theme/layout/default.xml

and paste this line of code

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>


            <!--minicart popup-->
        <referenceContainer name="content">
          <block class="Magento\Framework\View\Element\Template" name="minicart.autoopen" template="Magento_Checkout::minicart_open.phtml"/>
        </referenceContainer>



    </body>
</page>

Now create and place template (minicart_open.phtml) file at below location. 

/app/design/frontend/vendor-name/theme-name/Magento_Checkout/templates/minicart_open.phtml

and use this code in minicart_open.phtml

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/** @var $block \Magento\Checkout\Block\Cart\Sidebar */
?>

<script type="text/x-magento-init">
{
     "[data-block='minicart']" : {
        "Magento_Checkout/js/view/minicart_open" : {}
     }
}
</script>

Then create and add Js ( minicart_open.js ) file

/app/design/frontend/vendor-name/theme-name/Magento_Checkout/web/js/view/minicart_open.js

paste below code inside file

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
define(["jquery/ui","jquery"], function(Component, $){
    return function(config, element){
        var minicart = $(element);
        minicart.on('contentLoading', function () {
            minicart.on('contentUpdated', function () {
                minicart.find('[data-role="dropdownDialog"]').dropdownDialog("open");

                setTimeout(function() {
                    $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("close");
                }, 6000);


            });
        });
    }


});

All done , Keep cache disabled or clear and run below commands if needed

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

Thanks

Related Topic