Quick Tip: Creating custom product or category attribute renderers

Magento Commerce provides incredible flexibility for managing product attributes. Using attribute management interface of admin panel, various types of product attributes can be created and can be added to specific attribute sets and groups. After creating products with values for these attributes, frontend product page automatically displays value of an each attribute.

Magento automatically determines the product attribute’s input type and displays the value accordingly. For example, the “description” attribute has input type as text area, so it displays description value as long text; while the “manufacturer” attribute has input type as combo-box, so it will display the option label for the selected manufacturer value.

Normally, we don’t need to customize this behavior as it automatically handles most of the attributes as expected. But in some cases, we want to change, decorate or add additional information for some attributes. For example, we have created an attribute ‘website’ which is a simple attribute with input type as text box, and it accepts data in URL format. By default, on the product page, the value of this attribute will be displayed as normal text without a hyperlink to the URL. But instead of displaying this value as normal text, it would be nice to display a hyperlink so that a customer can visit that URL by clicking on it. Also, if we wanted to, we could have this URL open in a new tab or window.

For the above cases, Magento provides a way to customize the product attribute rendering process by defining our own product attribute output handler. The output handler is a class method that takes the current attribute output, product and attribute as parameters and returns the final output.

Before going into detail about it, we should understand how Magento renders product attributes. Here are the step-by-step details about this process:

1. For rendering attribute values, the productAttribute() method of catalog/output helper i.e. Mage_Catalog_Helper_Output class is used.
2. Mage_Catalog_Helper_Output class provides the method addHandler() to add custom product attribute output handlers.
3. When Mage_Catalog_Helper_Output class is instantiated, it fires an event catalog_helper_output_construct. So any observers observing this event are called when this helper class is instantiated.
4. The productAttribute() method of Mage_Catalog_Helper_Output class creates the default output of an attribute value according to its type and specification.
5. After creating the default output, it calls all custom product attribute output handler methods in the same order as they are added. It passes the last output of attribute value, product instance and attribute code as parameters.
6. Final output returned by the last called handler is returned.

So, we have to add our custom output handler by calling addHandler on the catalog/output helper instance before productAttribute() method is called. As mentioned in step 3, an event catalog_helper_output_construct is fired when catalog/output helper in instantiated. So we can observe this event to add our custom output handler.

We will create a new local module with name Magebase_Extras. Here is the config.xml file for this module:

<?xml version="1.0" encoding="UTF-8"?>
<config>
     <modules>
         <Magebase_Extras>
             <version>0.6.0</version>
         </Magebase_Extras>
     </modules>
     <global>
         <models>
             <extras>
                 <class>Magebase_Extras_Model</class>
             </extras>
         </models>
         <helpers>
             <extras>
                 <class>Magebase_Extras_Helper</class>
             </extras>
         </helpers>
     </global>
     <frontend>
         <events>
             <catalog_helper_output_construct>
                 <observers>
                     <extras_attribute_output>
                         <class>extras/observer</class>
                         <method>addCustomAttributeOutputHandler</method>
                     </extras_attribute_output>
                 </observers>
             </catalog_helper_output_construct>
         </events>
     </frontend>
 </config>

Here, we have added a configuration to observe the event catalog_helper_output_construct using the addCustomAttributeOutputHandler() method of our Magebase_Extras_Model_Observer class. Now in Magebase_Extras_Model_Observer class we will define the method addCustomAttributeOutputHandler() as below:

class Magebase_Extras_Model_Observer
{
     public function addCustomAttributeOutputHandler(Varien_Event_Observer $observer)
     {
         $outputHelper = $observer->getEvent()->getHelper();
         $outputHelper->addHandler('productAttribute', Mage::helper('extras/output'));
     }
}

When catalog_helper_output_construct is fired from catalog/output helper class, it passes its own instance in the event data with the key ‘helper’. Here, we retrieve that instance from event data and call the addHandler method on it. The first argument we have passed is ‘productAttribute’ because we are adding handler for product attributes. This would be ‘categoryAttribute’ if we want to add a handler for category attributes. The second argument is an instance of the extras/output helper i.e. Magebase_Extras_Helper_Output class.

Now we will create this helper class Magebase_Extras_Helper_Output and add the output handler method:

class Magebase_Extras_Helper_Data extends Mage_Core_Helper_Abstract
 {
     public function productAttribute(Mage_Catalog_Helper_Output $outputHelper, $outputHtml, $params)
     {
         if ('website' == $params['attribute'] && ($website = $params['product']->getData($param['attribute']))) {
             $outputHtml = sprint('<a href="%s">%s</a>', $website, $outputHtml);
         }
         return $outputHtml;
     }
 }

Here, the productAttribute() method works as a custom output handler for our product attribute. We can similarly define a categotyAttribute() method for our custom output handler to render category attributes. As mentioned in step 5, the productAttribute() method of catalog/output helper class creates the default output of our attribute value. Then it processes all custom handlers. The handler method accepts three parameters: $outputHandler, $outputHtml and $params. $outputHandler is an instance of catalog/output helper itself. $outputHtml is the last created output by previously added handlers. In the case of the first added handler, it is the default Magento output. $params is an array of two elements: ‘product’ containing the current product instance and ‘attribute’ containing the attribute code being rendered.

Custom output handler methods are called for all product attributes rendered. In our case, we wanted to modify the output of our ‘website’ attribute only to format it as a hyperlink. So in our custom output handler method, we have checked if we are currently rendering the ‘website’ attribute by checking the value of $param['attribute']. We have also checked that the product has a value for the ‘website’ attribute.

If both conditions are satisfied, we wrap the last output of the ‘website’ attribute value with HTML code for hyperlinking. Now the product page on the frontend will display the website attribute value as a hyperlink.

The same way can be used for category attributes too by defining categoryAttribute() method as mentioned above.

Originally published on magebase.com. Copyright © 2012 Magebase - All Rights Reserved.