Pop up minicart when I add a product to the cart magento 2

Question

I'm using magento 2.0.7, and what I'm trying to do is to popup the cart(the top right cart ajax minicart) when I add a product to it, Basically trigger it. I have tried to add the "showcart" class to my add to cart button classes, but if I do so, the button just opens the cart, and doesn't add the product anymore..

Answer 1

This is my first answer on this site. I've been struggling trying to make this work for the past two days and I was finally able to make it work, so I though it would be nice to share it.

First of all you need to create a module:

• registration.php
• etc/module.xml
• view/frontend/layout/default.xml
• view/frontend/templates/minicart_open.phtml
• view/frontend/web/js/view/minicart_open.js

Step 1. You need to add a template to the site. The way to do that is by using the default.xml

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

Step 2. Then inside minicart_open.phtml we need to call our js file (component) by attaching it to the parent div of the minicart. In this case, [data-block='minicart']. See this link for more details.

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

Step 3. And finally, inside minicart_open.js, the magic code:

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");
            });
        });
    }
});

Basically this code extends the functionality of the file vendor/magento/module-checkout/view/frontend/web/js/view/minicart.js, and it says that once the AJAX call is completed (contentUpdated), the minicart should be opened.

And that's it, a simple task with a lot of theory behind. Hope it helps.

Answer 2

It can be done by simply modifying minicart.js file.

Navigate to vendor/magento/Magento_Checkout/view/web/js/view/minicart.js

Under initialize: function, you will see

$('[data-block="minicart"]').on('contentLoading', function (event) {

Replace the function with this code.

$('[data-block="minicart"]').on('contentLoading', function (event) {
            addToCartCalls++;
            self.isLoading(true);
            $('[data-block="minicart"]').on('contentUpdated', function ()  {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");       
                setTimeout(function() {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("close");
            }, 4000);
            });
        });

You can change the timeout as per your requirement.

upload the file and clean cache by running the command

php bin/magento cache:clean

Cheers!

Answer 3

alternative solution: check vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js line: 100

$(document).trigger('ajax:addToCart', form.data().productSku);

We could add a custom js file:

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Catalog/js/view/minicart-open": {}
    }
}

In the js:

$(document).on('ajax:addToCart', function () {#code here...}

Answer 4

Simply you can use this code in you minicart.phtml below of your templating code. I am using this code and it working for better. you can try it. Thanks.

<script type="text/javascript">
    require(['jquery'], function ($) {
        $('.minicart-wrapper').on('contentLoading', function (event) {
            $('[data-block="minicart"]').on('contentUpdated', function () {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");
                setTimeout(function () {
                    $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("close");
                }, 4000);
            });
        });
    });
</script>

Answer 5

This above answer works but is missing the closing brace:

            $('[data-block="minicart"]').on('contentLoading', function (event) {
            addToCartCalls++;
            self.isLoading(true);
                $('[data-block="minicart"]').on('contentUpdated', function ()  {
                    $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");

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

Answer 6

It is working for Magento 2.3?

I have done the module as suggested but it still not opening the minicart.