Ajax Based Product Add to Cart from Category Page

In this blog post we will see how to add products to shopping cart directly from category page using ajax operations.

We would be able to add all product types simple,configurable,bundled,grouped, virtual and downloadable from the category page itself. For the products which require options to be selected before adding to cart e.g configurable,bundled etc , a lightbox iframe window will show up showing the options to be selected by user with a ‘Add to Cart’ button.
This blog is in continuation of the previous blog written, the same code base has been used and new coded is added. So it would be better to once go through the previous blog as well. Here are screen shots of the module in action, just so you know what we are going to develop.

Downloadable Product Add to Cart

Downloadable Product Add to Cart

Virtual Product Category Page Add to Cart

Virtual Product Category Page Add to Cart

Magento Bundled Product Add to Cart

Magento Bundled Product Add to Cart

Grouped Product Add to Cart

Grouped Product Add to Cart

Category Page Simple Product

Category Page Simple Product

Configurable Product with Custom Options

Configurable Product with Custom Options

Attached is source code for this module
Magneto version 1.6(+)
[dm]17[/dm]
Magneto version 1.6(-)
[dm]18[/dm]
Now let see what all we need to do, to achieve the above.

Step1: Override list.phtml

First we will have to override the list.phtml file and create our own list.phtml file in our module. In default theme, the list.phtml has this code written on the ‘Add to Cart’ button

onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"

The setLocation function simply redirects to another page. We cannot use this, since we need to have ajax. Now we will have to call another function instead of setLocation which will make an ajax call instead of page redirect. For the ajax calls we are going to use the jQuery library just like the previous blog. Let name our new function setLocationAjax(), so in no our code will be

onclick="setLocationAjax('<?php echo $this->getAddToCartUrl($_product) ?>')"

We also need to do is put a ajax loading icon next to the add to cart button, and when the ajax button is clicked the loading should show up. So the final code for our ‘Add to Cart’ button would be

<p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocationAjax('<?php echo $this->getAddToCartUrl($_product) ?>','<?php echo $_product->getId()?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
                        
<span id='ajax_loader<?php echo $_product->getId()?>' style='display:none'><img src='<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif')?>'/></span>

Here the setLocationAjax has two parameters, first is the add to cart url and second is the product id. The second parameter is actually required to identify the loading image placed next to the add to cart button. If you see the id of the ajax loader image it is id=’ajax_loadergetId()?>’. So based on the product id, we can hide/show the correct ajax loading image.
But still this code is not complete, we still have to check if the product has some options (configurable, grouped, bundled, custom options). If the product has required options, the add to cart will not work until the options have been selected by the user. So what we will do is check if the product has required options then show a lightbox with the options only, so that user can select the options and add the product to cart. Here is the complete code for the ‘Add to Cart’ button.

<?php if ( !($_product->getTypeInstance(true)->hasRequiredOptions($_product) || $_product->isGrouped()) ) { ?>
                        <p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocationAjax('<?php echo $this->getAddToCartUrl($_product) ?>','<?php echo $_product->getId()?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
                        <span id='ajax_loader<?php echo $_product->getId()?>' style='display:none'><img src='<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif')?>'/></span>
                        <?php } else { ?>
                        	<button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="showOptions('<?php echo $_product->getId()?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                        	<a href='<?php echo $this->getUrl('ajax/index/options',array('product_id'=>$_product->getId()));?>' class='fancybox' id='fancybox<?php echo $_product->getId()?>' style='display:none'>Test</a>
                        <?php }  ?>

If you look in default what we have done here is, put an if condition to check if product has required options or is a grouped product. If this is true then we then the ‘Add to Cart’ button has showOptions function and an anchor tag for the lightbox. If the condition is false then the default ‘Add to Cart’ button is shown with setLocationAjax() option and the ajax image loader.
The complete list.phtml file is found the in the attached module.

Step2: Javascript

