Add quantity box on product listing page

It is very obvious and mandatory to provide the option of adding the quantity of the selected product on the product listing page.

In general, Magento facilitates the user to change the quantity of product in two ways :

1. A user can go to product detail page to change the product quantity
2. A user is supposed to add the product to cart first and then change the quantity on the cart page before updating the cart.

Sounds tedious, right? What if the user changes his/her mind to choose another product instead of the selected one? Dodging over from one page to another can irritate the user. So to make this more user friendly, we are providing the option to add the quantity of product on product listing page. By doing this, the user can easily enter the quantity of the product right on the product listing page rather than redirecting to another page.

Here are the steps, which you can follow to add the quantity box on product listing page.

1. We have to add the quantity text box just above the “Add to cart” button. You will find the following code of “Add to cart” button in in “app/design/frontend/default/YourTheme/template/catalog/product/list.phtml” file.

   <button type="button" title="<?php echo $this->__('Add to Cart') ?>" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>

   Now add the the following code just above the code of add to cart button.

   <?php if(!$_product->isGrouped()): ?>
   
   <label for="qty"><?php echo $this->__('Qty') ?>:</label>
   <input type="text" name="qty" id="qty" maxlength="3" value="<?php echo ($this->getMinimalQty($_product)?$this->getMinimalQty($_product):1) ?>"/>
   <?php endif; ?>

2. We need to wrap up the quantity box and add to cart button in the HTML form tag; so now after wrapping up the full code will look like as follow.

   <form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form_<?php echo $_product->getId()?>">
   <?php if(!$_product->isGrouped()): ?>
   <label for="qty"><?php echo $this->__('Qty') ?>:</label>
   <input type="text" name="qty" id="qty" maxlength="3" value="<?php echo ($this->getMinimalQty($_product)?$this->getMinimalQty($_product):1) ?>"/>
   <?php endif; ?>
   <br />
   <button type="button" onclick="this.form.submit()"> title="<?php echo $this->__('Add to Cart') ?>"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
   </form>

We can add the javascript validation for blank quantity box or set the default quantity to one. We can also use AJAX to add the product to cart but in that case we have to refresh the “MY CART” and “Recently added item(s)” block and also have to change the number of items in “My Cart” URL in header.

Feel free to share your views and let us know if you find this blog useful or need any further assistance.

Thanks,

The post Add quantity box on product listing page appeared first on Hiremagentodeveloper Blog.