Skip to main content

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 :

<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">
  <?php $i=0; foreach ($_productCollection as $_product): ?>
  <?php if ($i++%$_columnCount==0): ?>
  <?php endif ?>
  <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
    <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>
      <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
      <?php $_imgSize = 210; ?>
      <img id="product-collection-image-<?php echo $_product->getId(); ?>"
                         src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($_imgSize); ?>"
                         alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /> </a>
      <div class="product-info">
        <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
        <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" />
        <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;"  /> <?php echo $this->getPriceHtml($_product, true) ?>
        <?php if($_product->getRatingSummary()): ?>
        <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
        <?php endif; ?>
        <div class="actions">
          <?php if($_product->isSaleable() && !$_product->canConfigure()): ?>
          <div id="addtocartlink<?php echo $_product->getId(); ?>">
            <button type="button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')" class="addtocartbutton">Submit</button>
          </div>
          <?php elseif($_product->isSaleable()): ?>
          <a title="<?php echo $this->__('View Details') ?>" class="button" href="<?php echo $_product->getProductUrl() ?>"><?php echo $this->__('View Details') ?></a>
          <?php else: ?>
          <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
          <?php endif; ?>
        </div>
      </div>
    </form>
  </li>
  <?php endforeach ?>
</ul>

Comments

  1. Well this has nothing to do with ajax. Wish it did though.....

    ReplyDelete

Post a Comment

Popular posts from this blog

Fixing a Compiler Error in Magento

Fortunately the compiler is quite easy to manually disable. This will resolve the compiler issue and allow you to access your Magento Admin so that you can re-compile before enabling the compiler again. Access your Magento website using FTP and open the file /includes/config.php . You should see the following code: ------------------------------------------------------------------------------------------------------- define ( 'COMPILER_INCLUDE_PATH' , dirname ( __FILE__ ) . DIRECTORY_SEPARATOR . 'src' ) ; define ( 'COMPILER_COLLECT_PATH' , dirname ( __FILE__ ) . DIRECTORY_SEPARATOR . 'stat' ) ; ------------------------------------------------------------------------------ This code tells Magento where to look for the compiled files. To disable the compiler, simply comment out these lines (add a '#' character to the start of each line). The result should look like the following: ------------------------------------------------...

Remove Category option from Layered Navigation options list in magnto

This is about how to remove the category from the layered navgation Please open to app/design/frontend/default/default/template/catalog/layer and open up view.phtml for edit.  < dl id = "narrow-by-list" > <?php $_filters  =  $this -> getFilters ()  ?> <?php  foreach ( $_filters  as  $_filter ):  ?>  <?php  if( $_filter -> getItemsCount ()):  ?> <?php  if( $_filter -> getName () !=  "Category" ) { ?> < dt > <?php  echo  $this -> __ ( $_filter -> getName ())  ?> </ dt > < dd > <?php  echo  $_filter -> getHtml ()  ?> </ dd > <?php }  endif;  ?> <?php  endforeach;  ?> </ dl >