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:
|
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0" encoding="UTF-8"?> <config> <modules> <Example_Tooltip> <active>true</active> <codePool>local</codePool> </Example_Tooltip> </modules> </config> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?xml version="1.0" encoding="UTF-8"?> <config> <modules> <Example_Tooltip> <version>1.0.0</version> </Example_Tooltip> </modules> <global> <models> <tooltip> <class>Example_Tooltip_Model</class> </tooltip> </models> <resources> <tooltip_setup> <setup> <module>Example_Tooltip</module> <class>Mage_Eav_Model_Entity_Setup</class> </setup> </tooltip_setup> </resources> </global> </config> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php /* @var $this Mage_Eav_Model_Entity_Setup */ // Add an extra column to the catalog_eav_attribute-table: $this->getConnection()->addColumn( $this->getTable('catalog/eav_attribute'), 'tooltip', array( 'type' => Varien_Db_Ddl_Table::TYPE_TEXT, 'nullable' => true, 'comment' => 'Tooltip' ) ); |
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:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<adminhtml> <events> <adminhtml_catalog_product_attribute_edit_prepare_form> <observers> <tooltip> <type>singleton</type> <class>tooltip/observer</class> <method>addFieldToAttributeEditForm</method> </tooltip> </observers> </adminhtml_catalog_product_attribute_edit_prepare_form> </events> </adminhtml> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php class Example_Tooltip_Model_Observer { /** * Hook that allows us to edit the form that is used to create and/or edit attributes. * @param Varien_Event_Observer $observer */ public function addFieldToAttributeEditForm($observer) { // Add an extra field to the base fieldset: $fieldset = $observer->getForm()->getElement('base_fieldset'); $fieldset->addField('tooltip', 'text', array( 'name' => 'tooltip', 'label' => Mage::helper('core')->__('Tooltip'), 'title' => Mage::helper('core')->__('Tooltip') )); } } |
Now go ahead, go and create or edit an attribute. See something different?
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:
|
1 2 |
$attribute = $_product->getResource()->getAttribute('manufacturer'); echo $attribute->getTooltip(); |
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 4.0 out of 5.
How would you rate this article?
★ ★ ★ ★ ★
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!
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.thank a lot .
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.
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?
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.
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
Havent tried, but you could try lowercase tooltip. You are now using a capital T. Or use note instead.
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.
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).
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.
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.
Doesn’t work on 1.7.0.2
Doesn’t work on 1.7.2
The tooltip field is showing in database, but in admin i can’t see a tooltip field
@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
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?
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.
Thats supposed to be “change the class tag under the observer tag”
What about adding a tool tip to a custom options field? Great write up as well. Thank you.
Tooltip module wasn’t showing up (in system->configuration->advanced) till i deleted cache… somewhat obvious but worth mentioning.
Thanks,
it was awesome 🙂
how can i add image type field, plz help
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 );
}
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.
anyone try this on an EE platform? or have any idea if there are additional considerations?
Hello! Tell me please, how can i do this on Magento 2?
Hi Alex, as soon as I encounter this problem myself, I’ll be sure to share it with you guys.
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?