How to add quantity field on catalog / product listing page

Posted Date: February 3, 2010

I just managed to find some time to write a small module which will help you if you want to add quantity text box on your catalog / product listing page.

As lot of users were asking about it, so I thought it would be very good to share it with other users.

So, let’s do it step by step:

Step 1 :

app/design/frontend/default/default/template/catalog/product/list.phtml

The above is the catalog / product listing file where we will add quantity box and with add to cart button.

Start the form tag from Line # 35 as below:

<form name="frmProdList" method="post" action="">

Close the above form tag at Line # 138

</form>

Step 2 (Add quantity box in both list / grid mode sections):

Add the following line at Line # 68 and Line # 114

<input maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>" />

Step 3 (Add hidden form to hold quantity and JavaScript to add into cart):

Add the following lines at the end of the file:

<form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>

<input name="qty" id="qty" maxlength="12" />

</form>

<script>

function addToCart(productId){

var qty = $('qty_prod_'+productId).value;

$('qty').value = qty;

var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.value = qty;
productAddToCartForm.submit();

}
</script>

Note: if product will be configureable product then it will redirect you to view product section to specify color and size. In later articles I’ll show you how to select size and color while adding quantities from catalog / product listing page. (Good-bye) until later