Kalenyuk Technical Blog

The following code allows you illuminate options for configurable products in Magento.

The steps are:

0. Create configurable product with “size”, “color”, “manufacturer” options.

1. Create new field in the table “catalog_eav_attribute”:

ALTER TABLE `catalog_eav_attribute`
ADD `configurable_option_type` TINYINT( 1 ) UNSIGNED NOT NULL

2. Open method Mage_Adminhtml_Catalog_Product_AttributeController::saveAction
and add verification:

//CONFIGURABLE OPTION TYPES
if (!isset($data['configurable_option_type'])) {
    $data['configurable_option_type'] = 0;
}

3. Open method Mage_Adminhtml_Block_Catalog_Product_Attribute_Edit_Tab_Main::_prepareForm
and add the following:

//OPTION TYPES
$optionTypes = array (
    '0' => '',
    '1' => 'Type1',
    '2' => 'Type2',
    '3' => 'Type3',
);
$fieldset->addField('configurable_option_type', 'select', array(
    'name' => 'configurable_option_type',
    'label' => Mage::helper('catalog')->__('Configurable Option Types'),
    'values' => $optionTypes,
), 'apply_to');

4. Open /app/design/adminhtml/default/default/template/catalog/product/attribute/js.phtml
and change method “checkIsConfigurableVisibility”:

function checkIsConfigurableVisibility()
{
    if (!$('is_configurable') || !$('is_global') || !$('frontend_input')) return;
    if ($F('is_global')==1 && $F('frontend_input')=='select') {
        setRowVisibility('is_configurable', true);
        //CONFIGURABLE OPTION TYPES
        setRowVisibility('configurable_option_type', true);
    } else {
        setRowVisibility('is_configurable', false);
        //CONFIGURABLE OPTION TYPES
        setRowVisibility('configurable_option_type', false);
    }
}

5. Open /app/design/frontend/base/default/template/catalog/product/view/type/options/configurable.phtml and add the following:

//CONFIGURABLE OPTION TYPE
$productAttribute = $_attribute->getData('product_attribute');
$optionType = (int) $productAttribute->getData('configurable_option_type');
$attributeId = $productAttribute->getData('attribute_id');
$attributeCode = $productAttribute->getData('attribute_code');
$selectId = 'attribute'.$attributeId;
//javascript
Event.observe(window, 'load', function() {
    var selectId = "";
    var attributeCode = "";
    if (attributeCode == "manufacturer") {
        $(selectId).style.color = 'green';
    }
    if (attributeCode == "color") {
        $(selectId).style.color = 'red';
    }
    if (attributeCode == "size") {
        $(selectId).style.color = 'blue';
    }
});

Result: