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..
Magento – Pop up minicart when I add a product to the cart magento 2
cartmagento2popup
Related Solutions
You can try these:
http://www.magentocommerce.com/magento-connect/header-mini-cart.html http://benfrain.com/magento-how-to-add-a-cart-summary-to-the-header-using-local-xml/
Good luck! :)
$( '#cartqty' ).html('<?php echo $this->helper('checkout/cart')->getSummaryCount(); ?>'); not ajax call .
Call
an ajaxonbutton clickto new url.Get data from that New Url.so you need to
new Action on exit any controllerorcreate new controller and get data.
<script>
$( '.product-add-btn' ).click(function() {
new Ajax.Request(url, {
method:'get',
onLoading:function(){ },
onSuccess: function(transport) {
if (200 == transport.status){
var response = transport.responseText.evalJSON( );
$( '#cartqty' ).html(response.count );
}else{
alert('Something went wrong...');
}
},
onFailure: function() { alert('Something went wrong...'); }
});
});
</script>
Need to create a controller by create new module:
<?php
class Amit_Custommodule_IndexController extends Mage_Core_Controller_Front_Action{
public function indexAction(){
$this->helper('checkout/cart')->getSummaryCount();
$result=array();
$result['count']=this->helper('checkout/cart')->getSummaryCount();
$this->getResponse()->setHeader('Content-type','application/json',true);
$this->getResponse()->setBody(Mage::helper('core')->jsonEncode($result));
}
}
Full module:
- First of all create module control file Module name as
Amit_Custommodule.xml at app/etc/modules/.
Code:
<?xml version="1.0"?>
<config>
<modules>
<Amit_Custommodule>
<codePool>community</codePool>
<active>true</active>
</Amit_Custommodule>
</modules>
</config>
- Path Of
config.xmlisapp/code/community/Amit/Custommodule/etc
Code:
<?xml version="1.0" ?>
<config>
<modules>
<Amit_Custommodule>
<version>1.0.0</version>
</Amit_Custommodule>
</modules>
<frontend>
<routers>
<custommodule>
<use>standard</use>
<args>
<module>Amit_Custommodule</module>
<frontName>custommodule</frontName>
</args>
</custommodule>
</routers>
</frontend>
</config>
- IndexController.php path is
app/code/community/Amit/Custommodule/controllers/
Code:
<?php
class Amit_Custommodule_IndexController extends Mage_Core_Controller_Front_Action{
public function indexAction(){
$result=array();
$result['count']=Mage::helper('checkout/cart')->getSummaryCount();
$this->getResponse()->setHeader('Content-type','application/json',true);
$this->getResponse()->setBody(Mage::helper('core')->jsonEncode($result));
}
}
And script:
<script>
$( '.product-add-btn' ).click(function() {
new Ajax.Request('<?php echo $this->getUrl("custommodule/index/index")?>', {
method:'get',
onLoading:function(){ },
onSuccess: function(transport) {
if (200 == transport.status){
var response = transport.responseText.evalJSON( );
$( '#cartqty' ).html(response.count );
}else{
alert('Something went wrong...');
}
},
onFailure: function() { alert('Something went wrong...'); }
});
});
</script>
Best Answer
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:
Step 1. You need to add a template to the site. The way to do that is by using the default.xml
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.
Step 3. And finally, inside minicart_open.js, the magic code:
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.