Next in our list.phtml file we need to put in lot of javascript to the following

  • Initialize Fancybox
  • For Products which have options, fancybox with iframe should show up when click on ‘Add to Cart’ button
  • For Product which don’t have options, product should be added to cart through Ajax
  • The top links and cart sidebar should be updated after successful ‘Add to Cart’

First we will download the fancybox library and then unpack the files in our skin folder i.e skin\frontend\default\default\js\fancybox
Next to add fancybox to category pages add this code to the theme layout file, in my case ajax.xml

<catalog_category_default>
    	<reference name="head">
            <action method="addItem"><type>js</type><name>jquery/jquery-1.6.4.min.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/fancybox/jquery.fancybox-1.3.4.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/fancybox/jquery.easing-1.3.pack.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/fancybox/jquery.mousewheel-3.0.4.pack.js</name></action>
            <action method="addItem"><type>js</type><name>jquery/noconflict.js</name></action>
            <action method="addCss"><stylesheet>js/fancybox/jquery.fancybox-1.3.4.css</stylesheet></action>
        </reference>
    	<reference name='product_list'>
    		<action method='setTemplate'><template>ajax/catalog/product/view/list.phtml</template></action>
    	</reference>
    </catalog_category_default>
    <catalog_category_layered>
    	<reference name="head">
            <action method="addItem"><type>js</type><name>jquery/jquery-1.6.4.min.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/fancybox/jquery.fancybox-1.3.4.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/fancybox/jquery.easing-1.3.pack.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/fancybox/jquery.mousewheel-3.0.4.pack.js</name></action>
            <action method="addItem"><type>js</type><name>jquery/noconflict.js</name></action>
            <action method="addCss"><stylesheet>js/fancybox/jquery.fancybox-1.3.4.css</stylesheet></action>
        </reference>
    	<reference name='product_list'>
    		<action method='setTemplate'><template>ajax/catalog/product/view/list.phtml</template></action>
    	</reference>
    </catalog_category_layered>

Now when you open the category page, using firebug check if the fancybox library is loaded or not.
Here is code to initialize fancybox for all anchor tags with ‘fancybox’ class.

jQuery(document).ready(function(){
		jQuery('.fancybox').fancybox(
			{
			   hideOnContentClick : true,
			   width: 382,
			   autoDimensions: true,
               type : 'iframe',
			   showTitle: false,
			   scrolling: 'no',
			   onComplete: function(){ //Resize the iframe to correct size
				jQuery('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height
					jQuery('#fancybox-content').height(jQuery(this).contents().find('body').height()+30);
					jQuery.fancybox.resize();
				 });

			   }
			}
		);
	});

Here is code of the showOptions() function. This will show fancybox with the iframe URL when click on ‘Add to Cart’.

function showOptions(id){
		jQuery('#fancybox'+id).trigger('click');
	}

Here is code to to add to product to cart using ajax which don’t have any options like simple and virtual products.

function setAjaxData(data,iframe){
		if(data.status == 'ERROR'){
			alert(data.message);
		}else{
			if(jQuery('.block-cart')){
	            jQuery('.block-cart').replaceWith(data.sidebar);
	        }
	        if(jQuery('.header .links')){
	            jQuery('.header .links').replaceWith(data.toplink);
	        }
	        jQuery.fancybox.close();
		}
	}
	function setLocationAjax(url,id){
		url += 'isAjax/1';
		url = url.replace("checkout/cart","ajax/index");
		jQuery('#ajax_loader'+id).show();
		try {
			jQuery.ajax( {
				url : url,
				dataType : 'json',
				success : function(data) {
					jQuery('#ajax_loader'+id).hide();
         			setAjaxData(data,false);           
				}
			});
		} catch (e) {
		}
	}
Step3: Controller

Now in our controller file we need to put in code first for our ajax/index/addAction . The same code as the previous blog is used here without any changes, so i am just pasting the code here

