Configurable product modification in Magento

Feb 22, 2011 Mladen Lotar Configuration, Extensions, Frontend, Magento, Programming 132 Comments
Featured Image

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!

132 comments

  1. 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)

  2. 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

  4. In configurable.phtml after 

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

    insert the below code.

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

  5. 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

  7. 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 ) { ?>

  8. 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

  9. 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

  10. 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

  11. 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

  13. 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

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

    Reply

  18. 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

  20. 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

  21. 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

  23. Hi,

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

    Reply

  26. 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

  27. 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>.