Simple Ajax add to cart in magento

list.phtml page in template

<form class="product_addtocart_form" action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form_<?php echo $_product->getId()?>"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
 <?php if(!$_product->isGrouped()): ?>
                         <label for="qty" class="qtylabel" style=""><?php echo $this->__('Qty') ?>:</label>
 <input type="text" class="form-control qtybox" name="qty">
 <?php endif; ?>
 <button type="submit" class="link_cart"><span><i class="fa fa-shopping-cart" style="margin-right: 5px;"></i><?php echo $this->__('Add to Cart') ?></span></button>
 </form>

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('.product_addtocart_form').submit(function(event){
            event.preventDefault();
            var $this = jQuery(this);
            jQuery($this).parents('li').append('<div class="ajax_loader"></div>');
            url = jQuery(this).attr('action');
            console.log(jQuery(this).serialize());
            url += '&isAjax=1';
            var data = jQuery(this).serialize();
            data += '&isAjax=1';
            jQuery.ajax({
                    url : url,
                    dataType : 'json',
                    type : 'post',
                    data : data,
                    success : function(data) {
                        getcartdata($this);
                    }
                });
            setTimeout(function(){
                //getcartdata($this);
            },1000);
        });
    });






    function getcartdata($this){
        jQuery.ajax( {
            url : "<?php echo Mage::getBaseUrl().'getcitys/index/getcartdetail'; ?>",
            dataType : 'html',
            type : 'get',
            success : function(data) {
                jQuery('.ajax_loader').hide();
                jQuery('.block-cart-header').html(data);
            }
        });
    }
</script>

Make in controllers/IndexController.php

public function getcartdetailAction() {
        $block = $this->getLayout()->createBlock('checkout/cart_sidebar');
        $block->setTemplate('checkout/cart/sidebar_header_ajax.phtml');
        echo $block->toHtml();exit;
 }


view.phtml page in template
 

productAddToCartForm.submit = function(button, url) {
            if (this.validator.validate()) {
                var form = this.form;
                var oldUrl = form.action;

                if (url) {
                   form.action = url;
                }
                var e = null;
                try {
                    this.form.submit();
                } catch (e) {
                }
                this.form.action = oldUrl;
                if (e) {
                    throw e;
                }

                if (button && button != 'undefined') {
                    button.disabled = true;
                }
            }
           
        }.bind(productAddToCartForm);

Replace above code To below code


productAddToCartForm.submit = function(button, url) {
            if (this.validator.validate()) {
                var form = this.form;
                var oldUrl = form.action;

                if (url) {
                   form.action = url;
                }
                var e = null;
                if(!url){
                    url = jQuery('#product_addtocart_form').attr('action');
                }
                var data = jQuery('#product_addtocart_form').serialize();
                data += '&isAjax=1';
                try {
                    jQuery('.product-shop').prepend('<div class="ajax_loader">&nbsp;</div>');
                    jQuery.ajax({
                          url: url,
                          dataType: 'json',
                          type : 'post',
                          data: data,
                          success: function(data){
                                getcartdata(this);
                          }
                    });
                    setTimeout(function(){
                        getcartdata(this.form);
                    },1000);
                } catch (e) {
                }
                this.form.action = oldUrl;
                if (e) {
                    throw e;
                }
            }
        }.bind(productAddToCartForm);

Write Bottom in view page

<script type="text/javascript">
    function getcartdata($this){
        jQuery.ajax( {
            url : "<?php echo Mage::getBaseUrl().'getcitys/index/getcartdetail'; ?>",
            dataType : 'html',
            type : 'get',
            success : function(data) {
                jQuery('.ajax_loader').hide();
                jQuery('.block-cart-header').html(data);
            }
        });
    }
</script>