2

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

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

  • 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 '18 at 6:21

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.