Configurable product modification in Magento

Feb 22, 2011 Mladen Lotar Configuration, Extensions, Frontend, Magento, Programming 136 Comments

In this article, I’ll give you extension that will change drop down selection (select field) to radio buttons on configurable products in Magento Community edition.

Well, what I had to do is rewrite Mage_Catalog_Block_Product_View_Type_Configurable block, and create a custom phtml file (configurable.phtml) with some custom validation on it.

Everything I just told you equals to this config.xml:

<?xml version="1.0"?>
<config>
    <modules>
        <Inchoo_Configurable>
            <version>0.1.1</version>
        </Inchoo_Configurable>
    </modules>
    <global>
        <models>
            <configurable>
                <class>Inchoo_Configurable_Model</class>
            </configurable>
        </models>
        <blocks>
            <configurable>
                <class>Inchoo_Configurable_Block</class>
            </configurable>
            <catalog>
                <rewrite>
                    <product_view_type_configurable>Inchoo_Configurable_Block_Frontend_Configurable</product_view_type_configurable>
                </rewrite>
            </catalog>
        </blocks>
    </global>
    <frontend>
        <layout>
            <updates>
                <configurable module="Inchoo_Configurable">
                    <file>configurable.xml</file>
                </configurable>
            </updates>
        </layout>
    </frontend>
</config>

And block rewrite consisted of addition of new method “getRegularConfig” that corresponds to “getJsonConfig”, except it doesn’t return Json encoded data.

And custom template packed in attached zip file is located under “test” theme folder. For installation you need to extract both layout (configurable.xml) and phtml (configurable.phtml) files.
Notice: keep folder structure for phtml file in your theme

And finally, on modern theme it changes configurable product view from this:

To this:

And finally, you can download it here.

Cheers!

136 comments

  1. Hello,

    I’ve installed this extension and it’s working great! I was even able to customize it to display the actual simple product price rather than the plus or minus difference from the base price. Where I’m running into an issue is setting the sort order. This doesn’t appear to be looking at the Product Attribute Options “Order” and is just sorting by the simple product sku. Is there any way to set the “order” of the attribute options and have that order be reflected in the options? Any help would be greatly appreciated.

    Thanks!

    Reply

  3. Hi

    and thank you for that nice extention. I have trouble with the price building. After install i read comments here and add code for multiple options and code looks like below:

    <?php if ($_product->isSaleable() && count($_attributes)):?>
    <dl class="radio">
    <?php foreach($_attributes as $_attribute): ?>
        <dt><label class="required h3"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
            <div class="input-box">
				<?php $configs = $this->getRegularConfig()?>
				<?php foreach($configs['attributes'] as $config):?>
					<?php if ($config['id'] === $_attribute->getProductAttribute()->getData('attribute_id')): ?>
						<?php echo 'config[id]: '.$config['id'].'<br />_attribute[attribute_id]: '.$_attribute['attribute_id'].'<br />'; ?>
						<?php foreach($config['options'] as $value):?>
	                        <dd class="radio <?php #if ($_attribute->decoratedIsLast) echo 'last'; else echo 'fl'; ?>">
		                        <label class="label-radio-configurable" id="<?php echo (float)$value['price'] + (float) $_product->getPrice();?>">
								<input type="radio" name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]"
									id="attribute<?php echo $_attribute->getAttributeId() ?>"
									class="validate-custom-configurable"
									value="<?php echo $value['id']?>"/>
								<?php echo $value['label']?> (+ €<?php printf("%.2f", $value['price'])?>)
							</label>
						<?php endforeach;?>
					<?php endif; ?>
				<?php endforeach;?>
                 </dd>
              </div>
    <?php endforeach; ?>
    </dl>
<?php endif;?>

    I found another hints to price building in comments, but do not know, how to make them work correct. The Problem is now, when i click the first radio button, the price updates correct, when i click in second row on another radio button, the price is not added, it is overritten.

    For the Test, i provide this URL to you to have a look:
    Test configurable product

    I would be very pleased to figure this out with you

    With best regards from Germany:
    Alex

    Reply

  4. Your module is great ! Thank you so much.
    The only thing is I don’t get the right currency symbol. I want to display € in the radio button area.
    I am using CE 1.7 and after long trials on code edition, I can’t find out! Although base currency is € everywhere else on my store… Thank you so much if you could help

    Reply

    1. So easy in fact, the currency symbol doesn’t display dynamically, but is simply written in code in \app\design\frontend\default\YOURTHEME\template\configurable\product\view\type\options\configurable.phtml
      at line #24 :
      (+ $)

      Change + $ by + €. Or even better for €, do it like this :
      (+ €)

    2. So easy in fact, the currency symbol doesn’t display dynamically, but is simply written in code in \app\design\frontend\default\YOURTHEME\template\configurable\product\view\type\options\configurable.phtml
      at line #24 :

      CHANGE

      (+ $<?php printf("%.2f", $value['price'])?>)

      BY

      (+ <?php printf("%.2f", $value['price'])?> €)

      And you will get the result (+ 100 €) instead of ( +$100)

  5. Hi,
    I have copied files from app/design/frontend/default test to my custome theme but nothing change on frontend.
    Does anyone could help me please ?
    Is it necessary to copy Inchoo folder in app/code/local ?

    Thanks

    Reply

  7. In configurable.phtml after 

    <?php foreach($config['options'] as $value):?>

    insert the below code.

    <?php
