Adding magento attribute with custom input renderer

Featured Image

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


About Domagoj Potkoc

Backend Developer

Domagoj is Magento Certified Developer who enjoys playing tennis after long hours in front of computer screen.

Read more posts by Domagoj / Visit Domagoj's profile

8 comments

  1. I want to add custom frontend_input for “Catalog Input Type for Store Owner” at the creating an product attribute.

    Like at present magento is providing, Text Field,Text Area,Date,Yes/No,Multiple Select,Dropdown,Price,Media Image.
    In this list I want to add new attribute like : multiselect_calender. So it is possible to add new option ? How ?
    Fixed Product Tax

  2. Hi guys.
    Have you faced an issue that disabling this custom extension leads to the situation that product editing page in admin panel becomes blank. That’s obviously because “test/catalog_product_helper_form_example” becomes not active together with an extension.
    Then only idea we currently have is to use the second extension that will catch situations when first extension was disabled. Anyway, this is a stupid hardcode way.
    Any ideas?

  3. it is possible that my custom field is unique? like the email field in the customer registration? tried to put the argument “unique” as true

    'unique'            => true,

    , but apparently it did not work.

  4. I followed this tutorial, not sure if it is down to the version of Magento I am using (1.7.0.2) I found the way to do this was to create new class in:

    lib/Varian/Data/Form/Element/Example.php

    class Varien_Data_Form_Element_Example extends Varien_Data_Form_Element_Text
    {
    }

    Then your input_renderer variable would be called Example.

    From trying to follow this tutorial the class would append this to the start Varien_Data_Form_Element_ of the class so it needed to be in the varien folder.

    I also had to manually change the element in the db

    Eav_Attribute.frontend_input value Example

  5. Hi,

    I’m trying to implement this becuase I need a upload form for flash files. Since I’m just getting started with Magento and all these paths are so confusing, could you tell me wehere those code samples have to go?

    I tried putting the path to the input renderer directly into the database for an existing attribute but there is no field called “input_renderer”. However there are many other field which sound simlilar, my guess is that it’s one of them.

    Also I am never sure where to put the code when yet another tutorial has no description what so ever 😉 I placed it at /app/code/local/Inchoo/Test/Block/Catalog/Product/Helper/Form/Example.php (with my corresponding folder names for company and module name of course). Where does Magento get the information that there is a script anyways? I hope you can help me, thanks in advance!

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