Magento 2 Open minicart when item is added
It can be done by simply modifying minicart.js file.
Navigate to vendor/magento/Magento_Checkout/view/web/js/view/minicart.js
Create override of the file by copy it in your theme folder.
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!
For Magento 2
Pop up minicart when I add a product to the cart magento 2
I'm referring to Open header cart when product added to cart & https://stackoverflow.com/questions/13841390/toggle-dropdown-mini-cart-when-product-added-to-basket which are in Magento 1.
In Magento 2 we can create Event Observer for this
app\code\Custom\Module\etc\frontend\events.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
<event name="controller_action_predispatch_checkout_cart_add">
<observer name="open_mini_cart" instance="Custom\Module\Observer\OpenMiniCartObserver" />
</event>
</config>
app\code\Custom\Module\Observer\OpenMiniCartObserver.php
namespace Custom\Module\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\App\Request\DataPersistorInterface;
use Magento\Framework\App\ObjectManager;
class OpenMiniCartObserver implements ObserverInterface {
protected $_urlManager;
protected $redirect;
public function __construct(
\Magento\Framework\UrlInterface $urlManager, \Magento\Framework\App\Response\RedirectInterface $redirect
) {
$this->_urlManager = $urlManager;
$this->redirect = $redirect;
}
public function execute(\Magento\Framework\Event\Observer $observer) {
$actionName = $observer->getEvent()->getRequest()->getFullActionName();
$controller = $observer->getControllerAction();
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$cartUpdated = $objectManager->get('Magento\Checkout\Model\Session')->getCartWasUpdated(false);
if ($cartUpdated) {
// open mini cart
}
$this->redirect->redirect($controller->getResponse(), $this->redirect->getRefererUrl());
}
Still Some JS Stuff missing
Ajendra Panwar's answer is good but i wanted to point out that you can do this exact same thing without having to override the whole mini cart JS file. Doing this override can lead to upgrade problems, and since you just have to hook into the same functionality that it's using, the override is unnecessary.
I made the call to Js file in my override of the header.phtml
but this can go in any phtml file that is loaded on every page of the site:
app/design/frontend/{namespace}/{theme}/Magento_Theme/templates/html/header.phtml
...
<script type="text/x-magento-init">
{
"*": {
"Magento_Theme/js/mini-cart-action": {}
}
}
</script>
...
And then create a JS file for our code:
app/design/frontend/{namespace}/{theme}/Magento_Theme/web/js/mini-cart-action.js
define([
'jquery'
], function ($) {
return function () {
$('[data-block="minicart"]').on('contentLoading', function () {
$('[data-block="minicart"]').on('contentUpdated', function () {
$('html, body').animate({ scrollTop: 0 }, 'slow');
$('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");
});
});
}
});
Be sure to clear your cache and redeploy so your JS file is in the pub
folder. To make sure the file is loading correctly, you can look in the network tap of any page on the site: