Monthly Archives: February 2012

Get Customised Tab for Magento Ecommerce Solution

The changes in product features and value of these attributes could be modified via the Product edit page in the Magento Ecommerce solution. A business user shall find it doable if he is looking to edit the standard attributes only but in case of a new product attribute, it needs to be done with some difference.

The course through which a Magento custom module could be created for adding a new tab in the product edit page and offer the functionality of data processing, when a user saves his data.

According to our Magento extension developers, the first step requires creation of a setup file for extension, which will assist in loading of extension in the Magento.

app/etc/modules/Fishpig_Customtabs.xml
<?xml version=”1.0″?>
<config>
<modules>
<Fishpig_Customtabs>
<active>true</active>
<codePool>local</codePool>
</Fishpig_Customtabs>
</modules>
</config>

The corresponding file required is the extension’s configuration file. It is a more comprehensive setup file that has got cues about extension classes, layout files and rest of the information to work it out.  Take cognizance of the events section in the following file. The event is triggered to save the product data, whenever a product is added in admin. This event helps to process and save the data, when data is created in the tab.

app/code/local/Fishpig/Customtabs/etc/config.xml
<?xml version=”1.0″?>
<config>
<modules>
<Fishpig_CustomTabs>
<version>0.1.0</version>
</Fishpig_CustomTabs>
</modules>
<global>
<blocks>
<customtabs>
<class>Fishpig_Customtabs_Block</class>
</customtabs>
</blocks>
<models>
<customtabs>
<class>Fishpig_Customtabs_Model</class>
</customtabs>
</models>
</global>
<adminhtml>
<layout>
<updates>
<customtabs>
<file>customtabs.xml</file>
</customtabs>
</updates>
</layout>
<events>
<catalog_product_save_after>
<observers>
<fishpig_save_product_data>
<type>singleton</type>
<class>customtabs/observer</class>
<method>saveProductTabData</method>
</fishpig_save_product_data>
</observers>
</catalog_product_save_after>
</events>
</adminhtml>
</config>

app/code/local/Fishpig/Customtabs/Block/Adminhtml/Catalog/Product/Tab.php

/**
* Determines whether to display the tab
* Add logic here to decide whether you want the tab to display
*
* @return bool
*/
public function canShowTab()
{
return true;
}

/**
* Stops the tab being hidden
*
* @return bool
*/
public function isHidden()
{
return false;
}

/**
* AJAX TAB’s
* If you want to use an AJAX tab, uncomment the following functions
* Please note that you will need to setup a controller to recieve
* the tab content request
*
*/
/**
* Retrieve the class name of the tab
* Return ‘ajax’ here if you want the tab to be loaded via Ajax
*
* return string
*/
#   public function getTabClass()
#   {
#       return ‘my-custom-tab’;
#   }

/**
* Determine whether to generate content on load or via AJAX
* If true, the tab’s content won’t be loaded until the tab is clicked
* You will need to setup a controller to handle the tab request
*
* @return bool
*/
#   public function getSkipGenerateContent()
#   {
#       return false;
#   }

/**
* Retrieve the URL used to load the tab content
* Return the URL here used to load the content by Ajax
* see self::getSkipGenerateContent & self::getTabClass
*
* @return string
*/
#   public function getTabUrl()
#   {
#       return null;
#   }

}

the above mentioned code is the main code for creating the tab. The extension of the file is Mage_Adminhtml_Block_Template making it an ordinary Adminhtml template and is not capable of doing enough. The tab block has the capacity of extending any block file within Magento. This file is incapable of doing anything itself, so we should include it in a XML layout file.
app/design/adminhtml/default/default/layout/customtabs.xml

<?xml version=”1.0″?>
<layout>
<adminhtml_catalog_product_edit>
<reference name=”product_tabs”>
<action method=”addTab”>
<name>my_custom_tab</name>
<block>customtabs/adminhtml_catalog_product_tab</block>
</action>
</reference>
</adminhtml_catalog_product_edit>
</layout>