public function addAction()
	{
		$cart   = $this->_getCart();
		$params = $this->getRequest()->getParams();
		if($params['isAjax'] == 1){
			$response = array();
			try {
				if (isset($params['qty'])) {
					$filter = new Zend_Filter_LocalizedToNormalized(
					array('locale' => Mage::app()->getLocale()->getLocaleCode())
					);
					$params['qty'] = $filter->filter($params['qty']);
				}

				$product = $this->_initProduct();
				$related = $this->getRequest()->getParam('related_product');

				/**
				 * Check product availability
				 */
				if (!$product) {
					$response['status'] = 'ERROR';
					$response['message'] = $this->__('Unable to find Product ID');
				}

				$cart->addProduct($product, $params);
				if (!empty($related)) {
					$cart->addProductsByIds(explode(',', $related));
				}

				$cart->save();

				$this->_getSession()->setCartWasUpdated(true);

				/**
				 * @todo remove wishlist observer processAddToCart
				 */
				Mage::dispatchEvent('checkout_cart_add_product_complete',
				array('product' => $product, 'request' => $this->getRequest(), 'response' => $this->getResponse())
				);

				if (!$cart->getQuote()->getHasError()){
					$message = $this->__('%s was added to your shopping cart.', Mage::helper('core')->htmlEscape($product->getName()));
					$response['status'] = 'SUCCESS';
					$response['message'] = $message;
					//New Code Here
					$this->loadLayout();
					$toplink = $this->getLayout()->getBlock('top.links')->toHtml();
					$sidebar_block = $this->getLayout()->getBlock('cart_sidebar');
					Mage::register('referrer_url', $this->_getRefererUrl());
					$sidebar = $sidebar_block->toHtml();
					$response['toplink'] = $toplink;
					$response['sidebar'] = $sidebar;
				}
			} catch (Mage_Core_Exception $e) {
				$msg = "";
				if ($this->_getSession()->getUseNotice(true)) {
					$msg = $e->getMessage();
				} else {
					$messages = array_unique(explode("\n", $e->getMessage()));
					foreach ($messages as $message) {
						$msg .= $message.'<br/>';
					}
				}

				$response['status'] = 'ERROR';
				$response['message'] = $msg;
			} catch (Exception $e) {
				$response['status'] = 'ERROR';
				$response['message'] = $this->__('Cannot add the item to shopping cart.');
				Mage::logException($e);
			}
			$this->getResponse()->setBody(Mage::helper('core')->jsonEncode($response));
			return;
		}else{
			return parent::addAction();
		}
	}
Options Iframe inside Fancybox

We will now see the code of the iframe which shows up inside the fancybox. The URL of the iframe is ajax/index/options. So so we will edit the controller file and add this code

public function optionsAction(){
		$productId = $this->getRequest()->getParam('product_id');
		// Prepare helper and params
		$viewHelper = Mage::helper('catalog/product_view');

		$params = new Varien_Object();
		$params->setCategoryId(false);
		$params->setSpecifyOptions(false);

		// Render page
		try {
			$viewHelper->prepareAndRender($productId, $this, $params);
		} catch (Exception $e) {
			if ($e->getCode() == $viewHelper->ERR_NO_PRODUCT_LOADED) {
				if (isset($_GET['store'])  && !$this->getResponse()->isRedirect()) {
					$this->_redirect('');
				} elseif (!$this->getResponse()->isRedirect()) {
					$this->_forward('noRoute');
				}
			} else {
				Mage::logException($e);
				$this->_forward('noRoute');
			}
		}
	}

This code is taking from the catalog/product/view action. In short, what this code does is loadLayout() and renderLayout(). But it loads proper handles depending on product type, i.e for configurable product it will load the handle PRODUCT_TYPE_configurable from the catalog.xml
Next we need to add code in the layout file for the action ajax/index/options

