3

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>
Improve this question
10
  • do you want minicart open when a user click on add to cart button
    – Manoj Deswal
    Sep 6, 2017 at 5:18
  • yes, when user click add to cart pop must show that product is added
    – inrsaurabh
    Sep 6, 2017 at 5:21
  • have you extended your theme like this : '/app/design/frontend/vendorname/themename/Magento_Theme/layout/default.xml'
    – Manoj Deswal
    Sep 6, 2017 at 5:24
  • no, i am using luma as default,there is no app/design/*
    – inrsaurabh
    Sep 6, 2017 at 5:25
  • you must extended your theme , either using luma or any other theme
    – Manoj Deswal
    Sep 6, 2017 at 5:27

1 Answer 1

Reset to default
3

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

Improve this answer
2
  • this one is working but when you add 2 or more than items it hangs your system. I checked in js code it's called many times after item add to cart. anyone have facing issue like that?
    – Magento2 Devloper
    Feb 19, 2018 at 6:21
  • this is show popup AFTER item has added to card, not WHEN added to cart tho
    – fudu
    Jul 27, 2019 at 4:25

Your Answer

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

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