The coding may look very basic but its imperative to be done because in its absence nothing could be seen modified on the product edit page.
The conclusive coding that needs to be done before the whole procedure could be deemed ended  includes creating a new template file.
app/design/adminhtml/default/default/template/customtabs/catalog/product/tab.phtml

<?php
/**
* Custom tab template
*/
?>
<div>
<label for=”custom_field”>Custom Field</label>
<input type=”text” name=”custom_field” id=”custom_field” />
</div>

A lot of other options could too be availed by using these codes and a block from your end.
Testing the Custom Tab: To see the tab that you created, you should first refresh your cache and visit the product edit page to witness it.  If there appears to be a problem than you can review the XML once again as a minor error too can be responsible for this glitch.
Saving the data: once the tab is ready, a look inside the data processing of the tab needs to be checked. To check the data, you should hook onto an event called catalog_product_save_after (see config.xml above). This event is repeated every time a product model is saved. An observer for this event  should be  declared  in the adminhtml block, the code will be triggered directly after saving the product model in admin of Magento.
app/code/local/Fishpig/Customtabs/Model/Observer.php

<?php class Fishpig_Customtabs_Model_Observer
{
/**
* Flag to stop observer executing more than once
*
* @var static bool
*/
static protected $_singletonFlag = false;

/**
* This method will run when the product is saved from the Magento Admin
* Use this function to update the product model, process the
* data or anything you like
*
* @param Varien_Event_Observer $observer
*/
public function saveProductTabData(Varien_Event_Observer $observer)
{
if (!self::$_singletonFlag) {
self::$_singletonFlag = true;

$product = $observer->getEvent()->getProduct();

try {
/**
* Perform any actions you want here
*
*/
$customFieldValue =  $this->_getRequest()->getPost(‘custom_field’);

/**
* Uncomment the line below to save the product
*
*/
//$product->save();
}
catch (Exception $e) {
Mage::getSingleton(‘adminhtml/session’)->addError($e->getMessage());
}
}
}

/**
* Retrieve the product model
*
* @return Mage_Catalog_Model_Product $product
*/
public function getProduct()
{
return Mage::registry(‘product’);
}

/**
* Shortcut to getRequest
*
*/
protected function _getRequest()
{
return Mage::app()->getRequest();
}
}

This code may not have anything to do with the data but the process of accessing it is evident from these codes.

Finishing touches:

The extension that we’ve just discussed  is a basic extension with the option of limitless customization in the product edit page of Magento admin. Other sections of Magento could also be customized by this extension like categories, customers etc.

How to Change and Customize Magento Code?

If you want your Magento’s code to be changed a bit to get fitted into your organization then below are the guidelines that will help you separate your code from the main code.

  • Skill level: Beginning to Advanced developer.
  • Target Audience: Developers who need to customize PHP Code.
  • Tested with Magento versions:

1. 0.6.14100 (BETA)
2. 0.7.14800 (BETA)
3. 1.1.6

  • Applicable for all Magento versions (1.1.x and older).

Subversion

Subversion (SVN) or CVS tool works as the best way to monitor your changes. The use of branches for the base Magento code will keep your customized files from being deliberately overwritten whenever you give an update to Magento.

Upgrading to a Newer Version

Upgrade your own SVN repository with the latest version! Subversion and CVS keeps track of the new files, updates and deletes. Don’t just download and extract a new version otherwise you will miss the key files deletes and config file deletes.

Custom Modules

Most probably you would like to create a module that shows your company to hold all your particular changes.

Blocks

Edit app/code/local/XyzCorp/Catalog/etc/config.xml

  • Add a “blocks” tag, or edit inside the available blocks tag, as per your XML file
  • Add a rewrite tag right after module name. This is “catalog” in this case
  • Include the word “breadcrumbs”
  • The name of “breadcrumbs” helps Magento discover Block class you wish to extend

Besides, if you are having more levels below the Block directory, add it on that tag, by making use of underscores so that it can get separated from the class file name.

Magento Authority is a leading Magento web development company that offers Magento customization services and solutions to its clients worldwide.