Configurable product on list.phtml page

Question

I want to show configurable products on list page.so instead of going into detail page of products, user can directly add product to cart from list.phtml page.any idea how to imple this?

Answer 1

Here is a step-by-step tutorial displaying configurable product options on category list page and adding configurable product to cart from list page.

I tried this on Magento CE 1.9 and it's working fine.

http://catgento.com/2012/02/09/adding-configurable-product-options-to-category-list-in-magento/

Answer 2

I did something similar for multiple configurable products in a lightbox.

First thing you need is your block to show the products configurable html. You'll probably extend this from Mage_Catalog_Block_Product_List. In this block, create a method

/**
 * Gets the configurable options template if needed
 *
 * @param Mage_Catalog_Model_Product $product
 * @return string
 */
public function getConfigurableHtml(Mage_Catalog_Model_Product $product)
{
    if ($product->getTypeId() == Mage_Catalog_Model_Product_Type_Configurable::TYPE_CODE) {
        return Mage::app()->getLayout()
        ->createBlock('modulename/catalog_product_view_type_configurable')
            ->setProduct($product)
            ->setTemplate('modulename/catalog/product/list/configurable.phtml')
            ->toHtml();
    }
    return '';
}

Go ahead and use a layout update to set the template to modulename/catalog/product/list.phtml as well.

In your list template (copied from base/default) you need to get the configurable html with our new method. You also need to wrap it in a form (make sure the add to cart button is in there). There should be a product collection somewhere (one for list mode, the other for grid)

<?php foreach ($_productCollection as $_product): ?>
    <form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form_<?php echo $_product->getId() ?>"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
        <?php echo $this->getConfigurableHtml($_product) ?>
        <?php echo $this->getPriceHtml($_product, true) ?>
        <?php if($_product->isSaleable()): ?>
            <p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
        <?php else: ?>
            <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
        <?php endif; ?>
    </form>
<?php endforeach ?>

Now create your configurable block and phtml (as defined in getConfigurableHtml() above)

In your configurable block, override getJsonConfig() to add a container class (each must be unique)

class Namespace_Modulename_Block_Catalog_Product_View_Type_Configurable
    extends Mage_Catalog_Block_Product_View_Type_Configurable
{
    /**
     * Composes configuration for js
     *
     * @return string
     */
    public function getJsonConfig()
    {
        $config = Mage::helper('core')->jsonDecode(parent::getJsonConfig());
        $config['containerId'] = 'configurable-container-' . $this->getProduct()->getId();
        return Mage::helper('core')->jsonEncode($config);
    }
}

And now in your configurable.phtml, create the select boxes, load the json config, and add your container class

<?php
$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <dl id="configurable-container-<?php echo $_product->getId() ?>">
    <?php foreach($_attributes as $_attribute): ?>
        <div class="option-wrapper">
            <dt class="title-wrap"><label class="required"><?php echo $_attribute->getLabel() ?></label></dt>
            <dd class="option-wrap">
                <div class="input-box">
                    <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="modulename-super-attribute-select">
                        <option><?php echo $this->__('Choose an Option...') ?></option>
                    </select>
                    <div class="options-arrow"><img src="<?php echo $this->getSkinUrl('images/option-arrow.png');?>" alt="<?php echo $this->__('option arrow');?>"/></div>
                  </div>
            </dd>
        </div>
    <?php endforeach; ?>
    </dl>
    <script type="text/javascript">
        var spConfig_<?php echo $_product->getId() ?> = new ModulenameProduct.Config(<?php echo $this->getJsonConfig() ?>);
    </script>
<?php endif;?>

Notice a few other things. The modulename-super-attribute-select classname on the the select, the uniquely named javascript var, and the custom Product.Config(). In all honesty, I was getting a little stuck, so this last part isn't pretty but it should work.

Create and include a JS file via layout update. What I did was copy and paste the Product.Config object here (copied from js/varien/configurable.js) because I was having trouble extending it. There was only one thing that needed changing

var ModulenameProduct = {};
ModulenameProduct.Config = Class.create();
ModulenameProduct.Config.prototype = {
    initialize: function(config){
        this.config     = config;
        this.taxConfig  = this.config.taxConfig;
        if (config.containerId) {
            // Add our special classname for the select to it doesn't conflict
            this.settings   = $$('#' + config.containerId + ' ' + '.modulename-super-attribute-select');
        } else {
            // here too
            this.settings   = $$('.modulename-super-attribute-select');
        }
        this.state      = new Hash();
        this.priceTemplate = new Template(this.config.template);
        this.prices     = config.prices;
    // ...

And that should do it. I haven't completely tested this since my situation was a bit different, but it should get you started.

Answer 3

To achieve this you need to do a lot of work.

You need to look at the configurable json output you have at product view, because you need to write your own output for this.

You should be sure, that you dont have the case, that any product has different prices depending on the chosen configurable, because to reimplement this is a real pain.

You should look for a working module, if you really want this. Else plan to need a few weeks to understand how configurables work at all and how to implement the existing js functionality, everything else will lead to buggy code which will break your shop regularly.