We have really got in to working with Magento recently, the open source e-commerce system from Varien, providing fully customised, expert level solutions to new customers, and regular clients. It is an amazing platform, and extremely flexible once you know how to work with it. If you need this kind of work, contact us.
Here’s a useful tip we learnt recently on a project for a client. How to add the component parts of a grouped product to a catalog list page and make them purchasable right from there. This is confirmed working in Magento 1.4.0.1. The important thing about this solution is is does not require any core code to be over-ridden, we can do it right from the template, so no worries about core code updates over-riding our stuff. But, for the sake of saying it, don’t do ANYTHING without ensuring you have a working backup and are not overwriting core files first. Enter at your own risk and all that.
The first thing you should do is go in to the admin system for your magento installation and set the category lists to only show in list view, not grid, as obviously putting this kind of table in a grid view somewhat messes up the layout. However, needs must.
To achieve the goal we need to edit two template files. So, according to Magento best practice grab the following two files from the default them and copy them in to your custom theme folder, replacing ‘your_package’ and ‘your_theme’ with your installation’s names as follows:
- /app/design/frontend/your_package/your_theme/template/catalog/product/view/type/grouped-list.phtml
- /app/design/frontend/your_package/your_theme/template/catalog/product/list.phtml
Next, open up the list.phtml file, and inside the div with the class ‘product-shop’, find the three lines of code that read;
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product) ?>
<?php endif; ?>
Just after these lines (they end at line 54 in our file, but yours may vary), add the following code chunk;
<?php if ($_product->isGrouped()): ?>
<form id="<?php echo 'productListForm'.$_product->getId(); ?>" action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" <?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<?php echo $this->setTemplate('catalog/product/view/type/grouped-list.phtml')->setProduct($_product)->toHtml(); ?>
<?php if($_product->isSaleable()): ?>
<p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" onclick="<?php echo 'productListForm'.$_product->getId().'.submit()'; ?>"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
<?php else: ?>
<p><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
</form>
<script type="text/javascript">
//<![CDATA[
var <?php echo 'productListForm'.$_product->getId(); ?> = new VarienForm('<?php echo 'productListForm'.$_product->getId(); ?>');
<?php echo 'productListForm'.$_product->getId(); ?>.submit = function(){
if (this.validator.validate()) {
this.form.submit();
}
}.bind(<?php echo 'productListForm'.$_product->getId(); ?>);
//]]>
</script>
<?php else: ?>
<?php echo $this->getPriceHtml($_product, true) ?>
<?php if($_product->isSaleable()): ?>
<p><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></p>
<?php else: ?>
<p><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
<?php endif; ?>
Then, open the grouped.phtml file and edit the last line of the file that reads;
<script type="text/javascript">decorateTable('super-product-table')</script>
and change it to read;
<script type="text/javascript">decorateTable('super-product-table<?php echo $_product->getId(); ?>')</script>
Save your two files, copy them in to your custom folder tree in the right spots, create some grouped products and you’re done! Grouped products that can be purchased right from the category list page.
More Magento tips soon.
