How to add the configurable product to Cart from list page itself

Question

In magento 1.9.2.2, Iэve enabled the configurable swatches for the attribute color in product list page. But when I click add to cart button, it redirects to product details page. From there when I select the color and add the product to cart it is added to cart. I want to add it directly from list page without coming to product details page and selecting it.

Here is my code to add it directly to cart from list page,

<?php if($_product->isSaleable() ): ?>

   <p class="action"><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 elseif($_product->isConfigurable() ): ?>
    <?php $options = $_item->getProduct()->getTypeInstance(true)->getOrderOptions($_item->getProduct()); ?>
            <?php 
            foreach($options['attributes_info'] as $key => $value){ 
            <p class="action"><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="action availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>

But it is redirecting to details page. Where have I went wrong? Someone please help

Answer 1

For configurable product, you need to fetch product option using ajax to list page. then user can select option from there and do add to cart.

There is extension available for this.

https://www.magentocommerce.com/magento-connect/ajaxcart-3-15606.html

Hope it helps you