·

photo credit: Car Park Illumination via photopin (license)

How to add custom properties to magento attributes

A while ago I wrote an answer on stack overflow regarding the question “How to add custom property to Magento attributes and display it on the front end”. The question was simple:

I would like to add a text description on the properties’ tab and display it on the front end.

I happened to have done this on a project a while ago, so I gave a fairly simple answer on this question. More recently, I received an e-mail from Shanit Hamo, who had some problems implementing my answer.
Instead of posting a more detailed answer in an e-mail, I decided it’s better to share this technique with the world. In this tutorial I’ll explain it.

Step 1: Setup your module

You’ve probably created a module before, so we can keep this short and simple. If you never created a module before, you might want to read this article first. For this module we use the package name ‘Example’ and we call our module ‘Tooltip’, because that’s what we’re going to make: a tooltip for attributes.
Create a file called Example_Tooltip.xml  in app/etc/modules . Put this in it:

This simply tells us to create a module in our local codepool (don’t forget the capital ‘P’ in codePool ;-)).
Next we create a configuration file config.xml  in app/code/local/Example/Tooltip/etc . Put the following configuration in it:

Note that in our resources -part we use the Mage_Eav_Model_Entity_Setup  class for our setup script. This is because we are going to work with EAV tables.

Step 2: Create the installer

Don’t refresh your page just yet! If you do so, you will already trigger the setup-part of your module and we haven’t wrote the installer yet. If you did already refreshed your page, no panic: just open the database, navigate to the core_resources -table and delete the row that has the code tooltip_setup .
Now for the installer part: Create a file called mysql4-install-1.0.0.php  in a folder called sql/tooltip_setup  in your modules folder. Put this in it:

If you now refresh your page, the installer will run (once). You might not see any difference, but something magical happened in your database. An extra column is added to the catalog_eav_attribute -table:

Screen Shot 2015-02-19 at 21.37.38
Now that’s nice, our database is ready to save some cool tooltips, but or backend isn’t. So how do we solve this?

Step 3: Add the field to the backend

If we want to create tooltips, we have to have a field in the backend where we can store these tooltips. Lucky for is, there is an event called adminhtml_catalog_product_attribute_edit_prepare_form  which allows us to manipulate the form that is used to create and/or edit attributes. Add the following lines to the config -scope in your config.xml  file:

This line tells Magento to fire the method addFieldToAttributeEditForm from our observer. But before Magento can call that method, we need to create our observer first. Create a file called Observer.php  in the Model -folder of your module, and put the following in it:

Now go ahead, go and create or edit an attribute. See something different?

Screen Shot 2015-02-19 at 21.53.44
That’s right! All the way on the bottom we see a new field called ‘Tooltip’. Isn’t that nice? Now go ahead, fill something in and save it! See that? It’s automagically saved in the database! No controllers required! That’s because it’s an attribute that directly exists in the catalog_eav_attribute -table so it can be saved by Magento’s default mechanics.

Step 4: Show it on the frontend

We’re almost there. We now have our custom field added to our attribute. The only thing that’s left now is to show it on the frontend. Lucky for us, this is also very simple. Because it’s a direct field in the database table (like we mentioned above), we can retrieve the tooltip by using Magento’s (default) magical getters:

And that’s it! The attribute’s tooltip should now be shown on your frontend. Of course it’s now nothing more than a plain old string, but with some CSS and JavaScript you can pimp it like the real deal.

In conclusion

Although this might seem as a lengthy article, it’s actually quite easy to add extra options to EAV-attributes themselves. In this example I created a simple tooltip, but you could also use images, textareas, checkboxes, or create dropdowns with relations to other entities. The possibilities are endless!
Disclaimer: Now I know what some of you might say: “This solution is not good! Storing a tooltip like this is going to give you a bad time when it comes to multilingual sites!”. I agree with you one that one, but the main purpose of this article is on how to add extra fields to attributes, and for the sake of simplicity I’m leaving multi language out of the scope of this article. If there are requests for a multi language solution for a tooltip please let me know in the comments below this article. If there are enough requests, I’ll see if I can cover that.
Oh, and for those who don’t like reading lengthy articles, but rather just get the goods themselves, you can download this module here.

Visitors give this article an average rating of 3.8 out of 5.

How would you rate this article?

