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

1 Answer 1

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

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? Commented Feb 19, 2018 at 6:21
  • this is show popup AFTER item has added to card, not WHEN added to cart tho
    – fudu
    Commented Jul 27, 2019 at 4:25

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.