How to Show product options in product list page in Magento

In this article, we will recommend some effective methods to show options for the configurable and product options in product list. Check them out! Showing options for Configurable products :-

Reality: You can both show all options for the product and add and customize price to each of the options. Just follow these steps: 1. Create Acatalog module with AHT namespace (app/local/AHT/Acatalog) 2.Create a file named app/etc/modules/AHT_Acatalog.xml to activate the module:

  
    
      true
      local
    
  

3. Create a file named app/local/AHT/Acatalog/ect/config.xml with the following content

<?xml version="1.0"?>

    
        
            1.0.1
        
    
    
        
            
                
                    AHT_acatalog.xml
                
            
        
    
    
        
            
                
                    AHT_Acatalog_Block_Product_List
                
            
        
    

4. Create a file named app/local/AHT/Acatalog/Block/Product/List.php to overwrite the block of Mage_Catalog_Block_Product_List with the following content:

<?php

class AHT_Acatalog_Block_Product_List extends Mage_Catalog_Block_Product_List {

    public function getPriceJsonConfig($product) {
        $config = array();
        if (!$product->getTypeInstance(true)->hasOptions($product)) {
            return Mage::helper('core')->jsonEncode($config);
        }
        $_request = Mage::getSingleton('tax/calculation')->getDefaultRateRequest();
        $_request->setProductClassId($product->getTaxClassId());
        $defaultTax = Mage::getSingleton('tax/calculation')->getRate($_request);
        $_request = Mage::getSingleton('tax/calculation')->getRateRequest();
        $_request->setProductClassId($product->getTaxClassId());
        $currentTax = Mage::getSingleton('tax/calculation')->getRate($_request);
        $_regularPrice = $product->getPrice();
        $_finalPrice = $product->getFinalPrice();
        if ($product->getTypeId() == Mage_Catalog_Model_Product_Type::TYPE_BUNDLE) {
            $_priceInclTax = Mage::helper('tax')->getPrice($product, $_finalPrice, true, null, null, null, null, null, false);
            $_priceExclTax = Mage::helper('tax')->getPrice($product, $_finalPrice, false, null, null, null, null, null, false);
        } else {
            $_priceInclTax = Mage::helper('tax')->getPrice($product, $_finalPrice, true);
            $_priceExclTax = Mage::helper('tax')->getPrice($product, $_finalPrice);
        }
        $_tierPrices = array();
        $_tierPricesInclTax = array();
        foreach ($product->getTierPrice() as $tierPrice) {
            $_tierPrices[] = Mage::helper('core')->currency(
                    Mage::helper('tax')->getPrice($product, (float) $tierPrice['website_price'], false) - $_priceExclTax
                    , false, false);
            $_tierPricesInclTax[] = Mage::helper('core')->currency(
                    Mage::helper('tax')->getPrice($product, (float) $tierPrice['website_price'], true) - $_priceInclTax
                    , false, false);
        }
        $config = array(
            'productId' => $product->getId(),
            'priceFormat' => Mage::app()->getLocale()->getJsPriceFormat(),
            'includeTax' => Mage::helper('tax')->priceIncludesTax() ? 'true' : 'false',
            'showIncludeTax' => Mage::helper('tax')->displayPriceIncludingTax(),
            'showBothPrices' => Mage::helper('tax')->displayBothPrices(),
            'productPrice' => Mage::helper('core')->currency($_finalPrice, false, false),
            'productOldPrice' => Mage::helper('core')->currency($_regularPrice, false, false),
            'priceInclTax' => Mage::helper('core')->currency($_priceInclTax, false, false),
            'priceExclTax' => Mage::helper('core')->currency($_priceExclTax, false, false),
            /**
             * @varskipCalculate
             * @deprecated after 1.5.1.0
             */
            'skipCalculate' => ($_priceExclTax != $_priceInclTax ? 0 : 1),
            'defaultTax' => $defaultTax,
            'currentTax' => $currentTax,
            'idSuffix' => '_clone',
            'oldPlusDisposition' => 0,
            'plusDisposition' => 0,
            'plusDispositionTax' => 0,
            'oldMinusDisposition' => 0,
            'minusDisposition' => 0,
            'tierPrices' => $_tierPrices,
            'tierPricesInclTax' => $_tierPricesInclTax,
        );
        $responseObject = new Varien_Object();
        Mage::dispatchEvent('catalog_product_view_config', array('response_object' => $responseObject));
        if (is_array($responseObject->getAdditionalOptions())) {
            foreach ($responseObject->getAdditionalOptions() as $option => $value) {
                $config[$option] = $value;
            }
        }
        return Mage::helper('core')->jsonEncode($config);
    }

    public function getViewTypeConfigurableBlock($product) {
        $block = new Mage_Catalog_Block_Product_View_Type_Configurable();
        $block->setData('product', $product);
        return $block;
    }
}
?>

5. Create 2 javascript files named js/AHT/product.js and js/Aht/configurable.js (See attached). Create a file named app/design/frontend/default/default/layout/aht_acatalog.xml to add the javascript:

<?xml version="1.0"?>

    
        
            
            
        
    
    
        
            
            
        
    

6. Copy list.phtml from the folder app/design/frontend/base/default/template/catalog/product/ to the folder app/design/frontend/default/default/acatalog/product/ and find the line:

<?php
if ($_product->isSaleable() && $_product->getTypeId() == 'configurable') {
    $product = Mage::getModel('catalog/product')->load($_product->getId());
    $block = $this->getViewTypeConfigurableBlock($product);
    $_attributes = Mage::helper('core')->decorateArray($block->getAllowAttributes());
    ?>
    <?php if (count($_attributes)): ?>
        

           <?php foreach ($_attributes as $_attribute): ?>
                
*<?php echo $_attribute->getLabel() ?>
                
<?php if ($_attribute->decoratedIsLast) { ?> class="last"<?php }?>>
                    

                        
                            <?php echo $this->__('Choose an Option…') ?>
                        
                    
                
            <?php endforeach; ?>
        
        [/code]
    <?php endif; ?>
<?php } ?>

Display options for Simple products Reality: You can show all available options for the product on the product listing page. In the template: app/design/frontend/base/default/template/catalog/product/list.phtml, place the following code:

<?php
$html = '';
$product = Mage::getModel('catalog/product')->load($_product->getId());
$options = $product->getOptions();
if (count($options)) {
    foreach ($options as $_option) {
        if (count($_option)) {
            $html .= '';
            foreach ($_option->getValues() as $_value) {
                $html .= '' . $_value->getTitle() . '';
            }
            $html .= '';
        }
    }
}
echo $html;
?>

to any position below the line of:

<?php $i = 0; foreach ($_productCollection as $_product): ?>

See result:

We hope our suggestion is useful enough for you to solve the product options issue. We highly appreciate your comment and continuous contribution to this techniques library. You can download full source here AHT_product_list_option Reference #http://www.magesolution.com/