Adding A Quantity Box and Add to Cart Button to List Category Pages

This is the second post in our series on customising Magento. Today we’ll look at putting a quantity box and “Add to cart” button on the category page next to our products in list view.

Usually, a wholesale customer is placing an order for large numbers of items. Forcing the customer to drill down into an individual product is not ideal. Rather, we want our customer to be able to specify quanities and click the Add to Cart button, and keep moving right down the page. Using this fix, we can do just that.

In the theme’s /template/catalog/product/list.phtml file, change the <button> line near line 108 from this:

<?php if($_product->isSaleable()): ?> <button onclick=”setLocation(‘<?php echo $this->getAddToCartUrl($_product) ?>’)”><span><?php echo $this->__(‘Add to Cart’) ?></span></button>

To this:

<form action=”<?php echo $this->getAddToCartUrl($_product) ?>” method=”post” id=”product_addtocart_form_<?php echo $_product->getId(); ?>”>
<input name=”qty” type=”text” id=”qty” maxlength=”12″ value=”<?php echo $this->getMinimalQty($_product) ?>” />
<button-button” onclick=”productAddToCartForm_<?php echo $_product->getId(); ?>.submit()”><span><?php echo $this->__(‘Add to Cart’) ?></span></button>
</form>
<script type=”text/javascript”>
var productAddToCartForm_<?php echo $_product->getId(); ?> = new VarienForm(‘product_addtocart_form_<?php echo $_product->getId(); ?>’);
productAddToCartForm_<?php echo $_product->getId(); ?>.submit = function(){
if (this.validator.validate()) {
this.form.submit();
}
}.bind(productAddToCartForm_<?php echo $_product->getId(); ?>);
</script>

This change needs to be applied in two places.  A search on isSaleable() will show you where these lines are located.

That’s all for this one, nice and simple! Hope you find it useful.