To add Grouped product with associated product as a dropdown and qty box with Add To Cart button in product listing page

Posted: November 17, 2012 in Magento, Version 1.3.*, Version 1.4.*, Version 1.6.*

Hello All,

I like to share with you how to add Grouped product with ‘Associated Product‘ as a dropdown and ‘qty‘ textbox with ‘Add To Cart‘ button in product listing page.

Add Below code in listing (Path: YourMagento/app/design/frontend/YourPackage/YourTheme/template/catalog/product/list.phtml) file inside  ” if($_product->isSaleable()):”  condition



    <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; ?>>
<div style=”float:right;border:1px solid;padding:5px;”>
<?php if($_product->isGrouped()): ?>
<?php  $_subAssociatedProducts = $_product->getTypeInstance(true)->getAssociatedProducts($_product); ?>
<?php if(count($_subAssociatedProducts)){?>
<select onchange=”addSuperQty(‘<?php echo $_product->getId()?>’,this.value);”>
<?php foreach ($_subAssociatedProducts as $_item) {?>
<option value=”<?php echo $_item->getId()?>”><?php echo $this->htmlEscape($_item->getName()). ‘ – ‘. Mage::helper(‘core’)->currency($_item->getPrice())?></option>
<?php } ?>
<?php }?><br/>
<span id=”span_<?php echo $_product->getId()?>”></span>
<label for=”qty”><?php echo $this->__(‘Qty’) ?>:</label>
<input type=”text” size=”3″ name=”qty” onkeyup=”changeQty(this.value,'<?php echo $_product->getId()?>’);” id=”<?php echo $_product->getId()?>_qty” maxlength=”12″ value=”<?php echo ($this->getMinimalQty($_product)?$this->getMinimalQty($_product):1) ?>” />
<br/><?php else:?>
<label for=”qty”><?php echo $this->__(‘Qty’) ?>:</label>
<input type=”text” size=”3″ name=”qty” id=”qty” maxlength=”12″ value=”<?php echo ($this->getMinimalQty($_product)?$this->getMinimalQty($_product):1) ?>” />
<?php endif; ?>
<button type=”button” onclick=”this.form.submit()”><span><span><?php echo $this->__(‘Add to Cart’) ?></span></span></button>

Add below javascript functions at the end of file:

<script type=”text/javascript”>
function addSuperQty(spanId,itemId)
var qty = document.getElementById(spanId+’_qty’).value;
var ID = ‘span_’+spanId;
document.getElementById(ID).innerHTML = ‘<input type=”hidden” value=”‘+qty+'” id=”super_group_’+spanId+'”  name=”super_group[‘+itemId+’]” />’;

function changeQty(val,itemId)
document.getElementById(‘super_group_’+itemId).value = val;

I hope you will find the above code useful.
Bijal Bhavsar 🙂

  1. raj says:

    totally garbage it is not work at all in magneto 1.7 there is no any effect in store

    • Hello Raj,

      Please Check, Your grouped products having associated products or not. May be you are not following instructions, it is working at our end, and we are using mangento 1.7 version.

      Let me know if you are facing no effect again.

      • chris says:

        Hi i managed to get it working in respect of i have a dropdown a qty box and an add button but when i click add to cart it comes back and says there is no qty please could you help?

        code is

        getChildHtml(‘addtocart’) ?>
        helper(‘wishlist’)->isAllow() || $_compareUrl=$this->helper(‘catalog/product_compare’)->getAddUrl($_product)): ?>
        __(‘OR’) ?>

        getChildHtml(‘addto’) ?>

        getChildHtml(‘extra_buttons’) ?>


        isSaleable() && $this->hasOptions()):?>
        getChildChildHtml(‘container1’, ”, true, true) ?>

        getReviewsSummaryHtml($_product, false, true)?>
        canEmailToFriend()): ?>
        <a href="helper(‘catalog/product’)->getEmailToFriendUrl($_product) ?>”>__(‘Email to a Friend’) ?>

        isSaleable() && $this->hasOptions()):?>
        getChildChildHtml(‘container2’, ”, true, true) ?>

  2. hi I’m trying to implement this please could you post a link to a modified list.phtml file or could you please email me one.

    Thanks in advance

    Chris Grierson

  3. Chris says:

    managed to get it working in the end, code pasted here does not work properly the ” and ‘ are not recognised in my code editor, had to change a few things including adding the javascipt with action method addjs to the local.xml file otherwise it just ignores the function

  4. Anup says:

    Hi Bijal,

    Thanks for the code and it is really useful for me in our website. Actually my requirment is little bit different.

    I wanted to display different quantity text boxes instade of single select box on the Category
    listing page.

    Can you please guide me, its urgent..If you have any code snippet please let me know.

    Waiting for positive reply. Thanks in advance.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s