if($config['label']!= $_attribute->getLabel())
{break;}
?>
    Reply

  8. Great extension, but it seemed to break the configurable swatches function in Magento 1.9. When selecting an option on a configurable product (i.e. Color), I can’t get the main product image to change. Does anyone know a fix for this?

    Reply

  10. Good Extension, but have some issues:
    1. Price not update when options chosen
    2. For product with multi attributes like: color, size… it’s some confuse when all values always show in configuration box, need only display size/color. Ex: when chose one size then one fit color just display

    Reply

    1. In configurable.phtml the code for displaying attribute options is altready part of an attribute loop, however the function getRegularConfig() returns all attributes.

      To fix, encaspulate the loop with:

      attribute_id ) { ?>

    2. To prevent things like this
      in configurable.phtml file do the following:
      Before

      <?php foreach ($config['options'] as $key => $value): ?>

      add

      <?php if ($config['id'] === $_attribute->getProductAttribute()->getData('attribute_id')): ?>

  11. Using this extension, having one problem regarding price. On product view page it shows only regular price for all additional products. Additional price is not displaying. Please reply ASAP.

    Reply

  12. Hi,

    Could you explain how to use this zip folder as am beginner to magento and want to make configurable product attribute size into a radio button instead of dropdown.

    any help will be appreciable & waiting for your response.

    thanks

    Reply

  13. This code is great ! Thank you so much.
    When you say “multiple attributes” you mean transforming the radio into checkbox right ? So the cost of each attribute will be summed
    If not. Do you have a solution for that ?

    Reply

  14. I found a solution for multiple attributes:

    in configurable.phtml change:

     <?php $configs = $this->getRegularConfig($_attribute->getData('attribute_id')) ?>

    and in Configurable.php add in the end of the function add

     if($attribute_id && isset($config['attributes'][$attribute_id])){
            return $config['attributes'][$attribute_id];

        }

    if anyone knows any way to change the images based on one of the attributes?

    Reply

  16. Addition:
    I have tried the above solution (comparing the label which I changed to attribute ID as it made more sense to me) but it still shows ALL available options of this attribute, not only the ones, that my product offers.
    (If I offer my shirt in black and white where black has sizers S and L and white has M and L it still shows S, M and L for both colors)

    Reply

  17. Is there a satisfying solution for multiple attributes yet?
    Otherwise great extension! Love it!

    Reply

  21. i want radio for perticular one option as a customize configuration.phtml default with ur file i get radio button but price not change

    Reply

  23. Just figured out how to fix it when working with multiple currencies.

    In the top of configurable.phtml add these two lines:
    $baseCurrencyCode = Mage::app()->getStore()->getBaseCurrencyCode();
    $currentCurrencyCode = Mage::app()->getStore()->getCurrentCurrencyCode();

    In the id attribute, in the , change the original:

    id=”getPrice();?>”

    for

    id=”currencyConvert($_product->getPrice(), $baseCurrencyCode, $currentCurrencyCode);?>”

    Reply

  24. It does not work with multiple currencies, right?

    In the cart the total is right, but in the products page when you choose an option, the total is wrong. If I find the fix I will post here.

    Reply

  26. Hi,

    Thanks for this extension. I see that the prices are not updated. Could you please tell me how i can fix this?

    Reply

  29. Thanks for nice extension .it’s working fine for me

    can u help me .
    i would like to set attribute option like “amazon” button
    so is there any type of plugin available?

    Reply

  30. Unfortunately it does not work with special prices. I saw in configurable.php that it gets the special price by ->getFinalPrice but on the frontend it always displays the regular price.

    Reply

    1. In configurable.phtml you must replace:

      <label class="label-radio-configurable" id="getPrice();?>”>

      with:

      <label class="label-radio-configurable" id="getFinalPrice();?>”>

      For me it works!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.