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;?> ) && qty<?php echo $i;?> > 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>
<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;?> ) && qty<?php echo $i;?> > 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>
Well this has nothing to do with ajax. Wish it did though.....
ReplyDelete