Magento Techniques to Show configurable product options in custom product listing with price change

Displaying product options like colors, sizes, price… in the custom product list gives an incentive to the customer to select and purchase a product. It is likely not possible to achieve these options by installing default Magento alone. In this article, we will recommend some effective methods to show options for the configurable and product options in custom product list. Check them out!

1. Create Productoptions module with Magebug namespace (app/local/Magebug/Productoptions)
2.Create a file named app/etc/modules/Magebug_Productoptions.xml to activate the module:
Here is code :

<config>
  <modules>
    <Magebug_Productoptions>
      <active>true</active>
      <codePool>local</codePool>
    </Magebug_Productoptions>
  </modules>

</config>

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

<?xml version="1.0"?>

<config>

    <modules>

        <magebug_productoptions>

            <version>1.0.0</version>

        </magebug_productoptions>

    </modules>

    <frontend>

        <routers>

            <productoptions>

                <use>standard</use>

                <args>

                    <module>Magebug_Productoptions</module>

                    <frontName>productoptions</frontName>

                </args>

            </productoptions>

        </routers>

        <layout>

            <updates>

                <productoptions>

                    <file>productoptions.xml</file>

                </productoptions>

            </updates>

        </layout>

    </frontend>

    <global>

        <blocks>

            <productoptions>

                <class>Magebug_Productoptions_Block</class>

            </productoptions>

        </blocks>

    </global>

</config>

4. Create a file named app/local/Magebug/Productoptions/Block/Productoptions.php to overwrite the block of Mage_Catalog_Block_Product_List with the following content:

<?php

class Magebug_Productoptions_Block_Productoptions 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),

            /**

             * @var skipCalculate

             * @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;

    }

    public function getProductId() {

        $productid = $this->getData('product_id');

        return explode(',', $productid);

    }

}

5. Create 2 javascript files named js/productoptions/product.js and js/productoptions/configurable.js

(Download attached

)

6. Create layout xml file and add the javascript file

Path :: app/design/frontend/default/default/layout/productoptions.xml

<?xml version="1.0"?>

<layout version="0.1.0">

    <productoptions_index_index>

        <reference name="head">

            <action method="addJs"><script>productoptions/product.js</script></action>

            <action method="addJs"><script>productoptions/configurable.js</script></action>

        </reference>

        <reference name="content">

            <block type="productoptions/productoptions" name="productoptions" template="productoptions/productoptions.phtml"/>

        </reference>

    </productoptions_index_index>

</layout>

7. Create phtml file and put below code

Path :: app/design/frontend/base/default/template/productoptions/productoptions.phtml

<?php

//Load product collection by product id

$collection = Mage::getModel('catalog/product')->getCollection();

$collection->addAttributeToSelect('*');

$collection->addAttributeToFilter('status',1);

if(!empty($collection)){

?>

<div class="category-product-main">

<ul>

<?php

foreach ($collection as $_product):

?>

<li>

<h3><a href="<?php echo $_product->getProductUrl();?>"><?php echo $_product->getName();?></a></h3>

<span>

<a href="<?php echo $_product->getProductUrl()?>" title="<?php echo $_product->getName()?>">

<img src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(150, 150); ?>" alt="<?php echo $_product->getName()?>" />

</a>

</span>

<form action="<?php echo $this->helper('checkout/cart')->getAddUrl($_product) ?>" method="post" id="product_addtocart_form_<?php echo $_product->getId()?>" enctype="multipart/form-data">

<?php echo $this->getPriceHtml($_product, true) ?>

<?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)): ?>

<dl>

<?php foreach($_attributes as $_attribute): ?>

<dt><label><?php echo $_attribute->getLabel() ?></label></dt>

<dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>

<div class="input-box">

<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select-<?php echo $_product->getId() ?>">

<option><?php echo $this->__('Choose an Option...') ?></option>

 </select>

 </div>

</dd>

<?php endforeach; ?>

</dl>

<script type="text/javascript">

var spConfig_<?php echo $_product->getId() ?> = new Product.Config(<?php echo $block->getJsonConfig() ?>, <?php echo $_product->getId() ?>, new Product.OptionsPrice(<?php echo $this->getPriceJsonConfig($product) ?>));

</script>

<?php endif;?>

<?php } ?>

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

<div class="buy-add-to-cart">

<div class="qty-wrapper">

<label for="qty"><?php echo $this->__('Qty:') ?></label>

<input type="text" class="input-text qty" title="<?php echo $this->__('Qty') ?>" value="<?php echo ($this->getMinimalQty($_product)?$this->getMinimalQty($_product):1) ?>" maxlength="12" name="qty">

</div>

<div class="add-to-cart-buttons">

<button onclick="this.form.submit()" class="button btn-cart" title="<?php echo $this->__('Buy') ?>" type="button"><span><?php echo $this->__('Buy') ?></span></button>

</div>

</div>

<?php endif; ?>

</form>

</li>

<?php endforeach;?>

</ul>

</div>

<?php }?>

Now Flush Magento Cache and refresh page.

We hope my 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 Magebug_Productoptions