Adding magento attribute with custom input renderer

This is example which will explain you, how to add new attribute with custom input render. You will be able to modify existing functionality, add javascript, some other option or change default input renderer by your wishes.

You probably will ask yourself, what is magento input renderer and I will explain. This is Magento php class which is in charge for “rendering” html form elements. In magento there are different classes for rendering, you can find them in next folder: /lib/Varien/Data/Form/Element. In this folder you will notice next classes for rendering: price, date, image and so on.

Let’s go with our example.

First of all, you should create magento setup file which will add new product attribute with custom frontend input render, example is below:

<?php
$installer = $this;
 
$installer->startSetup();
 
$installer->addAttribute(Mage_Catalog_Model_Product::ENTITY, 'example_field', array(
'group' => 'General',
'type' => 'text',
'backend' => '',
'input_renderer' => 'test/catalog_product_helper_form_example',//definition of renderer
'label' => 'Example field',
'class' => '',
'global' => Mage_Catalog_Model_Resource_Eav_Attribute::SCOPE_WEBSITE,
'visible' => true,
'required' => false,
'user_defined' => true,
'searchable' => false,
'filterable' => false,
'comparable' => false,
'visible_on_front' => false,
'unique' => false,
'apply_to' => 'simple,configurable,bundle,grouped',
'is_configurable' => false,
));
 
$installer->endSetup();

You can see that we are adding attribute with method “addAttribute”, variable “$installer” is instance of “Mage_Catalog_Model_Resource_Setup”, and frontend input rendere is defined in array ‘input_renderer’ => ‘test/catalog_product_helper_form_example’

Next step, you have to create your own input renderer. My example of renderer class (Inchoo_Test_Block_Catalog_Product_Helper_Form_Price) is below, this is very simple class, only for demonstration purpose.

<?php
class Inchoo_Test_Block_Catalog_Product_Helper_Form_Example extends Varien_Data_Form_Element_Text
{
public function getAfterElementHtml()
{
$html = parent::getAfterElementHtml();
return $html." <script>
$('".$this->getHtmlId()."').disable();
</script>";
}
 
}

In my example you can see that I added javascript code which disable input element, admin user can’t edit this field.
I hope that is helpful :-).