<ajax_index_options>
    	<reference name="root">
            <action method="setTemplate"><template>page/empty.phtml</template></action>
        </reference>
        <reference name="head">
        	<action method="addItem"><type>js</type><name>jquery/jquery-1.6.4.min.js</name></action>
        	<action method="addItem"><type>js</type><name>jquery/noconflict.js</name></action>
        </reference>
        <reference name="head">
            <action method="addJs"><script>varien/product.js</script></action>
            <action method="addJs"><script>varien/configurable.js</script></action>

            <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
            <action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
            <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
        </reference>
        <reference name="content">
            <block type="catalog/product_view" name="product.info" template="ajax/catalog/product/options.phtml">
                <!--
                <action method="addReviewSummaryTemplate"><type>default</type><template>review/helper/summary.phtml</template></action>
                <action method="addReviewSummaryTemplate"><type>short</type><template>review/helper/summary_short.phtml</template></action>
                <action method="addReviewSummaryTemplate"><type>...</type><template>...</template></action>
                -->
                
                <block type="catalog/product_view" name="product.info.addtocart" as="addtocart" template="ajax/catalog/product/view/addtocart.phtml"/>

                <block type="catalog/product_view" name="product.info.options.wrapper" as="product_options_wrapper" template="catalog/product/view/options/wrapper.phtml" translate="label">
                    <label>Info Column Options Wrapper</label>
                    <block type="core/template" name="options_js" template="catalog/product/view/options/js.phtml"/>
                    <block type="catalog/product_view_options" name="product.info.options" as="product_options" template="catalog/product/view/options.phtml">
                        <action method="addOptionRenderer"><type>text</type><block>catalog/product_view_options_type_text</block><template>catalog/product/view/options/type/text.phtml</template></action>
                        <action method="addOptionRenderer"><type>file</type><block>catalog/product_view_options_type_file</block><template>catalog/product/view/options/type/file.phtml</template></action>
                        <action method="addOptionRenderer"><type>select</type><block>catalog/product_view_options_type_select</block><template>catalog/product/view/options/type/select.phtml</template></action>
                        <action method="addOptionRenderer"><type>date</type><block>catalog/product_view_options_type_date</block><template>catalog/product/view/options/type/date.phtml</template></action>
                </block>
                        <block type="core/html_calendar" name="html_calendar" as="html_calendar" template="page/js/calendar.phtml"/>
                    </block>
                <block type="catalog/product_view" name="product.info.options.wrapper.bottom" as="product_options_wrapper_bottom" template="catalog/product/view/options/wrapper/bottom.phtml" translate="label">
                    <label>Bottom Block Options Wrapper</label>
                    <action method="insert"><block>product.tierprices</block></action>
                    <block type="catalog/product_view" name="product.clone_prices" as="prices" template="catalog/product/view/price_clone.phtml"/>
                    <action method="append"><block>product.info.addtocart</block></action>
                    <action method="append"><block>product.info.addto</block></action>
                </block>

                <block type="core/template_facade" name="product.info.container1" as="container1">
                    <action method="setDataByKey"><key>alias_in_layout</key><value>container1</value></action>
                    <action method="setDataByKeyFromRegistry"><key>options_container</key><key_in_registry>product</key_in_registry></action>
                    <action method="append"><block>product.info.options.wrapper</block></action>
                    <action method="append"><block>product.info.options.wrapper.bottom</block></action>
                </block>
                <block type="core/template_facade" name="product.info.container2" as="container2">
                    <action method="setDataByKey"><key>alias_in_layout</key><value>container2</value></action>
                    <action method="setDataByKeyFromRegistry"><key>options_container</key><key_in_registry>product</key_in_registry></action>
                    <action method="append"><block>product.info.options.wrapper</block></action>
                    <action method="append"><block>product.info.options.wrapper.bottom</block></action>
                </block>
                <action method="unsetCallChild"><child>container1</child><call>ifEquals</call><if>0</if><key>alias_in_layout</key><key>options_container</key></action>
                <action method="unsetCallChild"><child>container2</child><call>ifEquals</call><if>0</if><key>alias_in_layout</key><key>options_container</key></action>
            </block>
        </reference>
    </ajax_index_options>

This code is similar to the <catalog_product_view> layout, except i have removed some blocks like description, attributes which are not required.
Next we need to add code to the options.phtml file used in the above block.

