2

Im currently having a problem with ajax and magento. I'm trying to get the current amount of items in a cart, after the user has clicked on the "put in cart"-button of an product, without reloading the page.

So far I've tried it with a poorly written Ajax, which hasn't worked, because I'm an absolute beginner with Ajax.

The process should be following: User clicks on "add to cart" -> script requests new cart quantity with ajax -> jquery adds the current amount into another DOM-Element (lets name it #cartqty)

My current non-ajax solution doesn't work, which looks like this:

$( '.product-add-btn' ).click(function() {
    $( '#cartqty' ).html('<?php echo $this->helper('checkout/cart')->getSummaryCount(); ?>');
});

The problem is NOT how to add a product with ajax to the cart. The problem is how to get the current amount of items in the cart with ajax after a product has been added to the cart, just for clarification.

My current code just gives back the first known cart item quantity, which is say 4. When I add something again, the quantity doesn't update, it just stays at 4, even if there are 5 products in the cart.

I really hope some can help a beginner.

  • you could create a controller action which returns the number of items in the cart and then call that action with ajax – NathanielR Sep 11 '15 at 12:02
2
  $( '#cartqty' ).html('<?php echo $this->helper('checkout/cart')->getSummaryCount(); ?>'); not ajax call .
  1. Call an ajax on button click to new url.

  2. Get data from that New Url.so you need to new Action on exit any controller or create 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.xml is app/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>
  • Stupid question, where should I put the controller? – Max Sep 11 '15 at 12:36
  • update check this.... – Amit Bera Sep 11 '15 at 12:49
  • I didn't chagned anything, do I need to replace url, method, params and so on with my own parameters? Right now, out of the bow, I get the following error in the console: ReferenceError: url is not defined new Ajax.Request(url, { – Max Sep 11 '15 at 12:58
  • update ..please check' – Amit Bera Sep 11 '15 at 13:03
  • Worked like a charme! You're awesome! Thank you so much. :) – Max Sep 11 '15 at 13:12

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.