31 thoughts on “How to add custom properties to magento attributes”

  1. Shanit Hamo says:

    thanks for your lengthy article…
    I want to add a tooltip to attribute , but my website is multi-lingual . Can you suggest a way for me to add a tooltip to my site or can you point me in the right direction for research? Thanks!

    1. Giel Berkers says:

      Hi shanti, there are various options possible to achieve this. The first one is by using magento’s default translation functionality in your templates (__();), but the drawback of course is that this isn’t (easy) manageable for your client. Another option is to show multiple input fields in the backend (with a simple foreach loop for example) and to store and retrieve these values according to the current view. This is not the most magento-way of doing this but it’s not much effort to create this. A third option would be to do this the magento-way by adding an extra tab to the attributes screen where you can set the value for the tooltip in a similar way as you would do with the values. It’s up to you, your client wishes and your magento skills which solution suits best.

      1. Rustam says:

        Thank you Giel,

        For this useful tutorial. I really like to use 3rd option:
        – “Magento-way by adding an extra tab to the attributes screen where you can set the value for the tooltip in a similar way as you would do with the values”.
        Would you please advise me how can I add an extra tab on the attributes screen?
        Thank you in advance.

  2. Mark Lock says:

    Hi – I was able to create a custom field using your example but I am a little confused as to how to add two fields! I duplicated the code (created two modules) and changed the references but even though both fields are visible only one is getting saved. Do you have any idea please?

    1. Giel Berkers says:

      Have you also created the second column in the database (or verfied it’s there)? Also: when you’ve edited the database manually, you have to clear the entire cache (remove the complete cache directory): Zend caches the database table schema, which causes Magento to ‘not know’ about the newly added column, thus not being able to save the value.

      1. Mark Lock says:

        Hi Giel,

        Thanks for your answer. It was the cache thanks 🙂

        One question though if you dont mind please? I am trying to add new attributes using $installer but I dont seem to be able to set tooltip. I am using it like this

        $installer = Mage::getResourceModel(‘catalog/setup’,’default_setup’);
        $installer->startSetup();
        $installer->addAttribute(‘catalog_product’, ‘AAAA1’, array(
        ‘type’ => ‘varchar’,
        ‘backend’ => ”,
        ‘frontend’ => ”,
        ‘label’ => ‘Page Layout’,
        ‘input’ => ‘select’,
        ‘class’ => ”,
        ‘source’ => ‘catalog/product_attribute_source_layout’,
        ‘global’ => Mage_Catalog_Model_Resource_Eav_Attribute::SCOPE_STORE,
        ‘visible’ => true,
        ‘required’ => false,
        ‘user_defined’ => true,
        ‘default’ => ”,
        ‘searchable’ => false,
        ‘filterable’ => false,
        ‘comparable’ => false,
        ‘visible_on_front’ => false,
        ‘unique’ => false,
        ‘Tooltip’ => ‘some tooltip text’
        ));

        Any ideas please

        1. Giel Berkers says:

          Haven’t tried, but you could try lowercase ‘tooltip’. You are now using a capital ‘T’. Or use ‘note’ instead.

  3. matt says:

    Hi,

    I am having issues with this. We have successfully implemented the instructions but I am trying to do something slightly different which is not working. I would like to add a ‘read more’ link which will be added to the attributes on the filter. I have replicated the above process but when trying to add the call to the db table to layered navigation view file, nothing happens.

    1. Giel Berkers says:

      Have you confirmed that the column is created in the database, the values are saved, and entirely flushed your cache? (as in: completely deleted the cache directory).

      1. Matt says:

        Thanks for the quick reply 🙂 Yes the entry is being created in the DB and is showing correctly on the product. I am trying to get it to show on the layered nav filter using your code.

        1. Giel Berkers says:

          Ah I see. It’s just a wild guess, but the layered navigation uses filters, not attributes. The bottom line is that a filter doesn’t necessary have to be a product attribute: it can also be a category filter, or a price filter for example.

          What you could try is:

          1: Check if the filter is an attribute filter.
          2: Find out the ID of the attribute the filter uses.
          3: Load the corresponding attribute model.
          4: Show the tooltip.

          I hope this points you in the right direction into solving your problem.

  4. Doesn’t work on 1.7.0.2

  5. Yilmaz says:

    Doesn’t work on 1.7.2

  6. Yilmaz says:

    The tooltip field is showing in database, but in admin i can’t see a tooltip field

    1. Rahul Singh says:

      @Yilmaz, I had also faced the same situation like the tooltip field was showing in database, but it wasn’t displaying in admin section. So below is the solution to display it in admin section.

      Solution :-
      put the below code “outside global” scope

      singleton
      Example_Tooltip_Model_Observer
      addFieldToAttributeEditForm

  7. RJ says:

    I’m having the same problem of not being able to get the tooltip showing in the admin panel. It’s in the database, but as far as I can tell it isn’t connecting to the Observer.php file. I tried making a few test logs in the Observer.php file to see if it was getting that far, but I’m not getting anything in the log files. Any ideas where it could be breaking?

    1. RJ says:

      For those struggling with the same problem of the tooltip field not showing up in the Magento admin panel, try changing the tag under the tag to Example_Tooltip_Model_Observer instead of tooltip/observer. That worked for me.

      1. RJ says:

        Thats supposed to be “change the class tag under the observer tag”

  8. Sean Scott says:

    What about adding a tool tip to a custom options field? Great write up as well. Thank you.

  9. yeken says:

    Tooltip module wasn’t showing up (in system->configuration->advanced) till i deleted cache… somewhat obvious but worth mentioning.

  10. Arvind says:

    Thanks,
    it was awesome 🙂

  11. mayank says:

    how can i add image type field, plz help

  12. nayal16 says:

    In case value is saving in database but not displaying in front, add following lines in your observer:
    $attribute = $observer->getAttribute();
    if($databaseColumnName = $attribute->getDatabaseColumnName()){
    $form->getElement(‘form_label_name’)->setValue($databaseColumnName );
    }

  13. Emanuele says:

    Thanks for the tutorial , but I need help .
    I see the field beckend and were created the field in the table .
    I tried to edit an attribute , and the value is regularly inserted into the database.
    I can’t understand how i can display in the frontend.

  14. Chris Richardson says:

    anyone try this on an EE platform? or have any idea if there are additional considerations?

  15. Alex says:

    Hello! Tell me please, how can i do this on Magento 2?

    1. Giel Berkers says:

      Hi Alex, as soon as I encounter this problem myself, I’ll be sure to share it with you guys.

  16. Christian says:

    Very great tutorial.Thank you very much. Unfortunately, I can’t see the tooltip in the backend. I tried all offered solutions, but nothing works. Do you have any ideas?

Leave a Reply