<style>
<!--
body.ajax-index-options{
 width:380px;
 padding:0px;
 margin:0px;
}
body.ajax-index-options .product-shop .product-options-bottom .price-box{
 float:left;
}
-->
</style>
<?php $_helper = $this->helper('catalog/output'); ?>
<?php $_product = $this->getProduct(); ?>
<script type="text/javascript">
    var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
</script>
<div class="product-view" style="width:380px">
    <div class="product-essential" style="width:330px">
    <form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
        <div class="no-display">
            <input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
            <input type="hidden" name="related_product" id="related-products-field" value="" />
        </div>

	
        <div class="product-shop">
            <div class="product-name">
                <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
            </div>
    
    		<?php echo $this->getChildHtml('product_type_data') ?>
    		
    		<?php if (!$this->hasOptions()):?>
                <div class="add-to-box">
                    <?php if($_product->isSaleable()): ?>
                        <?php echo $this->getChildHtml('addtocart') ?>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
    		        
            <?php if ($_product->isSaleable() && $this->hasOptions()):?>
                <?php echo $this->getChildChildHtml('container1', '', true, true) ?>
            <?php endif;?>

        </div>
        <div class="clearer"></div>
        <?php if ($_product->isSaleable() && $this->hasOptions()):?>
            <?php echo $this->getChildChildHtml('container2', '', true, true) ?>
        <?php endif;?>
    </form>
    <script type="text/javascript">
    //<![CDATA[
        var productAddToCartForm = new VarienForm('product_addtocart_form');
    	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;
			// Start of our new ajax code
			if (!url) {
				url = jQuery('#product_addtocart_form').attr('action');
			}
			url = url.replace("checkout/cart","ajax/index"); // New Code
			var data = jQuery('#product_addtocart_form').serialize();
			data += '&isAjax=1';
			jQuery('#ajax_loader').show();
			try {
				jQuery.ajax( {
					url : url,
					dataType : 'json',
					type : 'post',
					data : data,
					success : function(data) {
						jQuery('#ajax_loader').hide();
                        parent.setAjaxData(data,true);
					}
				});
			} catch (e) {
			}
			// End of our new ajax code
			this.form.action = oldUrl;
			if (e) {
				throw e;
			}
		}
	}.bind(productAddToCartForm);
    productAddToCartForm.submitLight = function(button, url){
            if(this.validator) {
                var nv = Validation.methods;
                delete Validation.methods['required-entry'];
                delete Validation.methods['validate-one-required'];
                delete Validation.methods['validate-one-required-by-name'];
                if (this.validator.validate()) {
                    if (url) {
                        this.form.action = url;
                    }
                    this.form.submit();
                }
                Object.extend(Validation.methods, nv);
            }
        }.bind(productAddToCartForm);
    //]]>
    </script>
    </div>
</div>

