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:
So, what do you think ?