14

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..

34

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.

  • It worked like a charm. Tks! – medina Dec 12 '16 at 22:46
  • Seems a good fix, why does this need to be a module? Wouldn't making those changes in your theme have the same effect? – Ben Crook Feb 3 '17 at 15:23
  • In addition to the answer above from @pinicio: Note that the solution will only work if ajax is used for the add to cart function: magento.stackexchange.com/questions/125681/… – Soeren Apr 2 '17 at 9:29
  • 1
    It works on cart update as when we add product it works but it should not work when we remove item from cart. but its working at that time also. – Ronak Chauhan Apr 12 '17 at 7:28
  • If i try deleting an item from the mini cart, item is not deleting..ie) once i click on the delete icon, only after the page refresh, the deleted item is getting refleted – Sushivam May 24 '17 at 9:57
6

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!

  • 1
    i tried this one but not worked , i flushed the cache – inrsaurabh Sep 6 '17 at 4:26
  • Make sure you have no override of this file vendor/magento/Magento_Checkout/view/web/js/view/minicart.js under your theme. – Ajendra Panwar Sep 7 '17 at 5:36
  • You should never change the core files directly. Instead, change it within your theme or a custom module. – pinicio Nov 29 '17 at 21:22
  • Glad it helped you :) – Ajendra Panwar Jan 1 '18 at 10:10
  • 1
    It worked like a charm on Magento 2.2.3. Tks heaps! – medina May 24 '18 at 7:31
4

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...}
2

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>
  • Thanks its Working... I want to learn Magento JS flow. How it works please share some link – 55840 Mar 8 at 9:25
1

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

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.