Magento - Ajax add to cart and quantity box in list.phtml

To add quantity box with increment + and - and also using ajax add to cart, you should first take the quantity increment box with CSS styling and also need to include a dynamic form (multiple forms per product) as shown in the below code :

<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; ?>>
        <script type="text/javascript">
            function setQty<?php echo $i;?>(id, url) {
                var qty = document.getElementById('qty' + <?php echo $i;?>).value;
                document.getElementById('addtocartlink' + id).innerHTML = '<button type="button" class="addtocartbutton" onclick="setLocation(\'' + url + 'qty/' + qty + '/\')"></button>';
            }
        </script>
        <div class="productslistboxcont"> <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(250); ?>"  alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="imgborder" /></a>
          <div class="productslisttitle"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></div>
          <div class="productslistprice"> <span>Price: <?php echo $this->getPriceHtml($_product, true) ?> <span>|</span> Qty:</span> <span class="cart"> <span>
            <input type="text" name="qty" id="qty<?php echo $i;?>" maxlength="12" value="<?php echo ($this->getMinimalQty($_product)?$this->getMinimalQty($_product):1) ?>" title="<?php echo $this->__('Qty') ?>" class="cartnum" />
            </span> <img src="<?php echo $this->getSkinUrl("images/cararrowup.png"); ?>" class="toparrow" onclick="var qty_el<?php echo $i;?> = document.getElementById('qty<?php echo $i;?>'); var qty<?php echo $i;?> = qty_el<?php echo $i;?>.value; if( !isNaN( qty<?php echo $i;?> )) qty_el<?php echo $i;?>.value++;setQty<?php echo $i;?>(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product) ?>');return false;" /> <img src="<?php echo $this->getSkinUrl("images/cararrowdown.png"); ?>" class="downarrow" onclick="var qty_el<?php echo $i;?> = document.getElementById('qty<?php echo $i;?>'); var qty<?php echo $i;?> = qty_el<?php echo $i;?>.value; if( !isNaN( qty<?php echo $i;?> ) &amp;&amp; qty<?php echo $i;?> &gt; 0 ) qty_el<?php echo $i;?>.value--;setQty<?php echo $i;?>(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product) ?>');return false;"  /> </span> </div>
          <?php if(!$_product->isSaleable()): ?>
          <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
          <?php endif; ?>
          <div id="addtocartlink<?php echo $_product->getId(); ?>">
            <button type="button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')" class="addtocartbutton"></button>
          </div>
          
        </div>
      </form>
Hope this helps to solve someone's problem ! For any other queries please feel free to write us at prashcreations(at)gmail(dot)com


7 comments:

  1. Its very use full for me.Thanks to you..

    ReplyDelete
  2. Very helpful , any chance to do this with Jquery ?

    i think if i use it more then once - a lot better to do it with block right?

    ReplyDelete
  3. Yes, you are right. There might be an option to do this in Jquery as well.

    ReplyDelete
  4. Thank you, it,s my code problem i have get my issue

    ReplyDelete
  5. Is there any way to stop the postback

    ReplyDelete
  6. how to use this code and where ?

    ReplyDelete