cancel
Showing results for 
Search instead for 
Did you mean: 

Show minicart in header when adding a product to cart

Show minicart in header when adding a product to cart

I'm trying to show the minicart in the header when adding a product to cart. Seems like the easiest way would be a script looking for the add to cart button to be clicked or maybe the success message being displayed. Any ideas?

5 REPLIES 5

Re: Show minicart in header when adding a product to cart

Hi Seasterling,

 

do you mean something like this:

http://magento.stackexchange.com/questions/123329/pop-up-minicart-when-i-add-a-product-to-the-cart-m...

 

I'm looking for a similar functionality, so any idea would be hightly appreciated. Customers should be able to properly see when a product as added to the cart, and they should know where to proceed. The standard magento message is not quite visible enough.

 

Did anybody yet manage to get something like this to work? I know there is an extension out there but I'm looking rather for this simple functinoality instead.

 

Greets!

Re: Show minicart in header when adding a product to cart

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

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


Step 2. Then 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.

Re: Show minicart in header when adding a product to cart

can you give me the complete module.

it is highly appreciated.

Re: Show minicart in header when adding a product to cart

This doesn't seem to work. Can you provide the entire code? Thanks!

Re: Show minicart in header when adding a product to cart

Did you get any solution? I am looking for same solution too. 

Please post it here if you have any