This is all that is required. This module has been tested in magento 1.6 version only, but should work on all magento version. Please provide comments if something is missing or bugs show up, so that we can improve this free module.

  • Good morning! Great.. i will update today and i will feedback for magento 1.5.1 🙂
    I am waiting for checkout shipping method with multiple stores drop down box.. 😀

    Thanks, 
    Zanias Pantelis

    • Manish Prakash

      Ok thanks J

      Yes that blog is coming in next 2-3days

      • Hi Manish,

        I am not a programmer but I tried your script. I have a question, do I need to upload all the package file you are providing in my magento folder OR need to modify my file as per your instructions….

        please help me….

        Thanks

      • Hardik

        HI Manish,

        in this tutorial i get only page loading like image circled, but i do not edd product to cart and i get error like

        Error: jQuery(“.fancybox”).fancybox is not a function
        Line: 317

        please give me a solution for this………
        Thanks in advance…… 🙂

  • Hello, 

    Ok.. I am on step 2 to add on my theme ajax.xml. 
    Next, when i go to my product category list, no products appear! 

    Thanks, 
    Zanias Pantelis

    • Hello,

      I just copy the module file on my theme and its worked on this step but when i checked for fancy box in firebug i found 2 errors.. 
      $.fn.fancybox.build is not a function$.fn.fancybox.build();                                                  sinis.jquery.js (line 684)”NetworkError: 404 Not Found ”            menu_bullet1.pngwhen i check my category from dropdown menu the arrow of this section is disappeared! thats the second error i guess..Thanks

      • Manish Prakash

        Let me test the module on magento 1.5

        • Hello, 

          +1 bug when i enabled the inline translate the ajax icon stacks when i press add to cart but if i refresh the page, i find the product inside cart.. 
          Thanks! 🙂

          • Manish Prakash

            Yes this is not a bug, because of your jquery error the javascript is not working. The product gets added to the cart but it doesn’t show to you because of your jquery error.

          • Hello, 

            I have stuck a bit in step 2, i have to edit any file which is default or i will upload your files in my theme?

            Its all ok.. except the fancy box. it’s not active when attribute is in use!
            i think that i don’t have done all..

            Thanks,
            Zanias Pantelis

          • Manish Prakash

            You can upload my files in your theme

          • I  have uploaded your files in default magento folders and custom theme but fancybox doesn’t work!
            thx:)

          • Manish Prakash

            I sent you message on your error yesterday. You have included a jquery file
            sin.jquery something which I causing problem with fancybox.

            Please check my previous message

          • Hello, 
            I saw your message but the slider of home page works with this .js file .. i delete it and my site was broken..:)
            There is any way to fix it?:)

            Thanks,
            Zanias Pantelis

          • Manish Prakash

            Why is you slider using fancybox? Anyways you need to fix that issue, not sure about that.

          • yes.. when i delete this file its work but appear the fancybox with all site again inside! this is the correct or we need only attributes?

            p.s. is there any way to play my slider with different type of code?

            Thanks..:)

          • Manish Prakash

            I couldn’t understand your question “fancybox with all site again inside”?

            Also regarding slider use bxslider, it’s the best jquery slider.

          • ok.. sorry! 

            Fancy its open and displays the whole site in..

            i will see for bxslider! thx..:)

          • Manish Prakash

            Can you send me the URL where this happens?

      • Manish Prakash

        It works fine for me on magento 1.5 default theme.

        You are having problem in the your javascript file
        http://test.cartridgeworld.gr/skin/frontend/default/siniscart/js/sinis.jquery.js

        this sinis.jquery.js is not part of module, it a file included by you. This is some issue with this file. Try to remove this and test it

  • Oğuz Çelikdemir

    You are the Men Manish, thank you so much for all magento articles. I wish, I would buy a drink for you. Maybe, one day in Turkey 🙂

    • Manish Prakash

      Thanks 🙂

  • 567

    thanks for great tut, but, I have this error 

    NetworkError:
    404 Not Found –
    http://example.lan/ajax/index/add/uenc/aHR0cDovL2dvbGRzYWxtb24ucnUvZnVybml0dXJlLmh0bWw,/product/51/isAjax/1

    How can I fix it? 

  • Rain Chen

    Hi,thank you for this topic.I’m new to magento,i instatlled this extension to Magento1.4,when i click ‘add to cart’ it will popup “Fatal error: Call to undefined method Mage_Catalog_Helper_Product::initProduct()”.

    Does it only work on magento1.5 and magento1.6+?

  • David Kreutzer

    Hi Manish,
    first of all thanks for your great work here! I really appreciate your effort!! Keep it up, you’re doing a gread job!!

    Now to my issue: I just integrated the AJAX Add to cart button and it works great. I would love to have other AJAX cart functions though (like change the quantity, remove article from cart etc)
    You have that somewhere in your blog? I need it for the small cart on the home page or category view only, I won’t use the cart itself. Is there a way to manage this?

    Tanks in advance 🙂

  • Alex

    not working on magento 1.4.2, process animation image keep showing and nothing happens, i refreshed the page but no product in cart… please help……

    • Hey i have the same problem on 1.4.20,I test this module on 1.6 it was working fine,but on 1.4.20 it was not working,i download 1.6(-) version,and test it on magento 1.4.20 but this module was not working on that,please let me know have you fix with issue with 1.4.20.

  • Hi,thank for your post, i have the problem on 1.4.20,I test this module on 1.6 it was
    working fine,but on 1.4.20 it was not working,i download 1.6(-)
    version,and test it on magento 1.4.20 but this module was not working on
    that,please let me know have you fix with issue with 1.4.20.

  • hi,when i install this module on magento 1.4.20 it show this error Fatal error: Class ‘Mage_Catalog_Helper_Product_View’ not found in /home/goodcarb/public_html/app/Mage.php on line 520,can you please resolve my problem because i am new to magento,i see the difference in the core of magento 1.6 and 1.4.20 is this because of the change in the core functionality of magento??.

  •  Hi ! your code is amazing. …

    just a question is it possible to add some thing to confim that the article is added to the cart.
    when I am in the middle pf the page?

    • shirtsofholland

      here here

  • Chiel_karssenberg

    Hello,

    Great module! The only problem is that it is not working on the category page? When I click on the product and then add It to cart it works fine? I use magento 1.6.2.0. Do you know what I did wrong?

  • Chiel karssenberg

    Hello it works fine! Only if you search for a product then it doesn’t send it to cart with ajax? 

  • Hi Manish,

    Thanks for code – WORK,  but can you add with AJAX other actions  ( edit , delete product from card , delete wishlist, delete compare )  too. Like in this extension http://www.mageworx.com/ajax-cart-magento-extension.html

    Thanks again

  • Hi Manish. This is working great but is there a chance that you can include a functionality to specify quantity to add? It always adds 1 quantity.

  • Magento Themes

    Ajax is a perfect choice for better usability feature on website…

  • Guest

    The performance is like incredible bad. Strage thing is that other pages load quite fast.

    Any ideas? Try a product to cart. What is happening? And more importantly .. any clues to speed it up?

    http://baleinen.com/baleinen-overhemd-plastic-strips.html

  • shirtsofholland

    The performance is like incredible bad. Strage thing is that other pages load quite fast.

    Any ideas? Try a product to cart. What is happening? And more importantly .. any clues to speed it up?

    http://baleinen.com/baleinen-overhemd-plastic-strips.html

    • Bruno

      Man can you give that extension? Checkout floated right and fixed with that awesome effect.
      I want for my website too…

  • How can i add pop for qty in Simple product in this extension

  • Raka

    its not working for my site, no fancybox is coming and have tried it on two diffrent versions. do u have new updated versions?

  • Hello! Great module! I need to add a qty filed to the category page? Anybody knows how?

  • Dev K.

    I’m working on a project where products are added directly from category listing page. No need to go to product page. When i click on “addtocart” button, it goes to the product page and shows message “options required”. When i check view.phtml file, then i came to know that “getChildHtml(‘product_type_data’) ?>” is resposible for it. Hence, i want to know how i can load “getChildHtml(‘product_type_data’) ?>” on category product listing (list.phtml page). Please some help me.

  • How could we make the modification to show add to cart success message in fancybox if product doesn’t have options please? Thanks.

  • Sukumar
  • icemonkey2k

    hi, i don’t know if you’re still supporting this but i keep getting a

    …magento/index.php/ajax/index/options/product_id/1819/ 404 (Not Found)

    error message

    where does the code need to go in order for this to be in the right place?

    I’ve tried putting the excellence folder in code/core/Mage, in code/core, in code/local

    none of them work. I’m a beginner with php so i’m not to sure where i’m supposed to put this. I get the fancy box to show up but then get the ‘whoops cannot find the page type message.

    Any help would be great!

    Thanks.

  • karthikphp

    Hello
    Thanks for such a nice module but the top.link Cart not showing when i added product. after refreshing the page its shows correctly. Am using Magento 1.9.1 version. Anybody can help me

  • Natalie

    Thank you for this.
    This helped me to create Quick View window for the category list. I’d been banging my head for hours trying to figure out how to properly render product page and get it’s blocks.