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

How to Call Newsletter in footer in Magento

To show Newsletter in footer go to app/design/frontend/default/YourTheme/layout/newsletter.xml and add the following lines in default < reference name = "footer" > < block type = "newsletter/subscribe" name = "footer.newsletter"   template = "newsletter/subscribe.phtml" /> </ reference > and add the following line in app/design/frontend/default/YourTheme/template/page/html/footer.phtml <?php echo $this -> getChildHtml ( 'footer.newsletter' ) ; ?>

Smooth Page Scroll Script

< script > $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')  && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); </ script >